PurgeCSSでCSSを軽量化する
Bootstrapのsassを読み込んで出力したcssファイルが240KBくらいあるので、不要なスタイルを削除するPugeCSSを試したときの覚書。
開発サーバー環境： CentOS Stream 8, PurgeCSS 4.1.3, Bootstrap 5.1.3, WordPress 6.0.1
開発クライアント環境： Windows10, PhpStorm 2022.1.3
開発はWindowsから仮想マシン上の共有ファイルをPhpStormで編集している。
そしてPhpStormのFile Watchersの機能でBootstrapの各sassを読み込んで一つのCSSファイルを出力している。
PurgeCSSのインストール
公式サイトを参考に。
まずはコマンドラインで試してみる。
npmでインストール。
# npm install -g purgecss
WordPressのテーマに移動してビルドしてみる。
# cd /home/httpd/project/wordpress/wp-content/themes/sidebar/
# purgecss --css assets/css/main.css --content ./**/*.php --output assets/css/main.min.css
cssファイルは17KBまで小さくなった。
main.min.cssを読み込むようにして、ブラウザで確認してみる。
設定ファイルを作る
プラグインなどPurseCSSに解析してほしいファイルを設定ファイルで定義する。
PHPで動的に生成するスタイル名はsafelistに記述する。
プロジェクトのトップで作業。
# cd /home/httpd/project/
# vi purgecss.config.js
module.exports = {content: ['./wordpress/wp-content/themes/sidebar/*.php','./wordpress/wp-content/themes/sidebar/**/*.php','./wordpress/wp-content/plugins/hoge/templates/*.php','./wordpress/wp-content/plugins/hoge/templates/**/*.php'],css: ['./wordpress/wp-content/themes/sidebar/assets/css/main.css'],output: './wordpress/wp-content/themes/sidebar/assets/css/main.min.css',safelist: [/^page/,/^slug/]}
実行する。
# purgecss --config ./purgecss.config.js
cssファイルは70KBになった。
modal-backtop, offcanvas-backtopなどJavaScriptで生成されるスタイル名はsafelistなどで定義する必要がありそう。
（bootstrap.jsをcontentに含めればよさそうだが試してない）
PurgeCSSを実案件で取り入れるかどうか。
メリット
- CSSファイルが約1/3に軽量化（サイトパフォーマンスアップ）
デメリット
- 各プロジェクトでpurgecss.config.jsをメンテナンスする手間
- PHPで動的に生成したスタイル名とPurgeCSSとの関係性を覚えてないといけない
- main.cssを監視してビルドする仕組みの追加
サイトパフォーマンスの測定サイトはこちら(lighthouse)
軽量化する前の計測結果：Performanceが80点。
Reduce unused CSSが0.3s。
結論としては実案件でPurgeCSSは使わない。
画像の最適化を行った上でさらにパフォーマンスを発揮したい場合にまた考える。