Chromeのバージョン76から画像の遅延読み込み(lazyload)がネイティブで対応

時間の計測
先日(2019年7月30日)、PC版Chromeがバージョン76にアップデートされ、ついに画像の遅延読み込み(lazyload)がネイティブで対応された。
これはページの表示速度を一気に早くすることができる画期的な機能である。

特に「ネイティブで対応」という部分が大きい。
補足説明:「ネイティブで」とは、その機能がブラウザの内部に最初から実装されていることを意味します。

今まででも画像の遅延読み込みをする方法はいくつかありましたが、ブラウザ側のネイティブの機能ではなかったためにどのやり方も少し面倒くさく、また、やり方によってはSEO面での悪影響(検索順位が悪くなる)も懸念されていました。

そのような理由から、ページ表示速度のチューニングが趣味であるこの私ですが、このサイトでは画像の遅延読み込みを採用していなかったのです。

しかし今回、ブラウザ側でネイティブで対応されたことによってそれらのデメリットは完全に無くなり、すでにこのサイトでは広い範囲でこの遅延読み込みを導入しています。

というわけで、このページでは画像の遅延読み込みとは何か?、そのメリットや導入方法、そして導入すると表示速度がどのように変化するかを解説していきます。

画像の遅延読み込みとは何か?を知らない人のために一応説明しておきます。

例えばこのサイトのトップページを開くと以下のような表示になります。
このように、ページを表示させたときにスクロールせずに見える範囲のことを「ファーストビュー」といいます。
ファーストビュー

ファーストビューより下にある画像はスクロールさせるまでは見えないため、最初のページ表示時には読み込む必要がありません。
ファーストビューより下の画像
しかしWebブラウザの仕組み上、そのページにある画像は最初にすべて読み込むようになっています。
これは読み込みの待ち時間が長くなる原因の1つです。

読み込み時間を少しでも短くするために、スクロールが発生するまではファーストビュー以外の画像を読み込ませず、スクロールが発生したときに読み込ませることを「画像の遅延読み込み」といいます。

補足説明:実際にはファーストビュー以外の画像がすべて読み込まないわけではなく、ファーストビューからある程度下にある範囲までの画像は読み込まれます。

この理由はおそらくですがページをスクロールした際、通信が遅かった場合は画像がない状態(白紙のページ)が一瞬でも表示されることになってしまうため、それを防ぐためにある程度先までの範囲にある画像は読み込むのだと思われます。

画像を遅延読み込みさせる最大のメリットはページの容量が軽くなることです。
それはつまり、ページ読み込み時間(表示速度)が早くなることを意味します。

Webページを構成するファイルの中で、画像が全容量に対して占める割合はかなり大きいものです。
そのページの容量の8割以上を画像が占めていることも珍しくないでしょう。

それらの画像の中でファーストビュー付近に含まれるものは一部でしょうから、それ以外の画像読み込みをすべて省略できるのは表示速度の短縮に大きく貢献します。

今回Chromeで実装された遅延読み込みの方法は、画像タグ(img要素)にloading属性を付けるだけです。
例えば以下のようなimg要素があったとしたら、

<img src="画像のURL" alt="" />

以下のようにloading属性を追加します。(値はlazy)

<img src="画像のURL" alt="" loading="lazy" />

たったこれだけでその画像の遅延読み込みが可能になります。
この簡易さこそが、ブラウザ側でネイティブで対応された最大のメリットだと言えるでしょう。


このやり方のデメリットは私が知る限りではありません

今までにあった他の遅延読み込みのやり方とは違い、HTMLに画像のパス(URL)が直接記述されているためSEOの面で問題がありません。
また、JavaScriptを使って処理をする遅延読み込み方法ではないため、ページ表示速度を遅くする要因もありません。

補足説明:JavaScriptによってページ内の要素を変更(DOMを操作)したりすると、表示速度が遅くなるケースがよくあります。
要するに、回りくどいやり方や余計な処理をせず、素直にHTMLに記述するのが最も表示が早いのです。

