November Perfect Moustache

    critters
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.16 • Public • Published

    critters

    Critters

    Critters is a plugin that inlines your app's critical CSS and lazy-loads the rest.

    critters 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 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:

    npm i -D critters

    or

    yarn add -D critters

    Simple Example

    import Critters from 'critters';
    
    const critters = new Critters({
      // optional configuration (see below)
    });
    
    const html = `
      <style>
        .red { color: red }
        .blue { color: blue }
      </style>
      <div class="blue">I'm Blue</div>
    `;
    
    const inlined = await critters.process(html);
    
    console.log(inlined);
    // "<style>.blue{color:blue}</style><div class=\"blue\">I'm Blue</div>"

    Usage with webpack

    Critters is also available as a Webpack plugin called critters-webpack-plugin. npm

    The Webpack plugin supports the same configuration options as the main critters package:

    // 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 Base path location of the CSS files (default: '')
    • publicPath String Public path of the CSS resources. This prefix is removed from the href (default: '')
    • external Boolean Inline styles from external stylesheets (default: true)
    • inlineThreshold Number Inline external stylesheets smaller than a given size (default: 0)
    • minimumExternalSize Number If the non-critical external stylesheet would be below this size, just inline it (default: 0)
    • pruneSource Boolean Remove inlined rules from the external stylesheet (default: false)
    • mergeStylesheets Boolean Merged inlined stylesheets into a single <style> tag (default: true)
    • additionalStylesheets Array<String> Glob for matching other stylesheets to be used while looking for critical CSS.
    • preload String Which preload strategy to use
    • noscriptFallback Boolean Add <noscript> fallback to JS-based strategies
    • inlineFonts Boolean Inline critical font-face rules (default: false)
    • preloadFonts Boolean Preloads critical fonts (default: true)
    • fonts Boolean Shorthand for setting inlineFonts + preloadFonts* Values:
      • true to inline critical font-face rules and preload the fonts
      • false to don't inline any font-face rules and don't preload fonts
    • keyframes String Controls which keyframes rules are inlined.* Values:
      • "critical": (default) inline keyframes rules used by the critical CSS
      • "all" inline all keyframes rules
      • "none" remove all keyframes rules
    • compress Boolean Compress resulting critical CSS (default: true)
    • logLevel String Controls log level of the plugin (default: "info")
    • logger object Provide a custom logger interface logger

    Logger

    Custom logger interface:

    Type: object

    Properties

    • trace function (String) Prints a trace message
    • debug function (String) Prints a debug message
    • info function (String) Prints an information message
    • warn function (String) Prints a warning message
    • error function (String) Prints an error message

    LogLevel

    Controls log level of the plugin. Specifies the level the logger should use. A logger will not produce output for any log level beneath the specified level. Available levels and order are:

    • "info" (default)
    • "warn"
    • "error"
    • "trace"
    • "debug"
    • "silent"

    Type: ("info" | "warn" | "error" | "trace" | "debug" | "silent")

    PreloadStrategy

    The mechanism to use for lazy-loading stylesheets.

    Note: JS indicates a strategy requiring JavaScript (falls back to <noscript> unless disabled).

    • default: Move stylesheet links to the end of the document and insert preload meta tags in their place.
    • "body": Move all external stylesheet links to the end of the document.
    • "media": Load stylesheets asynchronously by adding media="not x" and removing once loaded. JS
    • "swap": Convert stylesheet links to preloads that swap to rel="stylesheet" once loaded (details). JS
    • "swap-high": Use <link rel="alternate stylesheet preload"> and swap to rel="stylesheet" once loaded (details). JS
    • "js": Inject an asynchronous CSS loader similar to LoadCSS and use it to load stylesheets. JS
    • "js-lazy": Like "js", but the stylesheet is disabled until fully loaded.
    • false: Disables adding preload tags.

    Type: (default | "body" | "media" | "swap" | "swap-high" | "js" | "js-lazy")

    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.

    Install

    npm i critters

    DownloadsWeekly Downloads

    1,725,910

    Version

    0.0.16

    License

    Apache-2.0

    Unpacked Size

    118 kB

    Total Files

    12

    Last publish

    Collaborators

    • developit
    • janicklas-ralph