Curated list of awesome lists
Critical-path (Above-the-fold) CSS Tools 
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:
- 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.
Node modules
- 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
Server-side modules
- mod_pagespeed - Apache module for automatic PageSpeed optimization
- ngx_pagespeed - Nginx module for automatic PageSpeed optimization
Grunt tasks
CasperJS
- critical-css-casperjs - CasperJS script to pull critical CSS information from pages
PhantomJS
- dr-css-inliner - PhantomJS script to inline above-the-fold CSS on a page.
Inline sources (styles, scripts)
-
inline-styles - by Max Ogden, replaces
<link>tags with inline<style>tags + inlines CSS url() calls with data URIs -
gulp-inline-source - by Filip Malinowski, replaces
<link>tags with inline<style>tags, and replaces<script src="">tags with their inline content -
inline-critical - by Ben Zörb, inline critical path CSS and load existing stylesheets with
loadCSS - isomorphic-style-loader for Webpack - allows to extract critical CSS for any given page/screen in React apps and inline it into HTML during server-side rendering (SSR). See React Starter Kit as an example.
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.
- loadCSS - loads CSS asynchronously using JS. Research that led to this is also available.
- async & conditional loading - POC script for loading CSS files asynchronously and conditionally based on body tag classes
- asyncLoader - async script/stylesheet loader
- basket.js - async script/resource loader with support for localStorage caching. Can be extended to load stylesheets.
Note: The Guardian currently also cache their global styles into localStorage for subsequent page loads. More info in this comment.
Online tools
Bookmarklets/Extensions
- Snippet by Paul Kinlan. Patrick Hamann has an exercise using the snippet you can try out.
- Snippet by Scott Jehl
- CSSVacuum by ndreckshage
Render-blocking issues detection
- PageSpeed Insights - Online tool that measures the performance of a page for mobile devices and desktop devices. It fetches the url twice, once with a mobile user-agent, and once with a desktop-user agent.
- PSI - Node module for PageSpeed Insights reporting as part of your build process. Use directly with Gulp or use grunt-pagespeed if a Grunt user. For local testing, a write-up using this task and ngrok is available.
- PageSpeed Insights DevTools extension - Chrome extension for running PageSpeed tests from inside the browser.
- PageSpeed Insights Checker for mobile extension - checks Mobile PageSpeed score for every page and gives you a handy preview.