@scullyio/scully-plugin-critical-css

scully-plugin-critical-css

BETA notice: this plugin is still in beta

• Description: With this Scully render plugin, we will inline the critical above the fold CSS into the HTML, and then "lazy-load" the CSS that is needed for the rest of the page. It will be ready before your SPA will boot. This will remove CSS from being blocking.
• Type: Render Plugin

This plugins uses the critical tool that is maintained by google, and is listed as the official endorsed option on web.dev

Getting Started

1. Install the plugin:

npm install -D @scullyio/scully-plugin-critical-css

2. Use the plugin:

Then add it to your scully.<projectname>.config.ts like this:

import { criticalCSS } from '@scullyio/scully-plugin-critical-css';

/** the seoHrefOptimise is optional **/
const defaultPostRenderers = ['seoHrefOptimise', criticalCSS];

export const config: ScullyConfig = {
  /** more config here */
  defaultPostRenderers,
  /** more config here */
  routes: {
    /** more config here */
  },
};

The above config will use the plugin on all routes. If you want to use in on a single route, add it to the config of that particular route like this:

export const config: ScullyConfig = {
  /** more config here */
  routes: {
    someRoute: {
      type: 'contentFolder', // Or any other type
      postRenderers: = [criticalCSS],
    },
     /** more route configs here */
  }
}

Settings

You can configure this plugin by using the setPluginConfig helper like this:

setPluginConfig(criticalCSS, {
  inlineImages: false,
});

The plugin had the following settings:

export interface CriticalCSSSettings {
  /** inline images into the pages when smaller then 10240 bytes */
  inlineImages?: boolean;
  /** Width of the target viewport */
  width?: number;
  /** Height of the target viewport */
  height?: number;
  /** An array of objects containing height and width. Takes precedence over width and height if set */
  dimensions?: {
    width: number;
    height: number;
  }[];
  /** An array with fully qualified paths to assets, if none is given, the root, and the root/assets will be used to look for static assets*/
  assets?: string[];
  /** Ignore some css rules */
  ignore?: {
    atrule?: string[];
    rule?: string[];
    decl?: (node, value) => boolean;
  };
}

For details see the critical tool page