1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2021-09-07

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

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?