Critters Webpack plugin
critters-webpack-plugin inlines your app's critical CSS and lazy-loads the rest.
critters-webpack-plugin
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
module.exports = {
plugins: [
new Critters({
preload: 'swap',
preloadFonts: true,
}),
],
};
Critters
All optional. Pass them to new Critters({ ... })
.
Parameters
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 Merges 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 usenoscriptFallback
Boolean Add <noscript>
fallback to JS-based strategiesinlineFonts
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 fontsfalse
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:
License
Apache 2.0
This is not an official Google product.