今回はパフォーマンスを向上させるためにファイルサイズを削減することができるテクニックを紹介します。今回はCSSやJavaScriptのファイルを小さくすることで通信量を削減します。これをMinify処理といいます。
Minifyとは？
Minifyという単語を日本語にするのは難しいですが、小さくする、もしくは圧縮や縮小化とでもいうというべきでしょうか。今更ですが、CSSとはWebサイトにスタイル（太字にするなど）をあてるファイル、JavaScriptとはWebに動きを与えるプログラムのことです。Minifyはこれらのファイルを削減するための技術です。これは何を行っているかというと、CSSやJavaScriptは人間にとって読みやすい形式でスペースや改行を含む記述がされています。しかしプログラムにとっては、スペースなどはただの邪魔なデータ（バイト列）に過ぎません。そこでプログラムにとって意味のある文字列だけに変換してしまおうという話です。
コードでもサンプルをあげましょう。これは適当なCSSファイルです。
body, html {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}これをMinifyすると以下のようなファイルになります。非常に読みにくい形式ですが、プログラムにとってはこれで十分なのです。
body,html{width:100%;height:100%;margin:0;overflow:hidden}さらにMinifyしたCSSやJavaScriptファイルはキャッシュできるので、CDNをはじめとするキャッシュ機構との相乗効果が高いです。デメリットは少ないのでやっておきましょう。
サイトが対応しているかの確認方法
Minifyは実施していなければ、Lighthouseでも修正するように表示されますが、個人的にはチェッカーを使うとMinifyの設定が完了したかどうか分かりやすいです。CSSとJavaScriptの両方でどうぞ。お使いのサイトのURLを入力するだけで診断できます。
CSS Minification Test | SEO Site Checkup
https://seositecheckup.com/tools/css-minification-test
JavaScript Minification Test | SEO Site Checkup
https://seositecheckup.com/tools/javascript-minification-test
Minify 設定を有効にする
WordPressでは本サイトの推奨するプラグインであるW3 Total Cacheを導入すれば一発です。 設定はパフォーマンス > 圧縮 > CSS minify Setting と JS minify Setting でチェックをいれるだけです。これで自動的にMinify処理を実行してくれます。
環境によってはCSSやJavaScriptがすでにMinifyされている場合があります。それは開発者側ですでにMinify対応されているため、WordPress側ではMinifyをしても無駄になってしまう場合があります。誰の責務でMinifyを実行するのかを事前に確認しておくと良いでしょう。
ちなみにWeb上でMinifyができるサービスも存在します。Minifyを試す程度にはこちらを利用するとよいでしょう。
https://www.toptal.com/developers/cssminifier
https://www.toptal.com/developers/javascript-minifier
さいごに
以上になります。非常に簡単に設定できたと思います。ちなみにMinify処理は副次的にセキュリティ対策にもなります。なぜならばCSSやJavaScriptをMinifyすることで、ファイル名やソースコードが難読化するためです。あくまでも読みにくくなるだけなので、根本的な解決にはなりませんが、攻撃者のモチベーションを落とす程度の影響力はあります。
本記事の内容は以上になります👋