Socket
Socket
Sign inDemoInstall

critters-webpack-plugin

Package Overview
Dependencies
208
Maintainers
1
Versions
24
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

critters-webpack-plugin

Webpack plugin to inline critical CSS and lazy-load the rest.


Version published
Maintainers
1
Weekly downloads
7,149
decreased by-19.69%

Weekly downloads

Readme

Source

critters-webpack-plugin

Critters Webpack plugin

critters-webpack-plugin inlines your app's critical CSS and lazy-loads the rest.

critters-webpack-plugin npm

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. For alternatives, see 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, combining to dramatically improve first paint time for most Single Page Applications.

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

Installation

First, install Critters as a development dependency:

npm i -D critters-webpack-plugin

Then, import Critters into your Webpack configuration and add it to your list of plugins:

// webpack.config.js
+const Critters = require('critters-webpack-plugin');

module.exports = {
  plugins: [
+    new Critters({
+      // optional configuration (see below)
+    })
  ]
}

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.

Usage

CrittersWebpackPlugin

Extends Critters

Create a Critters plugin instance with the given options.

Parameters
Examples
// webpack.config.js
module.exports = {
  plugins: [
    new Critters({
      // Outputs: <link rel="preload" onload="this.rel='stylesheet'">
      preload: 'swap',

      // Don't inline critical font-face rules, but preload the font URLs:
      preloadFonts: true
    })
  ]
}

Similar Libraries

There are a number of other libraries that can inline Critical CSS, each with a slightly different approach. Here are a few great options:

License

Apache 2.0

This is not an official Google product.

Keywords

FAQs

Last updated on 05 Jan 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc