意外と効くCSSとJavaScriptのminify

CSSとJavaScriptの最小化(minify)は、データの削減量としては地味ですがPageSpeed Insightsのスコア改善に意外と効果があります。これはPageSpeed Insightsのスコアがレンダリングブロックの時間に敏感だからです(もちろん保証はありません！)。

PageSpeed Insightsの点数はどのように計算されているか。100点をとるための条件
https://qiita.com/miyanaga/items/d38124cdd64a1999fed9

minifyはタスクランナーやフレームワークのアセットパイプラインで自動化するのが常套手段ですが、複数のメンバーで運用中のサイトに後から導入するのは一苦労です。

そこでVisual Studio Codeの機能拡張と、.htaccessファイルで稼働中のサイトに途中からCSSとJavaScriptのminifyを開始する方法を紹介します。

JS & CSS Minifier 拡張機能

Visual Studio Codeに次の拡張機能をインストールします。

JS & CSS Minifier
https://marketplace.visualstudio.com/items?itemName=olback.es6-css-minify

ワークスペースの設定にes6-css-minify.minifyOnSaveを追加します。

{
  "folders": [
    { "path": "." }
  ],
  "settings": {
    "es6-css-minify.minifyOnSave": "yes"
  }
}

これで任意の.cssファイルまたは.jsファイルを保存すると、その瞬間にminifyされた.min.cssと.min.jsが作成されるようになります。

• 例: sample.cssを保存 → minifyされたsample.min.cssがとなりに自動作成されます。

既存の.cssファイルや.jsファイルを一括でminifyする機能拡張を探したのですが、見当たりませんでした(もしあったら教えてください！)。

minifyされたファイルがあれば優先する.htaccessファイル

HTML側の参照を.min.cssや.min.jsファイルに変更するところですが、ここでは.htaccessでRewriteモジュールを設定して振り分けをしてみます。

DocumentRootの.htaccessファイルに次の記述を行います。

RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}/$1.min.$2 -f
RewriteRule ^([^.]+)\.(css|js)$ $1.min.$2 [L,NC]

これでブラウザからsample.cssやsample.jsが参照されたとき、もしsample.min.cssやsample.min.jsがあればApacheは実際にはそれらを返すようになります。

「HTML側を変えた方が早い！」という場合はもちろんそれでも。
個人的には.min.cssや.min.jsを消せば元に戻して検証しやすい点が気に入っています。

DocumentRoot以外に.htaccessを記述する場合

もし、.cssや.jsファイルが/assets/以下にしか存在しないのであれば、/assets/.htaccessファイルとして次の記述を行うと効率がよいです。

RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}/assets/$1.min.$2 -f
RewriteRule ^([^.]+)\.(css|js)$ /assets/$1.min.$2 [L,NC]

2箇所で/assets/を補う必要があるので注意してください。 RewriteCondでファイルの有無を確認する都合上、RewriteBaseがうまく使えません。

バンドリング(1ファイルへの結合)とPageSpeed Insightsのスコア

タスクランナーやアセットパイプラインでは、CSSやJavaScriptの最小化と同時に各々を1ファイルにまとめてくれます。

これはリクエスト数を減らして無駄なオーバーヘッドを削減する措置ですが、経験上、適度にファイルが分割されている方が並列ダウンロードによりPageSpeed Insightsのスコアが上がります。HTTP/2も一般的になってきてますし。

ここで紹介した方法では1ファイルへの結合は行われませんが、その意味で効果を期待できます。ぜひ試してみてください。