Critical-path (Above-the-fold) CSS Tools

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

1.2k stars48 forks27 entriesLast push Jul 18, 2022 (4 years ago)License none

This page lists names, links and short descriptions. The original list on GitHub is the source and belongs to its authors.

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)

In 3 lists

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

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.

In 2 lists

Async load 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

basket.js

async script/resource loader with support for localStorage caching. Can be extended to load stylesheets.

Online tools

Bookmarklets/Extensions

Snippet

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

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.

In 7 listsDetails

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.

In 2 lists

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.