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
- gulp-inline-source - by Filip Malinowski, replaces
- 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.
- 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.
Contribute to this list: https://github.com/addyosmani/critical-path-css-tools