Chromeブラウザの画像遅延読み込みをサポートするLazyloadが標準に

GoogleのChromeブラウザがLazyloadを標準で搭載すると発表してから1年近くがたちました。
先週、Gooleのweb.devのサイトで情報が更新されたので使用方法などを再度確認していきます。

これまでのLazyload

これまではjavascriptでLazyloadの設定を行っていました。
SEO対策ではLazyloadの導入は必須でしたがjavascript等の使用は減らした方が良いという、SEO対策の視点からは悩ましい状態が続いていました。
javascriptを使用しな ホームページ制作 は難しいので結局javascriptでLazyloadの設定を行っていました。

去年、Chromeブラウザが標準でLazyloadをネイティブでサポートすると発表され、ほかのブラウザも導入してくれないかなとおもっていました。

対応するブラウザ

発表から1年が経ちLazyloadを標準でサポートするブラウザが増えてきました。

Chromium搭載ブラウザ

• Chrome
• Edge
• Opera

その他のブラウザ

• Firefox
• WebKit Safariで対応予定(WWDCで対応を発表)

なぜLazyloadが必要なのか？

多くのホームページで画像が使用されており、画像を表示するために何度も要求されているアセットタイプです。
しかも画像はホームページの中で多くの帯域幅（通信路容量）が必要で、ホームページを開く度に全ての画像を読み込んでいては無駄な通信容量が必要となります。
そこでLazyloadの技術を使用する事で画面では表示されていない画像などの情報の読み込みを制限する事が可能となり、ページの表示速度が上がりユーザーがストレスなくページ移動ができる技術です。

データの節約とビューポートからの距離のしきい値を改善

2020年7月現在、Chromeは開発者の期待に応えるべく、ネイティブ画像の遅延読み込み距離をビューポートからの距離のしきい値に合わせるための大幅な改善を行っています。
高速接続（4Gなど）では、Chromeのビューポートからの距離のしきい値を3000pxから1250pxに、低速接続（3Gなど）ではしきい値を4000pxから2500pxに変更しました。この変更により、2つのことが達成されました。

<img loading=lazy>はJavaScriptの遅延読み込みライブラリが提供する体験に近い動作をします。
新しいしきい値は、ユーザーがスクロールした時点で画像が読み込まれていることを保証することができます。

• 高速接続（4Gなど）：ビューポートからの距離のしきい値を3000pxから1250pxに変更
• 低速接続（3Gなど）：ビューポートからの距離のしきい値を4000pxから2500pxに変更

設定方法

loading属性について

現在、Chrome ではすでに、デバイスのビューポートの位置によって、画像の読み込み優先度が異なっています。ビューポートの下の画像は優先度が低くなりますが、できるだけ早く読み込まれます。

Chrome 76移行のブラウザでは、読み込み属性を使用して、スクロールして到達できる画面外の画像の読み込みを完全に遅らせることができます。

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

ロード属性でサポートされている値は以下の通りです。

• auto：ブラウザのデフォルトの遅延読み込み動作で、属性を含まないのと同じ
• lazy：ビューポートからの距離が計算されるまでリソースの読み込みを遅延
• eager：リソースの読み込みを遅延させます。リソースがページ上のどこにあるかに関係なく、すぐに読み込み

注意：クロムでは利用可能ですがオート値は仕様に記載されていません。変更される可能性があるので、含まれるまでは使わないことをお勧めしています。

画像にはディメンション属性を含める

ブラウザが画像を読み込んでいる間は、画像の寸法が明示的に指定されていない限り、画像の寸法をすぐに知ることはできません。
ブラウザが画像のためにページ上に十分なスペースを確保できるようにするために、すべての<img>タグには幅と高さの両方の属性を含めること。
寸法が指定されていないと、レイアウトのずれが発生する可能性があり、読み込みに時間がかかるページではより顕著に影響がでます。

おすすめはしっかりとwidthとheightの数値を入れる事です。

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

インラインスタイルで直接値を指定する場合

<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">

寸法が含まれていない場合でも、画像は遅延ロードされますが、寸法を指定することでレイアウトシフトの可能性が低くなるとの事です。
画像に寸法を含めることができない場合、画像を遅延ロードすることは、ネットワークリソースを節約することと、レイアウトシフトのリスクが高くなる可能性があることとのトレードオフになると伝えています。

Chromium のネイティブな遅延ロードは、画像が表示されるとロードされるように実装されていますが、まだロードされていない可能性もあり、この場合はそのような画像の幅と高さの属性がないと、累積レイアウトシフトの影響が大きくなります。

100枚の画像を貼ったデモページ

<picture>要素を使って定義された画像を遅延ロード設定したでもページです。

デモページはこちら

<picture>
<source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
<img src="photo.jpg" loading="lazy">
</picture>

ブラウザはどの<source>要素からどの画像を読み込むかを決定しますが、loading属性はフォールバックの<img>要素に含める必要があるだけです。

最初に表示されるビューポートにある画像を遅延ロードしないようにします。
最初に見えるビューポートにある画像に loading=lazy を設定するのは避けるべきです。

可能であれば、折り目の下に位置する画像にのみ loading=lazy を設定することをお勧めします。熱心に読み込まれた画像はすぐに取得できますが、 怠惰に読み込まれた画像はブラウザがページ上の画像の位置を知るまで待たなければなりません。

まとめ

詳しくは英語のぺーじですがGooleのweb.devで確認する事ができます。
ページの表示スピードはSEO対策では重要なポイントの一つなので、Lazyloadがブラウザで実装してくれるおかげjavascriptを減らすことが出来て助かります。