critters

What is critters?

The critters npm package is a tool for Webpack that helps to inline critical CSS and lazy-load the rest. It is designed to improve the performance of web pages by reducing the amount of CSS that needs to be loaded before the page can be rendered. It works by extracting and inlining the critical CSS needed for the initial view and deferring the rest.

What are critters's main functionalities?

Inlining Critical CSS

This feature allows you to inline the critical CSS directly into the HTML to speed up the initial paint of the web page. The code sample shows how to include Critters as a plugin in a Webpack configuration.

const Critters = require('critters-webpack-plugin');

module.exports = {
  plugins: [
    new Critters({
      // Options go here
    })
  ]
};

Lazy-loading Non-critical CSS

Critters can also lazy-load non-critical CSS, which means it will only load the additional CSS when it's needed. The 'preload' option can be set to 'swap' to load fonts using font-display: swap, and 'noscriptFallback' can be enabled to provide a fallback for when JavaScript is not available.

const Critters = require('critters-webpack-plugin');

module.exports = {
  plugins: [
    new Critters({
      preload: 'swap',
      noscriptFallback: true
    })
  ]
};

Pruning Unused CSS

Critters can help remove unused CSS rules, reducing the size of the CSS that needs to be loaded. The 'pruneSource' option enables this functionality.

const Critters = require('critters-webpack-plugin');

module.exports = {
  plugins: [
    new Critters({
      pruneSource: true
    })
  ]
};

Other packages similar to critters

purifycss-webpack

PurifyCSS Webpack is a plugin that removes unused selectors from your CSS, similar to the pruning feature of Critters. It differs in that it focuses solely on purifying CSS and does not handle inlining or lazy-loading.

penthouse

Penthouse is a tool that generates critical path CSS for web pages. It is similar to Critters in that it helps identify and inline critical CSS, but it is not a Webpack plugin and requires separate integration into build processes.

loadcss

loadCSS is a function for loading CSS asynchronously, which can be used to lazy-load non-critical CSS. Unlike Critters, it does not provide inlining or pruning features and must be manually integrated into the HTML and JavaScript.

README

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

Usage

+    const Critters = require('critters');

+    const c = new Critters({
+      // optional configuration (see below)
+    })
+    const res = c.process(html)

Usage with webpack

// 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

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 <style> tag (default: true)
• additionalStylesheets String[] Glob for matching other stylesheets which should be used to evaluate critical CSS (default: '')
• preload String Which preload strategy to use
• noscriptFallback Boolean Add <noscript> fallback to JS-based strategies
• inlineFonts Boolean Inline critical font-face rules (default: false)
• preloadFonts Boolean Preloads critical fonts (default: true)
• fonts Boolean Shorthand for setting inlineFonts+preloadFonts- Values:
  • true to inline critical font-face rules and preload the fonts
  • false to don't inline any font-face rules and don't preload fonts
• keyframes String Controls which keyframes rules are inlined.- Values:
  • "critical": (default) inline keyframes rules used by the critical CSS
  • "all" inline all keyframes rules
  • "none" remove all keyframes rules
• compress Boolean Compress resulting critical CSS (default: true)
• logLevel String Controls log level of the plugin (default: "info")

LogLevel

Controls log level of the plugin. Specifies the level the logger should use. A logger will not produce output for any log level beneath the specified level. Available levels and order are:

• "info" (default)
• "warn"
• "error"
• "trace"
• "debug"
• "silent"

Type: ("info" | "warn" | "error" | "trace" | "debug" | "silent")

PreloadStrategy

The mechanism to use for lazy-loading stylesheets. [JS] indicates that a strategy requires JavaScript (falls back to <noscript>).

• default: Move stylesheet links to the end of the document and insert preload meta tags in their place.
• "body": Move all external stylesheet links to the end of the document.
• "media": Load stylesheets asynchronously by adding media="not x" and removing once loaded. [JS]
• "swap": Convert stylesheet links to preloads that swap to rel="stylesheet" once loaded. [JS]
• "js": Inject an asynchronous CSS loader similar to LoadCSS and use it to load stylesheets. [JS]
• "js-lazy": Like "js", but the stylesheet is disabled until fully loaded.

Type: (default | "body" | "media" | "swap" | "js" | "js-lazy")

Similar Libraries

There are a number of other libraries that can inline Critical CSS, each with a slightly different approach. Here are a few great options:

• Critical
• Penthouse
• webpack-critical
• webpack-plugin-critical
• html-critical-webpack-plugin
• react-snap

License

Apache 2.0

This is not an official Google product.