CSS - Critical-Path Tools
Node modules
3_ENTRIES- Penthouse
by Jonas Ohlsson generates critical-path CSS
- CriticalCSS
by FilamentGroup finds & outputs critical CSS
Server-side modules
2_ENTRIES- mod_pagespeed
Apache module for automatic PageSpeed optimization
- ngx_pagespeed
Nginx module for automatic PageSpeed optimization
Grunt tasks
3_ENTRIESCasperJS
1_ENTRIES- critical-css-casperjs
CasperJS script to pull critical CSS information from pages
PhantomJS
1_ENTRIES- dr-css-inliner
PhantomJS script to inline above-the-fold CSS on a page.
Inline sources (styles, scripts)
4_ENTRIES- 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.
Async load CSS
4_ENTRIESAsync loading should be used to fetch the rest of your site-wide styles after you've inlined your critical-path CSS.
Note: The Guardian currently also cache their global styles into localStorage for subsequent page loads. More info in this comment.
- async & conditional loading
POC script for loading CSS files asynchronously and conditionally based on body tag classes
- asyncLoader
async script/stylesheet loader
Online tools
1_ENTRIESBookmarklets/Extensions
3_ENTRIESRender-blocking issues detection
4_ENTRIES- 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 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.