🌜
🌞
critters-webpack-plugin

critters-webpack-plugin

v3.0.2

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

npm install critters-webpack-plugin

README

critters-webpack-plugin

Critters Webpack plugin

critters-webpack-plugin 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

CrittersWebpackPlugin

Extends Critters

Create a Critters plugin instance with the given options.

Parameters

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
    })
  ]
}

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:

License

Apache 2.0

This is not an official Google product.

Release Notes

2.5.0
By Jason Miller • Published on January 3, 2020
  • Adds a new additionalStylesheets option, which allows inlining the critical styles from any emitted Webpack CSS asset matching the given pattern(s). Thanks @prateekbh for implementing this in #45!
plugins: [
  new CrittersPlugin({
    // inline styles from all CSS files, even if not referenced from our HTML:
    includeMatchingStylesheets: ['*.css']
  })
]
2.4.0
By Jason Miller • Published on July 23, 2019
  • Preserve :root{} rulesets (#37, thanks @ashsearle!)
2.3.0
By Jason Miller • Published on February 21, 2019
  • Fixes incorrect file locations when using a custom output.publicPath (#31)
  • Fixes a crash when there are no stylesheets to merge and mergeStylesheets is enabled (#30, thanks @ezekielchentnik!)
2.2.0
By Jason Miller • Published on January 18, 2019
  • New logLevel option! "silent" disables size & selector errors. Other values described here. (#25, thanks @gribnoysup!)
  • Fix an exception when running under Webpack 3 and prior.
2.1.3
By Jason Miller • Published on January 4, 2019
  • Fix exception thrown when no <style> tags are present
  • Fix bug that caused non-matched selectors for critical rules to be inlined
2.1.2
By Jason Miller • Published on December 27, 2018
  • Fixes a bug in 2.1.1 where reduced external stylesheets could be missing selectors.
2.1.1
By Jason Miller • Published on December 11, 2018
  • Critical styles are now injected prior to <link rel="stylesheet"> to ensure correct style rule ordering (#17)
2.1.0
By Jason Miller • Published on December 11, 2018

Updates

  • Always preload fonts using crossorigin="anonymous" (#18, thanks @Ansimorph!)

Bug Fixes

  • Fix bug when pseudo classes follow a child combinator (> :after) (#20, thanks @yun77op!)
  • Fix some critical keyframes being marked as non-critical
1.3.5
By Jason Miller • Published on January 16, 2020

This is a patch release for Critters 1.x, which includes a backported fix for a bug where Keyframe rules would be erroneously treated as non-critical CSS. Special thanks to @filoozom and @pathacks for pointing out this should be backported and doing the work.

Please note this fix has already been shipped in Critters 2.x.

For those looking to install 1.x directly: npm i [email protected]

General

License
Apache-2.0
Typescript Types
Tree-shakeable
Yes

Popularity

GitHub Stargazers
3,128
Community Interest
2,953
Number of Forks
94

Maintenance

Commits
10/219/22020
Last Commit
Open Issues
26
Closed Issues
42
Open Pull Requests
6
Closed Pull Requests
8

Versions

Versions Released
10/219/2201
Latest Version Released
Jan 5, 2022
Current Tags
latest3.0.2
legacy1.3.5

Contributors

developit
developit
Commits: 76
prateekbh
prateekbh
Commits: 7
tomrav
tomrav
Commits: 5
alan-agius4
alan-agius4
Commits: 3
janicklas-ralph
janicklas-ralph
Commits: 2
yun77op
yun77op
Commits: 1
ezekielchentnik
ezekielchentnik
Commits: 1
ashsearle
ashsearle
Commits: 1
0xflotus
0xflotus
Commits: 1
gribnoysup
gribnoysup
Commits: 1
stereobooster
stereobooster
Commits: 1
kenchandev
kenchandev
Commits: 1