Critical-Path Tools

by ndreckshage

by Paul Kinlan. Patrick Hamann has an exercise using the snippet you can try out.

by Scott Jehl

CasperJS script to pull critical CSS information from pages

by Filip Malinowski, replaces `` tags with inline `` tags, and replaces `` tags with their inline content

by Ben Zörb, inline critical path CSS and load existing stylesheets with `loadCSS`

by Max Ogden, replaces `` tags with inline `` tags + inlines CSS url() calls with data URIs

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.

by Addy Osmani generates & inlines critical-path CSS (uses Penthouse, Oust and inline-styles)

by FilamentGroup finds & outputs critical CSS

by Jonas Ohlsson generates critical-path CSS

PhantomJS script to inline above-the-fold CSS on a page.

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.

checks Mobile PageSpeed score for every page and gives you a handy preview.

Chrome extension for running PageSpeed tests from inside the browser.

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.

Apache module for automatic PageSpeed optimization

Nginx module for automatic PageSpeed optimization

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.