> Critters is a plugin that inlines your app's [critical CSS] and lazy-loads the rest.
## critters [](https://www.npmjs.org/package/critters)
It's a little different from [other options](#similar-libraries), 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](#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](https://github.com/GoogleChromeLabs/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:
```sh
npm i -D critters
```
or
```sh
yarn add -D critters
```
## Usage
```diff
+ const Critters = require('critters');
+ const c = new Critters({
+ // optional configuration (see below)
+ })
+ const res = c.process(html)
```
## Usage with webpack
```diff
// 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**
```javascript
// webpack.config.js
module.exports = {
plugins: [
new Critters({
// Outputs:
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](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Inline styles from external stylesheets _(default: `true`)_
- `inlineThreshold` **[Number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** Inline external stylesheets smaller than a given size _(default: `0`)_
- `minimumExternalSize` **[Number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** If the non-critical external stylesheet would be below this size, just inline it _(default: `0`)_
- `pruneSource` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Remove inlined rules from the external stylesheet _(default: `true`)_
- `mergeStylesheets` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Merged inlined stylesheets into a
single \ tag _(default: `true`)_
- `additionalStylesheets` **[String[]](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Glob for matching other stylesheets which should be used to evaluate critical CSS _(default: '')_
- `preload` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Which [preload strategy](#preloadstrategy) to use
- `noscriptFallback` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Add `
