Yak shaving logs


My life is just yak shaving.

Google PageSpeed Insightsで100点を目指す 〜 画像を最適化する 編 〜

2017/09/01 #seo #page-speed-insights

By Yusuke Takita


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

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

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

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

画像を最適化する

https://gyazo.com/a0d634772b97a3878bf68ed20d655ea9

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

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

画像を圧縮する

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

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

https://gyazo.com/28c8b50997bd5bd6a9fc520a3158167d

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

このエントリーをはてなブックマークに追加

categories


最新記事


tags