Critical-Path Tools

repo: addyosmani/critical-path-css-tools
category: Front-End Development

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

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

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

• Penthouse online

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.

Supplementary tools

• UnCSS removes unused CSS from pages, allowing you to reduce the global CSS you may need to load in for your site. Tasks are available for Grunt, Gulp and other build tools.