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
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
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ファイルのキャッシュ機能が使えなくなるので複数ページの案件での使用には注意が必要です。
あまり体感できない程度の変化ですが、これ一つでパフォーマンスの数値が変わってくるので是非導入してみてください。