Front End Performance Tips for Your Back Pocket!

 

by Jamie Eastabrook

80-90% of the end-user response time is spent on the frontend. 
Start there.

The performance golden rule

Reasons, why we should spend time increasing the speed of the front end comes, can be boiled down to…

  1. A faster website = More users = Increase of revenue
  2. Better user satisfaction
  3. Search engines rate fast websites higher

Making Drupal blazingly fast

Baris Wanschers’s ‘Make Drupal blazingly fast‘ had me heading back to London with some new tips in my back pocket to start implementing my projects.

Use parallelization

Browsers typically only allow 4-8 concurrent files to download from a domain at a time. Spreading assets over several domains will allow more files to download simultaneously.

CDN

Drupal’s CDN module is a potential solution to achieve this, allowing you to maintain asset locations. It is recommended to keep CSS on the same domain as the HTML though. Of course, there are plenty of other Content Delivery Network solutions you could use (Amazon, CNAME / domain aliases).

Drupal’s jQuery update module not only allows you to bump the jQuery version that Drupal ships with but also uses you to set it to serve via CDN.

Use the CDN version is available with any additional resources you may use such as jQuery plugins.

Link prefetching

In some instances, it may be worth you implementing the HTML5 link prefetching technique.

The technique will basically get the browser to start downloading designated documents (pages, images, etc.) that the user will likely visit after their current location in the site.

Instances, when this technique could come into play, would be on the next page of a search results listing page.

Minimize the number of requests

Send as little data as possible

Obvious right? Let’s just remove any of that unwanted CSS, JS and resources call if they aren’t needed.

This can be achieved in two ways, either add the filename of the stylesheet that you want to kill off into your theme’s .info file as a stylesheet entry but don’t actually create the file in your theme.

For example, removing the Drupal’s default system message CSS file you’d add the following into your theme’s .info file:

stylesheets[all][] = system.messages.css

The other option is to use hook_css_alter() in your theme’s template.php file to strip these out, reorder files, remove files only in certain circumstances.

Another tip is that if your theme is only used as a front-end theme and you use another theme for the back end there are potentially more files you can remove that modules add in that won’t be required and you can safely remove.

Aggregation

Yes, Drupal has CSS and JS aggregation that you should enable on production sites but it isn’t very clever but we get cleverer with the Advanced CSS/JS Aggregation module.

Loading content and assets

We could also lazy load in content, images, blocks that exist further down the page. This would be most useful on a large website that has a large amount of these elements on each page.

Drupal has a number of modules that can be used to achieve these effects, give it a search!

A progressive image effect can also help with speed time and present a nicer experience to the user. It works where the image is blurry initially and then sharpens up to 100% when fully downloaded. You can set this when saving out an image for web in Photoshop:

There is also a Drupal module, Image optimizes effect that will run through all your images and treat it with the same effect.

Testing your site’s performance

Baris’ suggests that 1.1 or 1.2 seconds is a speedy site – so we all know what we should be aiming for now!

Once your site is in a pre-production environment with aggregation, caching and all the other bells and whistles turned on the front end performance testing on the website can begin.

I’d recommend running the site through a performance test tool such as WebPagetest (as suggested by Baris) before doing any tweaks so you can gauge the performance increase.

More

  • Watching the DrupalCon Prague session ‘Making Drupal blazingly fast’ that this post is based off as you may pick yourself up more tips that I haven’t touched on here
  • Recommend reading 14 rules for faster-loading websites for more of the general performance rules.
  • Using a web font to serve up your icons, IcoMoon is a brilliant service for creating your own custom web font for this purpose.
  • Easy generation of image sprites with sass & compass – you can also handle serving up retina and non-retina sprites.

BrightLemon