Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

critters-webpack-plugin

2.5.0 • Public • Published

critters-webpack-plugin

Critters

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

critters-webpack-plugin npm

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 html-webpack-plugin
  • Works with webpack-dev-server / webpack serve
  • 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-webpack-plugin

Then, import Critters into your Webpack configuration and add it to your list of plugins:

// webpack.config.js
+const Critters = require('critters-webpack-plugin');
 
module.exports = {
  plugins: [
+    new Critters({
+      // optional configuration (see below)
+    })
  ]
}

That's it! Now when you run Webpack, the CSS used by your HTML will be inlined and the imports for your full CSS will be converted to load asynchronously.

Usage

Critters

Create a Critters plugin instance with the given options.

Parameters

  • options Options Options to control how Critters inlines CSS.

Examples

// webpack.config.js
module.exports = {
  plugins: [
    new Critters({
      // Outputs: <link rel="preload" onload="this.rel='stylesheet'">
      preload: 'swap',
 
      // Don't inline critical font-face rules, but preload the font URLs:
      preloadFonts: true
    })
  ]
}

Critters

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

Parameters

  • options

Properties

  • 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: true)
  • mergeStylesheets Boolean Merged inlined stylesheets into a single

Install

npm i critters-webpack-plugin

DownloadsWeekly Downloads

15,944

Version

2.5.0

License

Apache-2.0

Unpacked Size

119 kB

Total Files

9

Last publish

Collaborators

  • avatar