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.
- 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
- critical-css-casperjs – CasperJS script to pull critical CSS information from pages
- 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
- 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.
- 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.