Ranked awesome lists, all in one place

This list is a copy of addyosmani/critical-path-css-tools with ranks

---

Critical-path (Above-the-fold) CSS Tools ★87749 ==========================================

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 ★1798 - by Jonas Ohlsson generates critical-path CSS
• Critical - by Addy Osmani generates & inlines critical-path CSS (uses Penthouse, Oust ★122 ⏳1Y and inline-styles)
• CriticalCSS ★1073 ⏳1Y - 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

• grunt-penthouse ★70
• grunt-critical-css ★539 ⏳1Y
• grunt-critical ★123

CasperJS

• critical-css-casperjs ★70 ⏳4Y - CasperJS script to pull critical CSS information from pages

PhantomJS

• dr-css-inliner ★78 ⏳3Y - PhantomJS script to inline above-the-fold CSS on a page.

Inline sources (styles, scripts)

• inline-styles ★23 ⏳4Y - by Max Ogden, replaces <link> tags with inline <style> tags + inlines CSS url() calls with data URIs
• gulp-inline-source ★188 - by Filip Malinowski, replaces <link> tags with inline <style> tags, and replaces <script src=""> tags with their inline content
• inline-critical ★72 - 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 ★17734 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 ★5340 - 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 ⏳3Y - async script/stylesheet loader
• basket.js - async script/resource loader with support for localStorage caching. Can be extended ★20 ⏳4Y 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 ★37 ⏳4Y 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 ★470 ⏳2Y 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 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 ★977 ⏳1Y and other build tools.

---

This list is a copy of addyosmani/critical-path-css-tools with ranks