Google Pagespeed Insights 画像の４項目について調査＆考えてみた結果、画像軽量化とオフスクリーンの画像遅延読み込みはやるべきである

ウェブ担当者の方が毎日チェックするツールの一つ「Google Pagespeed Insights」は、2018年11月14日から分析エンジンが Lighthouse に変更されました。非常に見やすくなったのと、Lighthouse は Chrome DevTools でも利用できますし、コマンドラインからでも利用できるので手軽にチェックできるのがいいですね。

さて、Pagespeed Insightsの中には画像に関する項目が4つあります。今回はこれについて確認していきます。

Pagespeed Insightsでは画像に関するチェックも行ってくれる。

Pagespeed Insightsで監査される4つの画像項目

実行すると「改善できる項目」や「合格した監査」のところに画像に関する項目がいくつか表示されます。

1. 適切なサイズの画像
適切なサイズの画像を配信して、モバイルデータ量と読み込み時間を抑えてください。

2. オフスクリーン画像の遅延読み込み
オフスクリーンの非表示の画像は、クリティカルなリソースをすべて読み込んだ後に遅れて読み込むようにして、インタラクティブになるまでの時間を短縮することをご検討ください。

3. 効率的な画像フォーマット
画像を最適化すると、読み込み時間を速くして、モバイルデータ量を抑えることができます。

4. 次世代フォーマットでの画像の配信
JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。

この中で大切なのは「オフスクリーン画像の遅延読み込み」と「効率的な画像フォーマット」の２つ

すべて対応するのが望ましいのですが、必須ではありません。技術的にクリアが難しいケースもあるでしょうし、巨大なウェブサイトではすべてを対応するのは簡単なことではありません。この中で大切なものは２つです。

Pagespeed Insightsとはなにか、モバイルユーザーにはなにを提供すべきか

ポイントは、Pagespeed Insights がなにを目的としているのかを知ることで理解できます。

Pagespeed Insightsのトップページは、目的がしっかりと記載されている

トップページに記載されている「あらゆる端末でウェブページの読み込み時間を短くしましょう」という言葉の通り、「ウェブページの読み込み時間を短く」というのが至上命題となっています。さらに重視されるのは、ファーストビューであり First Meaningful Paint となります。いかにスマホの画面に素早く表示されるのか、これが重要となります。

オフスクリーン画像の遅延読み込み

オフスクリーン画像の遅延読み込みは、多くのサイトで改善項目にピックアップされる

画像の読み込みは非常に重いものの一つです。そのため、ファーストビュー入らない画像は、遅延読込することが重要です。これにより、ウェブページを表示するのに必要なダウンロードするファイルサイズは劇的に削減されます。

画像遅延読み込み自体は新しい技術ではないので、ググるとたくさん時の情報が出てきます。ライブラリについて参考情報を記載します。

効率的な画像フォーマット

効率的な画像フォーマットも短縮できる時間が多い部類にはいる

透過がなく色数の多い画像をPNGで表示していませんか？これは画像軽量化には適していません。JPEGにすることで、大幅な軽量化を達成できるはずです。販促バナーなどをPNGで表示しているサイトを見かけますが、それらのサイトはかなりの軽量化ができるでしょう。また、ロゴデータやアイコンなどの画像は、PNG8やSVGにすると非常に軽量化することができます。

Lighthouseの場合、この項目はJPEGとBMP画像が最適化されているかどうかをチェックします。そのため、PNG画像は対象にならず、別の項目でチェックされます。画像毎に適した画像フォーマットにすることは基本ですので、容量の重いPNG画像をむやみに利用せず、画像に合わせてフォーマットを選択することが重要です。

この項目が重要なのは、ファーストビューに画像があるケースに対応が必要なためです。スマホサイトでも、ファーストビューに画像が表示されることは多く、スライダーで表示しているケースも多く見かけます。そのため、オフスクリーンによる遅延読み込みに含まれない画像は、しっかりと軽量化することで読み込みが速くなるのです。

他の２項目も重要だが、優先度は少しさがる

先に結果をお伝えすると「適切なサイズの画像」「次世代フォーマットでの画像配信」が改善できる項目に上がっていたとしても、90点以上は可能です。

とあるサイトでのPagespeed Insightsの結果。画像に関する２項目がピックアップされていても93点がでている

もちろん全てに対応できればよいのでしょうが、そうでなくても緑のゲージのスコアは獲得ができるということなのです。

画像軽量化は定額＆低額のLightFileがおすすめ

効率な画像フォーマットの項目は、JPEGとBMPの最適化をチェックします。しかし、BMPは現在ウェブサイトではあまり使われていないため、JPEGの最適化が行われているかどうかということになります。弊社の画像最適化ツール「LightFile」は、画質そのままで自動で軽量化するツールです。月額１万〜利用できる低価格、処理ファイル数が無制限の定額制なので、アクセスが増えてコストが上がることもありません。画像軽量化することで、クラウドの転送料金が大幅コストダウンできたケースもあり、コストメリットが非常に強いのも特徴でもあります。