Home

Awesome

Critical-path (Above-the-fold) CSS Tools Awesome

Tools to help prioritize above-the-fold CSS

Prioritize above-the-fold content first.

For best performance, PageSpeed Insights recommends inlining the critical (above-the-fold) CSS of your page directly into your HTML. This eliminates additional roundtrips and allows the browser to paint the above-fold experience to your user's screen sooner. The main idea is:

The following is a list of tools to help generate, inline and report on critical-path CSS.

Node modules

Server-side modules

Grunt tasks

CasperJS

PhantomJS

Inline sources (styles, scripts)

Async load CSS

Async loading should be used to fetch the rest of your site-wide styles after you've inlined your critical-path CSS.

Note: The Guardian currently also cache their global styles into localStorage for subsequent page loads. More info in this comment.

Online tools

Bookmarklets/Extensions

Render-blocking issues detection

Supplementary tools