画像の遅延読み込みでPageSpeed Insightsのスコア改善を図ろう!

画像の最適化-PagespeedInsightの改善方法1-

Planet20xxPC用バナー Planet20xxモバイル用バナー

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が検出した場合にトリガーされます。

画像を最適化する方法オンライン上で簡単圧縮

画像圧縮で有名なパンダでおなじみのtinyjpg
Tinyjpg

Tinyjpgはjpg,pngを選択することなく、ドラッグ&ドロップで20ファイルまとめて圧縮可能です。

画像圧縮で有名なパンダでおなじみのtinyjpg
Compressjpeg

Compressjpegは、ファイルの種類をタブで選択することでjpg、PNGだけでなくPDF、SVG、GIFも圧縮が可能です。

※Compressjpegはファイル名-min.jpgに変わります。すでにインデックスされている画像があるかもしれないので、ファイル名は変えずに再アップロードしたほうがいいです。

画像の推奨画質・解像度

  • 画質:85
  • 解像度:72dpi
自分で設定する場合の推奨値です。

まとめ

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

※さらにCompressjpg後のTinyjpgでさらに圧縮できることもあります。

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

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

【関連記事】

PC(html/Javascript)
スマホでの画像遅延読み込みイメージイラスト

表示スピードアップ!画像遅延読み込み実装

PagespeedInsightのスコア改善に役立つ画像遅延読み込みの実装方法についてわかりやすく解説します

PC(Javascript)
CDNとサーバー読み込みのイメージ画像

CDNとレンタルサーバーのjsファイル読み込み比較

jsファイルを利用できるCDNのパフォーマンスと稼働時間を調べてみました。

PC(html)
DNSプリフェッチでリレーションしているイメージ画像

GoogleAdsense広告を速く表示する

DNSプリフェッチで5つの参照先を事前リレーションするだけで、すばやく表示されます

PC(html/CSS)
ソースコードのハイライト表示のやり方を説明したページへのリンク画像

ソースコードのハイライト表示のやり方

負担が少ない軽量ライブラリを使用して、ハイライト表示する方法を解説。

PC(Windows)

WindowsでもHelveticaフォントを使いたい!Arialじゃ満足できない方必見

PC(HP)
Googleアナリティクスで特定のIP除外する方法

Googleアナリティクスで特定のIPアドレスを除外する方法

自分アクセスによる訪問カウントを取得しないための設定

TOP