Faster Drupal - Part 4: CSS/JS Tips

Drupal Frontend Engineer / Interaction Designer
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

let's get on with what Drupal 10 brings, a host of new features and improvements, making it the most powerful and flexible version of Drupal yet and how we can help you get there.

Sohail Lajevardi
Sohail Lajevardi

This year it was Nina’s first time at DrupalCon. Nina is one of our project managers who is young, eager and willing to learn more about the technical aspects of Drupal so she can use the knowledge to improve her day-to-day project management routines. Since DrupalCon is mostly attended by developers we wanted to interview Nina about how she experienced her first DrupalCon as a project manager.

Photo of Jessica Denkelaar
Jessica Denkelaar

After two years, it was finally time to continue Ramsalt’s one of the most exciting traditions and meet the Drupal community in person again at DrupalCon Prague 2022. Ramsalt had 11 of its team members joining the event in Prague and just as many were attending it virtually. Based on our team’s experience, we have picked out our top recommendations for you from this year’s big event.

Photo of Hansa Pandit
Hansa Pandit

More and more states in the EU are making Google Analytics illegal, and if that isn’t enough to make you look for an alternative web analytics software, here is another strong argument: 

Nina
Nina Holzapfel