Optimizing the critical rendering path

Howdy perfers! Today I have a few links for those who want to optimize the critical rendering path, which is especially useful on mobile browsers. The critical rendering path is the minimum set of assets that a browser needs to start rendering a web page. Carefully rearranging some of your HTML and CSS to help the browser with this process can result in significantly faster rendering times. This means that even if the page doesn’t finish loading much faster than it did before your optimizations, it will start rendering sooner, causing your users to think it is loading much quicker due to their ability to see the page sooner.

Optimizing the Critical Rendering Path

Ilya Grigorik presented at VelocityConf in 2013 (slides available). His presentation of the material is great, explaining the psychology behind our actions when we use devices while also explaining the very real limitations set forth by mobile networks, from radio chips to the gory details of TCP latency. He starts with the goal, which is to break the “1000ms time-to-glass barrier,” and works backwards creating the ideal web page for meeting his 1000ms target. For the true performance nuts it’s great to have this kind of a carrot out in front of us.

But now you’re probably asking yourself “how can I go about this?”

WTCSS

To me one of the most interesting critical rendering path optimizations is inlining basic CSS within the response HTML. Inline CSS can apply to the render tree immediately, meaning the browser does not have to wait on any further requests to render a basic version of your page.

Enter WTCSS, a tool to help visualize how your selectors affect various parts of a page.

WTCSS splits your screen, with one half being your site, and the other half is your CSS. It draws lines connecting each selector to all of the nodes it affects. This visualization makes it really obvious how much influence a generic rule like div or a can have on a page, and more importantly it can help you understand which CSS you need to inline to get above-the-fold content to render. Before anyone reacts with the old design adage “there is no fold,” there really is one in a modern browser’s render pipeline, and we should take advantage of it.

If you’d like an informal demo, take a look at the WTCSS for DrupalCamp Austin. We modified our files after inspecting them with WTCSS, so it might help you get a feel for the desired outcome, with the top of the CSS document containing selectors for the top of the webpage. As you scroll down, you’ll notice that more and more of the blue lines point offscreen at the bottom of the document, due to async loading of our footer assets.

This is just one of many optimizations you can make while working toward the goal of sub-second page loads. Tune in next week for another perfbite to help get you closer!

Other tools to automate this process

Update 2014-03-19: If you’d like to try out another tool that is a bit more opinionated, try Paul Kinlan’s critical CSS bookmarklet or the CasperJS implementation.

Update 2014-12-01: Another tool I often use is called critical, and there is a grunt wrapper to help you integrate into your workflow (you can use the critical module directly within Gulp too).