画像の最適化deスコア改善-PagespeedInsightの改善方法1-

PagespeedInsightのスコア改善を図るには、まず読込に時間のかかる画像の最適化と表示されない画像の遅延読み込みが必要です。このページでは、表示速度の高速化へ向けた画像の最適化のやり方について説明していきます。簡単に出来るのでぜひ参考にしてみてください。

画像の最適化がお済みの方は、「画像遅延読み込みでメジャーなライブラリを実装」をご覧ください。

日本や先進国では急ピッチでインフラが整備され、回線速度も今やギガレベルが一般化されてきています。回線の高速化で、ひと昔言われていた読込3秒をほとんどのサイトがクリアしているのではないでしょうか。それなのに今さらなぜ？と思うかもしれません。そこで読込速度を上げる理由について触れてみたいと思います。

1. 検索順位結果にモバイル向けページの表示速度を利用することになったため（2018/1発表）※
2. ギガスピードに慣れてきて、閲覧の体感速度が遅いと離脱率が上がるようになった
3. 回線速度が低速な国やエリアでも閲覧できるように配慮する必要がある

※それまではPCデスクトップ向けページの評価を対象にしていましたが、モバイル検索での比率が高まったことを受け、モバイル向けのページ評価に基づいて検索順位が決まるようになりました。

この仕様をモバイルファーストインデックス（MFI）といい、Google検索で2018年より実施されています。

読込速度の高速化を図るにあたり、簡単なところで画像の最適化があります。画像の最適化とは、正しいサイズ、適切な形式（GIF、PNG、JPG）で作成し、見た目では問題ない品質でファイル容量を圧縮することです。具体的には下記のような事項が該当します。

1. 適切な画像形式を選択
2. 正しい圧縮レベルを選択
3. Imageminを使用して画像を圧縮
4. ページの読み込みを高速化するために、アニメーションGIFをビデオに置き換え
5. レスポンシブな画像を配信
6. 正しいサイズで画像を提供
7. WebP画像を使用
8. 画像CDNを使用して画像を最適化

ページ上の画像を最適化して、視覚的な品質に大幅な影響を与えずにファイルサイズを削減できることをPageSpeed Insightsが検出した場合にトリガーされます。

画像によって圧縮率が変わるので、両サイトで試すのをオススメします。

いかがでしたでしょうか？こんなに簡単にできる画像最適化。少しでも読み込みが速くなるのなら、やったほうがいいに決まってますし、PagespeedInsightのスコアも少しですが改善します。

次のページでは、大幅なスコア改善が見込める「サイト画面表示時に不要な画像を遅延読み込みする」について解説します。