Fork me on GitHub

Ranked awesome lists, all in one place

This list is a copy of addyosmani/critical-path-css-tools with ranks


Critical-path (Above-the-fold) CSS Tools Awesome ★87749 ==========================================

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


This list is a copy of addyosmani/critical-path-css-tools with ranks