Critters

> Critters is a plugin that inlines your app's [critical CSS] and lazy-loads the rest.

critters

It's a little different from other options, because it doesn't use a headless browser to render content. This tradeoff allows Critters to be very fast and lightweight. It also means Critters inlines all CSS rules used by your document, rather than only those needed for above-the-fold content. For alternatives, see Similar Libraries.

Critters' design makes it a good fit when inlining critical CSS for prerendered/SSR'd Single Page Applications. It was developed to be an excellent compliment to prerender-loader, combining to dramatically improve first paint time for most Single Page Applications.

Features

• Fast - no browser, few dependencies
• Integrates with Webpack [critters-webpack-plugin]
• Supports preloading and/or inlining critical fonts
• Prunes unused CSS keyframes and media queries
• Removes inlined CSS rules from lazy-loaded stylesheets

Installation

First, install Critters as a development dependency:

npm i -D critters

or

yarn add -D critters

Simple Example

import Critters from 'critters';

const critters = new Critters({
  // optional configuration (see below)
});

const html = `
  <style>
    .red { color: red }
    .blue { color: blue }
  </style>
  <div class="blue">I'm Blue</div>
`;

const inlined = await critters.process(html);

console.log(inlined);
// "<style>.blue{color:blue}</style><div class="\&quot;blue\&quot;">I'm Blue</div>"

Usage with webpack

Critters is also available as a Webpack plugin called critters-webpack-plugin.

The Webpack plugin supports the same configuration options as the main critters package:

// webpack.config.js
+const Critters = require('critters-webpack-plugin');

module.exports = {
  plugins: [
+    new Critters({
+      // optional configuration (see below)
+    })
  ]
}

That's it! The resultant html will have its critical CSS inlined and the stylesheets lazy-loaded.

Usage

Critters

All optional. Pass them to new Critters({ ... }).

Parameters

• options

Properties

• path String Base path location of the CSS files (default: '')
• publicPath String Public path of the CSS resources. This prefix is removed from the href (default: '')
• external Boolean Inline styles from external stylesheets (default: true)
• inlineThreshold Number Inline external stylesheets smaller than a given size (default: 0)
• minimumExternalSize Number If the non-critical external stylesheet would be below this size, just inline it (default: 0)
• pruneSource Boolean Remove inlined rules from the external stylesheet (default: false)
• mergeStylesheets Boolean Merged inlined stylesheets into a single `