こんにちは。Kajitz inc.の瀧田です。

PageSpeed Insightsで100点を目指すにあたり、今回は「画像を最適化する」という指摘を改善しました。nginxのgzipを有効にすることで圧縮されていないファイルを圧縮して87点から91点までスコアを上げることができました。

Google PageSpeed Insightsの以下の点についてはGoogle PageSpeed Insightsとはで解説しています。

• Google PageSpeed Insights とはなにか
• SEO上、効果があるのか

画像を最適化する

ユーザーがリソースの読み込みを待機する時間を削減するには、画像のサイズを最小限にします。画像のフォーマットや圧縮を適切に行うと、データのバイト数を大幅に節約できます。接続速度の遅いユーザーにとっては時間の節約になり、データ プランに制限のあるユーザーにとっては費用の節約になります。
https://developers.google.com/speed/docs/insights/OptimizeImages

このブログは画像が少なく上記の通り1画像だけ指摘されているので、Webツールを使って画像を圧縮してデプロイする方針にします。

画像を圧縮する

optimizillaというWebツールに画像をアップロードして、圧縮されたファイルをダウンロードします。
既存のファイルをダウンロードしたファイルに上書いてデプロイします。
https://github.com/tackeyy/blog/pull/72/files

画像が圧縮されてスコアが上がったかどうかを確認する

87点から91点までスコアが上がりました。
画像が多い場合は画像をいちいちアップロード&ダウンロードすると手間がかかるのでコマンドで一括で圧縮する必要があります。
その方法はまた別途記載します。