20 April 2016

Improving render speed by including critical CSS

Image: Pixabay
If you're familiar with the Google Pagespeed tool then you may have encountered suggestions to improve how your CSS and Javascript is included.

The idea is to have the content that your user is interested in load and display quickly.  A browser will only start to render the page when it has enough information to do so - it needs both content and the styling information required to draw the content.

Google offers a great guide on the critical rendering path.  This guide seems to me to be much more useful for green fields development because the effort involved in refactoring the DOM is not always feasible.

A quick gain can be had, however, by including the CSS you need for your critical path inside your HTML file.  This means that the browser does not need to make a new connection to retrieve the CSS it needs to start rendering.  It also means that not all of your CSS needs to load before your page can start rendering, just a (hopefully) small subset of your CSS is needed to render the visible portion of your page.

It might not be an easy task to work out exactly what CSS you need to include inline in order for your page to start rendering before everything is downloaded.  Luckily there is a tool, at www.criticalcss.com, which can automate this for you.

Image: Ilya Grigorik, CC Attribution License 3.0
Once you've got your inline CSS you should minify it and include it into the head section of your page.  Now your page will appear to load a lot faster, because it doesn't have to wait for everything to load before displaying something.

The Navigation Timing API lets you measure the effect of your optimisations.  The browser keeps track of the events around every page it loads and makes this available to you via the API.  You can find an example of using the API in the article linked above (on this page).

This will let you measure the effect of any changes you make.  If you're not overly concerned about user privacy and are using Google Analytics then you'll find the page load speeds in your dashboard there too.