Awesome Lists with GitHub stars
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.
