Critters
> 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
```
## Simple Example
```js
import Critters from 'critters';
const critters = new Critters({
// optional configuration (see below)
});
const html = `
I'm Blue
`;
const inlined = await critters.process(html);
console.log(inlined);
// "I'm Blue
"
```
## Usage with webpack
Critters is also available as a Webpack plugin called [critters-webpack-plugin](https://www.npmjs.org/package/critters-webpack-plugin). [](https://www.npmjs.org/package/critters-webpack-plugin)
The Webpack plugin supports the same configuration options as the main `critters` package:
```diff
// webpack.config.js
+const Critters = require('critters-webpack-plugin');
module.exports = {
plugins: [
+ new Critters({
+ // optional configuration
+ preload: 'swap',
+ includeSelectors: [/^\.btn/, '.banner'],
+ })
]
}
```
That's it! The resultant html will have its critical CSS inlined and the stylesheets lazy-loaded.
## Usage
### Critters
All optional. Pass them to `new Critters({ ... })`.
#### Parameters
- `options`
#### Properties
- `path` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Base path location of the CSS files _(default: `''`)_
- `publicPath` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Public path of the CSS resources. This prefix is removed from the href _(default: `''`)_
- `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: `false`)_
- `mergeStylesheets` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Merged inlined stylesheets into a single `