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. 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 the prerender-loader, combining to dramatically improve first paint time for most Single Page Applications. Import Critters into your Webpack configuration and add it to your list of plugins. 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. Create a Critters plugin instance with the given options.
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