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 (see below)
+ })
]
}
```
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 `