年末年始にかけて、自身で運営しているWEBサイトの Google PageSpeed Insights のスコア改善の対応を行いました。 主な対応は以下の通りです。
- 画像に対するブラウザキャッシュ期間の設定 (Expires)
- HTML, CSS, JavaScript などの静的コンテンツのHTTP圧縮通信 (DEFLATE)
これに加えて CSS の見直しや画像サイズの縮小なども行い、結果としてWEBページの読み込み速度を向上させることができました。 その対応の際にいくつか記事を執筆したので紹介します。
ブラウザキャッシュ期間の設定
まずは頻繁に更新しない静的ファイルについて、クライアントのブラウザにキャッシュしてもらう期間を設定しました。 HTTPには Expires ヘッダの設定です。 Expires ヘッダの詳細については、こちらに書きました。
HTTP の Expires ヘッダについて復習したところで、Apache httpd の mod_expires を利用して Expires を返却するように設定しました。 mod_expires については次の記事を書きました。
今回は画像ファイルについて Expires ヘッダで1週間のキャッシュ期間を指定するように変更しました。 これだけでも Google PageSpeed Insights のスコアが格段に向上されました。
HTTP圧縮の設定
次に HTML, CSS, JavaScript などのテキストコンテンツを圧縮してクライアントに返却する「HTTP圧縮」の設定を行いました。 まずは、クライアント(ブラウザ)の Accept-Encoding ヘッダについて復習がてら記事を書きました。
そして、Apache httpd で mod_deflate のフィルタを利用してテキストコンテンツを圧縮して返却するように設定しました。 方法は次の記事に書きました。
これにより更に Google PageSpeed Insights のスコアが向上し、体感でも早くなったことを感じれるようになりました、めでたしめでたしです。
いくつか気になっていること
これらの設定をしている間にいくつか新たに気になったことがあり、まだ調べられていません。 時間を見つけて調査したいと思っています。
- Google が最近 Chrome で使い始めた Brotli (br) に対応した mod_brotil があることを知りました。 deflate よりも圧縮率が高いとのことですが、対応ブラウザの兼ね合いと、mod_deflate と併用できるかが不明な点は調査したい。
おわりに
僕が主催をしている、次回の「WEBエンジニア勉強会 #05」では、この記事の内容について、もっと深掘りして詳しく話そうと思っています。 気になる方がいたら是非勉強会にお越しください。