In our 4 part series on "Faster Drupal", we have so far published three different articles on: 

1. Faster Drupal: Part 1: Caching
2. Faster Drupal: Part 2: Aggregation, CDN and Image Optimization
3. Faster Drupal: Part 3: Theming

If you haven't already read those parts, go ahead and check them out! Now let's get to our beloved CSS/JS stuff!

Faster Drupal - Part 4: CSS/JS Tips

Throughout our R&D (Read googling), we’ve come to find this amazing blog post by Charlie Gerard. The first three items are from her blog post so here’s the TL;DR version that we need for this guide:

• CSS: Avoid modifying layout wherever possible: Changes to some CSS properties will require the whole layout to be updated. For example, properties like width, height, top, left (also referred to as “geometric properties”), require the layout to be calculated and the render tree to be updated.
• CSS: The descendant selector can be expensive: in an example like this: #nav a The browser is going to assess all the links on the page before settling to the ones actually inside our #nav section. A more performant way to do this would be to add a specific selector of .navigation-link on each <a> inside our #nav element. CSS: Browser reads selectors from right to left, so less selector the better
• CSS: Some CSS properties are more expensive than others. What this means is that they take longer to paint. Some of these expensive properties include:
  • border-radius
  • box-shadow
  • filter
  • :nth-child
  • position: fixed
• Check to see if you are overriding your CSS selectors, there are IDE tools for that
• Avoid duplicated CSS selectors, in large scale websites I’m pretty sure you can find a lot of them
• Avoid !important declaration
• Avoid DOM manipulation in javascript to the bare minimum
• Use Drupal.behaviors in your JavaScript.
  The Drupal core will call attached behaviors when the DOM (the object representation of the HTML) is fully loaded and on each AJAX response altering the DOM.
• Conditionally load assets where necessary! You have some JS or CSS only being used for certain nodes/content-types/pages? Load those files for those necessary pages only
• Use one of the methods below to defer parsing for external JavaScript files:
  • Use the async attribute
  • Use the defer attribute
  • append the script to the DOM in JavaScript during the onload event
  • make sure your scripts are placed at the bottom of the page (ideally at the end of the body)
• Be sure to deliver the lightest possible font format. And also note the order of fonts loading is also important. The preferred order of web font formats: EOT, WOFF2, WOFF, TTF, and SVG.
• Try vanilla JS instead of jQuery: I mean we all love jQuery! It’s easy and it comes out of the box in Drupal but if you gotta do what you gotta do: Use the latest jQuery library version if necessary
  Vanilla JS vs jQuery
• Consider making a CSS/Image sprite out of your icons if you are using HTTP1.1 to serve your files, if you are on HTTP2, the number of your requests to the server are not really an issue!

Are we done with this list? Never! We would like to continuously improve it. We would also love to have your comments and suggestions! Also note that we will be publishing a full-blown all included article on this subject, combined of all the parts together in the upcoming weeks.