User Experience on mobile might not be great yet, but I'm working on it.

Your first time on this page? Allow me to give some explanations.

Awesome Critical-Path Tools

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

Here you can see meta information about this topic like the time we last updated this page, the original creator of the awesome list and a link to the original GitHub repository.

Last Update: Dec. 2, 2020, 6:07 a.m.

Thank you addyosmani & contributors
View Topic on GitHub:
addyosmani/critical-path-css-tools

Search for resources by name or description.
Simply type in what you are looking for and the results will be filtered on the fly.

Further filter the resources on this page by type (repository/other resource), number of stars on GitHub and time of last commit in months.

Node modules

Generate critical css for your web pages

2.31K
134
62d
MIT

Extract & Inline Critical-path CSS in HTML pages

8.77K
350
17d
Apache-2.0

Finds the Above the Fold CSS for your page, and outputs it into a file

1.54K
69
1y 8m
MIT

Server-side modules

Apache module for rewriting web pages to reduce latency and bandwidth.

631
152
83d
Apache-2.0

Automatic PageSpeed optimization module for Nginx

4.25K
354
4m
Apache-2.0

Grunt tasks

A grunt plugin that uses Penthouse to extract critical path css

69
10
2y 8m
MIT

Grunt wrapper for criticalcss

540
28
1y 10m
MIT

Grunt task to extract & inline critical-path CSS from HTML

136
19
86d
n/a

CasperJS

A CasperJS script to pull critical CSS information from your page.

69
4
6y 8m
n/a

PhantomJS

DEPRECATED! PhantomJS script to inline above-the-fold CSS for a webpage.

80
11
15d
n/a

Inline sources (styles, scripts)

replaces link tags with inline style tags + inlines CSS url() calls with data URIs

23
0
6y 4m
n/a

Inline flagged js & css sources.

213
30
2y 12d
MIT

Inline critical path CSS and async load existing stylesheets

103
14
33d
n/a

CSS style loader for Webpack that is optimized for isomorphic (universal) web apps

1.18K
137
1y 6m
MIT

Async load CSS

Load CSS asynchronously

6.55K
573
6m
MIT
0
0
5y 11m
n/a

POC script for loading CSS files asynchronously and conditionally based on body tag classes

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

Online tools

Bookmarklets/Extensions

optimize your critical rendering path

43
3
7y 84d
MIT

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

Render-blocking issues detection

PageSpeed Insights Reporting for Node

3.02K
137
85d
Apache-2.0

Chrome extension for running PageSpeed tests from inside the browser.

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

Supplementary tools

Remove unused styles from CSS

8.97K
415
56d
MIT