Criticalを複数ページで実行する #CSS

Critical CSSがパフォーマンスを上げるとのことで最近導入を開始しました。
普段Webpackを使っているのでhtml-critical-webpack-pluginを使用していましたが、複数ページの場合はページの数だけコードを記述するという方法が不便だなぁと思い、複数ページに対応したCriticalの導入方法を探したところ見つけられなかったのでメモします。
Gulpを使う方法とスクリプトを自作する方法の2通りがあります。

Gulpを使ったCriticalの導入方法

公式の設定通りに記述すればOKです。
一応ここでも明記します。

ディレクトリ構成

./
├ docs
|  ├ css
|  |  └ style.css
|  ├ index.html
|  ├ page1.html
|  └ page2.html
└ gulpfile.js

パッケージのインストール

$npm i -D gulp fancy-log critical

gulpfile.js

const { src, dest, series } = require('gulp');
const log = require('fancy-log');
const critical = require('critical').stream;

function criticalCss(done) {
  return src('./docs/*.html')
    .pipe(
      critical({
        base: './docs',
        inline: true,
        css: ['./docs/css/style.css'], //対象としたいCSSファイル
      })
    )
    .on('error', err => {
      log.error(err.message);
    })
    .pipe(dest('./docs'));
  done();
}

exports.default = series(criticalCss);

gulpを実行すると、docs内の全てのhtmlファイルにCritical CSSがインラインで追記されたものが上書きされます。
critical({})内の設定は公式ドキュメントを参考に変更してみてください。

スクリプトを使ったCriticalの導入方法

わざわざgulpをインストールしたくない、という人はスクリプトを自作します。
こちらも公式で設定の解説がありますが、ディレクトリ内の全てのhtmlファイルを対象にする設定がなかったのでアレンジしました。参考程度にしてください。

ディレクトリ構成

./
├ docs
|  ├ css
|  |  └ style.css
|  ├ index.html
|  ├ page1.html
|  └ page2.html
└ critical.js

パッケージのインストール

$npm i -D critical glob

critical.js

const critical = require('critical');
const path = require('path');
const glob = require('glob');

const target = glob.sync(path.resolve(__dirname, './docs/**/*.html'));

target.forEach(async (path, i) => {
  const arr = path.split('/');
  const file = arr[arr.length - 1];
  
  critical.generate({
    inline: true,
    base: './docs',
    src: './docs/' + file,
    target: {
      html: file,
    },
    extract: true, //元のCSSファイルからCritical CSSを削除したい場合（LP推奨）
    width: 1300,
    height: 900,
  },(err, output) => {
    if (err) {
      console.error(err);
    } else if (output) {
      console.log(`Generated critical CSS ${file}`);
    }
  });
});

最初にdocsディレクトリの全てのhtmlファイルのパスを取得し、forEachで一つ一つにCriticalを実行しています。
extract: trueにするとインライン化したコードを元のCSSファイルから削除した新しいCSSファイルを./docs/css/ディレクトリに生成し、そしてhtml内に自動で組み込んでくれます。
しかし、そうするとCSSファイルのキャッシュ機能が使えなくなるので複数ページの案件での使用には注意が必要です。

あまり体感できない程度の変化ですが、これ一つでパフォーマンスの数値が変わってくるので是非導入してみてください。