0
Help us understand the problem. What are the problem?

posted at

updated at

Organization

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

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ファイルのキャッシュ機能が使えなくなるので複数ページの案件での使用には注意が必要です。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What are the problem?