Critters

A Webpack plugin to inline your critical CSS and lazy-load the rest.

Performance
GoogleChromeLabs/critterscritters-webpack-plugin

README

critters

Critters


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


critters npm


It's a little different from other options , because itdoesn't use a headless browserto 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:

  1. ``` shell
  2. npm i -D critters
  3. ```

or

  1. ``` shell
  2. yarn add -D critters
  3. ```

Simple Example


  1. ``` js
  2. import Critters from 'critters';

  4. const critters = new Critters({
  5.   // optional configuration (see below)
  6. });

  8. const html = `
  9.   <style>
  10.     .red { color: red }
  11.     .blue { color: blue }
  12.   </style>
  13.   <div class="blue">I'm Blue</div>
  14. `;

  16. const inlined = await critters.process(html);

  18. console.log(inlined);
  19. // "
    I'm Blue
    "
  20. ```

Usage with webpack


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

The Webpack plugin supports the same configuration options as the main critterspackage:

  1. ``` diff
  2. // webpack.config.js
  3. +const Critters = require('critters-webpack-plugin');

  5. module.exports = {
  6.   plugins: [
  7. +    new Critters({
  8. +      // optional configuration (see below)
  9. +    })
  10.   ]
  11. }
  12. ```

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


pathString Base path location of the CSS files (default:'')
publicPathString Public path of the CSS resources. This prefix is removed from the href (default:'')
externalBoolean Inline styles from external stylesheets (default:true)
inlineThresholdNumber Inline external stylesheets smaller than a given size (default:0)
minimumExternalSizeNumber If the non-critical external stylesheet would be below this size, just inline it (default:0)
pruneSourceBoolean Remove inlined rules from the external stylesheet (default:false)
* `mergeStylesheets`[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean) Merged inlined stylesheets into a single `