ただ、唯一デメリットを挙げるとすれば、Chromeのバージョン75以下や他のブラウザで未対応な点でしょうか。
この遅延読み込みのやり方が普及すれば、他のブラウザも実装してくれると思います。

Firefoxは早い段階で実装してくれそうな気がしますが、日本のブラウザのシェアから考えるとSafari(特にモバイル版)が対応してくれることが望まれます。

今回使用したloading属性は対応していないブラウザでは無視されるので、Chromeのバージョン75やFirefox、さらにIEの11で表示確認をしたところ、今まで通り正常に表示されました。(もちろん遅延読み込みはされない)

遅延読み込みが正常に動作しているかを確認するためには、Chromeのデベロッパーツールを開き、「Network」タブに切り替えます。
(デベロッパーツールはF12キーを押すと出現します)
デベロッパーツール

その状態で該当のページを表示させたり再読み込みをすると、読み込まれたファイルが一覧表示されます。
ネットワークタブの一覧

そしてページをスクロールさせていくと、遅れて読み込まれた画像が次々と一覧の下から出現してきます。
遅延読み込みされた画像一覧
確認方法は以上です。

今回の遅延読み込みの方法はブラウザのネイティブの機能ですから、どれだけの画像を遅延させて読み込むかはブラウザ側で自動的に決められることになります。

例えば、フルHD(1920px × 1080px)のモニタでこちらのページを表示させると、ファーストビュー表示時での画像のリクエスト(読み込み)数は35です。
画像のリクエスト数
補足説明:35/57となっていますが、この画像では「img」タブに絞っているので「CSSやJSファイルなども含んだすべてのリクエスト数が57ある中で、imgのリクエストが35」を意味しています。

次に、デベロッパーツール内でデバイスをNexus5Xに切り替えて(下2枚目の画像内のボタンを押す)、同じページを再読み込みさせると、
Nexus5Xでの表示

Nexus5Xのほうがビューポートの範囲が狭いため、ファーストビュー表示時でのimg(画像)のリクエスト数は10で済んでいます。
Nexus5Xでの画像リクエスト数
フルHD(1920px × 1080px)のモニタで表示させた時に比べると、
35 – 10 = 25
となり、遅延扱いになる画像が25個多くなります。

つまり、PCの時より25個多くの画像がページ表示時の読み込みから省かれることになるので、ビューポートが狭いスマホなどの端末のほうが遅延読み込みによる表示速度短縮の効果が大きく得られることを意味しています。

今回紹介したネイティブ遅延読み込み機能はAndroidのChromeもバージョン76からデフォルトで有効になっているようです。iOSのChromeはわかりません。

Enabled by default in:
Chrome for desktop release 76
Chrome for Android release 76
Lazily load iframes and images via ‘loading’ attribute – Chrome Platform Status


このサイトはもともと画像をギリギリまで容量ダウンさせていたので、遅延読み込みによってリクエスト数を大幅に減らしてもダウンロード容量としてはあまり減らず、表示速度は思ったほど早くなりませんでした。
(プロトコルがHTTP/2の場合、リクエスト数はあまり問題にならないため)

しかしそれはあくまでも通信速度が速い環境での話であり、スマホなどでの4G通信の場合は極端に速度が遅くなることもあるので、そのような環境であれば画像のダウンロード容量がわずかでも減ることで表示速度に大きな違いが出ると思われます。

現時点では最新のChromeにしか効果がありませんが、img要素にloading=”lazy”を付けるだけで良い上にノーリスクなので、ぜひ試してみてはいかがでしょうか。

この方法はChromeのベータ版で実装されているのは知っていましたが、正式版のChromeに実装されていたことは以下のブログで本日知りました。
いつもとても有益な情報を配信されており、お礼申し上げます。

Chromeがネイティブlazy-loadをサポート、JSなしで画像を遅延読み込み可能に | 海外SEO情報ブログ

提供サポートなど