Critical Path Css Tools Overview

Tools to prioritize above-the-fold (critical-path) CSS

🏠 Home · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 addyosmani/critical-path-css-tools · ⭐ 1.1K · 🏷️ Front-End Development

[ Daily / Weekly / Overview ]

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 (⭐2.5k) - by Jonas Ohlsson generates critical-path CSS
• Critical (⭐9.6k) - by Addy Osmani generates & inlines critical-path CSS (uses Penthouse, Oust (⭐163) and inline-styles)
• CriticalCSS (⭐1.7k) - by FilamentGroup finds & outputs critical CSS

Server-side modules

• mod_pagespeed (⭐691) - Apache module for automatic PageSpeed optimization
• ngx_pagespeed (⭐4.4k) - Nginx module for automatic PageSpeed optimization

Grunt tasks

• grunt-penthouse (⭐68)
• grunt-critical-css (⭐533)
• grunt-critical (⭐149)

CasperJS

• critical-css-casperjs (⭐68) - CasperJS script to pull critical CSS information from pages

PhantomJS

• dr-css-inliner (⭐81) - PhantomJS script to inline above-the-fold CSS on a page.

Inline sources (styles, scripts)

• inline-styles (⭐24) - by Max Ogden, replaces <link> tags with inline <style> tags + inlines CSS url() calls with data URIs
• gulp-inline-source (⭐211) - by Filip Malinowski, replaces <link> tags with inline <style> tags, and replaces <script src=""> tags with their inline content
• inline-critical (⭐106) - by Ben Zörb, inline critical path CSS and load existing stylesheets with loadCSS
• isomorphic-style-loader (⭐1.2k) 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 (⭐22k) 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 (⭐6.8k) - 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 (⭐0) - async script/stylesheet loader
• basket.js - async script/resource loader with support for localStorage caching. Can be extended (⭐19) 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 (⭐45) 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 (⭐3.1k) - Node module for PageSpeed Insights reporting as part of your build process. Use directly with Gulp or use grunt-pagespeed (⭐464) 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 (⭐9.3k) 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 (⭐3.9k), Gulp (⭐960) and other build tools.