Faster Drupal - Part 4: CSS/JS Tips

Drupalutvikler, prosjektleder og 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

In this article we want to have a closer look at pros and cons and similarities, this article should be useful for front-end developers or team leaders to decide which one will work best for the next project.

Soheil Sadeghbayan
Liam Soheil

Etter et veldig spennende år og en kommende høst som bugner over av spennende prosjekter ser vi behov for å utvide.

Yngve W. Bergheim
Yngve W. Bergheim

Vi ønsker til denne stillingen en person med teft for marked og salg, som kan ta et vinnerteam til nye høyder. Ramsalt er et ledende Drupal-byrå i Nord-Europa, og vi går nå tungt inn i nye teknologier og CMS-er. 

Yngve W. Bergheim
Yngve W. Bergheim
Soheil Sadeghbayan
Liam Soheil