critters

What is critters?

The critters npm package is a tool for Webpack that helps to inline critical CSS and lazy-load the rest. It is designed to improve the performance of web pages by reducing the amount of CSS that needs to be loaded before the page can be rendered. It works by extracting and inlining the critical CSS needed for the initial view and deferring the rest.

What are critters's main functionalities?

Inlining Critical CSS

This feature allows you to inline the critical CSS directly into the HTML to speed up the initial paint of the web page. The code sample shows how to include Critters as a plugin in a Webpack configuration.

const Critters = require('critters-webpack-plugin');

module.exports = {
  plugins: [
    new Critters({
      // Options go here
    })
  ]
};

Lazy-loading Non-critical CSS

Critters can also lazy-load non-critical CSS, which means it will only load the additional CSS when it's needed. The 'preload' option can be set to 'swap' to load fonts using font-display: swap, and 'noscriptFallback' can be enabled to provide a fallback for when JavaScript is not available.

const Critters = require('critters-webpack-plugin');

module.exports = {
  plugins: [
    new Critters({
      preload: 'swap',
      noscriptFallback: true
    })
  ]
};

Pruning Unused CSS

Critters can help remove unused CSS rules, reducing the size of the CSS that needs to be loaded. The 'pruneSource' option enables this functionality.

const Critters = require('critters-webpack-plugin');

module.exports = {
  plugins: [
    new Critters({
      pruneSource: true
    })
  ]
};

Other packages similar to critters

purifycss-webpack

PurifyCSS Webpack is a plugin that removes unused selectors from your CSS, similar to the pruning feature of Critters. It differs in that it focuses solely on purifying CSS and does not handle inlining or lazy-loading.

penthouse

Penthouse is a tool that generates critical path CSS for web pages. It is similar to Critters in that it helps identify and inline critical CSS, but it is not a Webpack plugin and requires separate integration into build processes.

loadcss

loadCSS is a function for loading CSS asynchronously, which can be used to lazy-load non-critical CSS. Unlike Critters, it does not provide inlining or pruning features and must be manually integrated into the HTML and JavaScript.

README

The README file is missing