Faster Drupal - Part 4: CSS/JS Tips

Drupal Frontend Engineer
Drupal performance with Ramsalt

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.

Latest news

20 employees from Ramsalt Lab had the opportunity to attend DrupalCon in the city of Barcelona. Read our top recommendations from the conference! 

Photo of Hansa Pandit
Hansa Pandit

Vi søker en visjonær og handlekraftig daglig leder som kan ta vårt utviklingsfirma til nye høyder! Er du en strategisk leder med solid forretningsforståelse og en sterk lidenskap for teknologi og innovasjon? Da vil vi høre fra deg!

Yngve W. Bergheim
Yngve W. Bergheim

The European AI Act came into force on 1 August 2024, bringing new rules and regulations for artificial intelligence within the EU. If you use AI on your website or for content-creation it is important to understand how these changes could have an impact. 

Nina
Nina Holzapfel

We have gathered some reasons why Drupal could be a better choice for your needs.
 

Yngve W. Bergheim
Yngve W. Bergheim