続 CSSライブラリの脱CDN（ローカル化）
De-CDN Strategy for CSS Libraries
↓↓この記事の続きです。↓↓
PurgeCSSによるファイルサイズ最適化
以前の記事でローカル管理に移行する方法についてまとめました。今回はPurgeCSSなどを使用してファイルサイズの最適化を行う方法について紹介していきたいと思います。
TailwindやFont AwesomeなどのCSSフレームワークは多くのクラスを含んでいますが、実際に使用されるクラスは全体のほんの一部です。PurgeCSSを使用することで、使用されていないCSSルールを削除し、ファイルサイズを大幅に削減できます。
まず、PurgeCSSをインストールします。
npm install -g purgecss
基本的な使用方法として、以下のように実行することができます。
# Tailwind CSSの最適化
purgecss --css css/tailwind.min.css --content "**/*.php" "**/*.html" "**/*.js" --output css/
# Font Awesomeの最適化
purgecss --css css/fontawesome/all.min.css --content "**/*.php" "**/*.html" "**/*.js" --safelist "fa fab fas" --output css/fontawesome/
OpenSUSEで実際に使用する場合、以下のようにします。
purgecss --css /srv/www/site/css/tailwind.min.css --content "/srv/www/site/**/*.php" --content "/srv/www/site/**/*.html" --content "/srv/www/site/**/*.js" --safelist "prose max-w-none leading-relaxed hover:underline" --output /srv/www/site/css/
purgecss --css /srv/www/site/css/fontawesome/all.min.css --content "/srv/www/site/**/*.php" --content "/srv/www/site/**/*.html" --safelist "fa fab fas fa-rss fa-envelope fa-github fa-chevron-down fa-chevron-up" --output /srv/www/site/css/fontawesome/
# システムフォントでまず表示させて、後でwebフォントに切り替える場合
sed -i 's/font-display:block/font-display:swap/g' /srv/www/site/css/fontawesome/all.min.css
※最後のsedコマンドはフォントの読込みで文字が見えない問題を解決するためのものです。必要な人だけ実行するようにしてください
PurgeCSSを実行する前後でファイルサイズを比較すると、劇的にファイルサイズが激減しているのがわかると思います。
Tailwind CSS 元サイズ 2,934,019 bytes (2.9MB) → 20,908 bytes (20KB)
Font Awesome 元サイズ 873,256 bytes (873KB) → 45,632 bytes (45KB)
※Font Awesomeは全アイコンを含んだCSSファイルのため、ファイルサイズが大きくなりがちです。PurgeCSSで未使用のスタイルを削除することで大幅な軽量化が可能ですが、さらなる読み込み速度向上を目指すなら、必要なアイコンのみを個別にダウンロードして使用することをおすすめします。
これを行うだけで、ページの読み込み速度を大幅に向上させることができますし、サーバの負荷も抑えることができるようになりますので、もしよかったら皆さんもやってみてください。
おわり