Tools to help prioritize above-the-fold CSS

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:

• Determine the above-the-fold styles for a page and write them between <style> tags in the head.
• Load all other stylesheets in the footer, ideally asynchronously.

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

• Penthouse - by Jonas Ohlsson generates critical-path CSS
• Critical - by Addy Osmani generates & inlines critical-path CSS (uses Penthouse, Oust and inline-styles)
• CriticalCSS - by FilamentGroup finds & outputs critical CSS

• mod_pagespeed - Apache module for automatic PageSpeed optimization
• ngx_pagespeed - Nginx module for automatic PageSpeed optimization

• grunt-penthouse
• grunt-critical-css
• grunt-critical