critters

Critters

> Critters is a plugin that inlines your app's [critical CSS] and lazy-loads the rest. ## critters [![npm](https://img.shields.io/npm/v/critters.svg)](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). [![npm](https://img.shields.io/npm/v/critters-webpack-plugin.svg)](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 `