While attending the Frontend Ops Conference in April, I had the opportunity to hear Paul Irish speak about measures that frontend developers can take to display relevant content on users’ screens as quickly as possible. Most of these recommendations are standard practice at Tivix. I was surprised, though, to hear of the importance of eliminating “render-blocking CSS” – and raised an eyebrow when he recommended sticking CSS for above-the-fold content in a style tag in the head. CSS in the HTML file? Heresy!

So, what is behind this surprising recommendation? Essentially, the goal is to get relevant content before a user’s eyes within a second – or, ideally, within 100ms, which the brain perceives as instantaneous. After one second, the user’s mind starts to shift away, and after ten seconds, the user is likely to give up altogether. As Irish explained, getting data to the user within a second is made difficult by network latency, particularly on mobile. The first set of packets that a user receives amounts to only about 14KB, and waiting for the next set of packets to reach the user will already take us past the “instantaneous” 100ms mark. The most pertinent content, therefore, should reach the user in those first 14KB. This requires giving the crucial content special treatment and leaving the styling for the “nice-to-haves” – comments, social sharing buttons, etc – for later. Google provides an example of eliminating render-blocking CSS here.

There are downsides to this method, though. With responsive design, elements that are below-the-fold on mobile may be above-the-fold on other devices. Displaying HTML before all the CSS has rendered can open the door to ugly flashes of unstyled content. Separating out certain portions of the site’s CSS also creates more complexity, which may or may not be worth the milliseconds saved. Tivix projects typically use Django Compressor, which delivers CSS in one compressed, minified file. This large CSS file only needs to be loaded once, and loyal visitors likely already have it cached.

Nevertheless, we can no longer plop CSS files into the head tag without giving it a second thought. Eliminating render-blocking CSS can be another tool in the web performance toolkit, especially for sites with large CSS files and a substantial mobile user base.