Track Critical Path Css Tools Updates Weekly
Tools to prioritize above-the-fold (critical-path) CSS
🏠 Home · 🔍 Search · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 addyosmani/critical-path-css-tools · ⭐ 1.1K · 🏷️ Front-End Development
Jan 18 - Jan 24, 2016
Node modules
- Critical (⭐9.6k) - by Addy Osmani generates & inlines critical-path CSS (uses Penthouse, Oust (⭐163) and inline-styles)
Server-side modules
- mod_pagespeed (⭐691) - Apache module for automatic PageSpeed optimization
Online tools
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 (⭐3.1k) - Node module for PageSpeed Insights reporting as part of your build process. Use directly with Gulp or use grunt-pagespeed (⭐464) if a Grunt user. For local testing, a write-up using this task and ngrok is available.
Supplementary tools
- UnCSS (⭐9.3k) 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 (⭐3.9k), Gulp (⭐960) and other build tools.
Jan 04 - Jan 10, 2016
Inline sources (styles, scripts)
- isomorphic-style-loader (⭐1.2k) 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 (⭐22k) as an example.
Dec 07 - Dec 13, 2015
Grunt tasks
Inline sources (styles, scripts)
- inline-critical (⭐106) - by Ben Zörb, inline critical path CSS and load existing stylesheets with
loadCSS
Aug 04 - Aug 10, 2014
PhantomJS
- dr-css-inliner (⭐81) - PhantomJS script to inline above-the-fold CSS on a page.
Jul 21 - Jul 27, 2014
Node modules
- Penthouse (⭐2.5k) - by Jonas Ohlsson generates critical-path CSS
- CriticalCSS (⭐1.7k) - by FilamentGroup finds & outputs critical CSS
Server-side modules
- ngx_pagespeed (⭐4.4k) - Nginx module for automatic PageSpeed optimization
Grunt tasks
CasperJS
- critical-css-casperjs (⭐68) - CasperJS script to pull critical CSS information from pages
Inline sources (styles, scripts)
- inline-styles (⭐24) - by Max Ogden, replaces
<link>tags with inline<style>tags + inlines CSS url() calls with data URIs
- gulp-inline-source (⭐211) - by Filip Malinowski, replaces
<link>tags with inline<style>tags, and replaces<script src="">tags with their inline content
Async load CSS
- loadCSS (⭐6.8k) - 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) - async script/stylesheet loader
- basket.js - async script/resource loader with support for localStorage caching. Can be extended (⭐19) to load stylesheets.
Bookmarklets/Extensions
- Snippet by Scott Jehl
- CSSVacuum (⭐45) by ndreckshage
Render-blocking issues detection
- 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.