2024/04/20 2022/01/09

【必見】loading=”lazy”の正しい使い方

はじめに

皆さんは遅延読み込み（lazy loding）という言葉を聞いたことがありますか。

電車の遅延は困りますが、Webコンテンツの遅延読み込みは通信量が減りブラウザの表示速度が改善されるので、素晴らしい仕組みだと言えます。

但し、用法容量を理解して使わないと効果ゼロ或いは逆に評価スコアを下げる原因になるので注意が必要です。

また、ネイティブLazy-loadがウェブ標準になったという情報を聞いて、取り合えず入れておこうっとloading="lazy"の属性をやみくもに追加しているブロガーは設定場所を一度確認することをおススメします。

loading="lazy"の正しい使い方

設定方法

<img>要素<iframe>要素の中にloading="lazy"の属性を追加して下さい。

img要素の場合

例：<img loading="lazy" src="画像のアドレス" width="400" height="400" alt="画像の名前">

iframe要素の場合

例：<iframe loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frame height="324" src="動画のアドレス" title="YouTube video player" width="560"></iframe>

3つの注意点に気を付けて設定して下さい。

img要素・iframe要素共通

ファーストビューの領域に設置した<img>要素・<iframe>要素にはloading="lazy"の設定は避けて下さい。

理由はLCP（Largest Contentful Paint：最大視覚コンテンツの表示時間）が悪化する為です。

また、widthとheightの属性には数値の設定が必須です。

理由は CLS（Cumulative Layout Shift：累積レイアウトシフト）に影響するためです。

Hatena Developer BlogにもCLSに関する解説があるので参考にご覧ください。

画像の表示で画面がズレないよう変更したことで、はてなブログの何が改善されたのか - Hatena Developer Blog

img要素の場合

loading="lazy"はビューポートから2500pxより下側（遠い位置）でご使用下さい。

2500pxってどれくらいの距離かすぐ実感できませんが、スマホだとざっくり4.5ページ以降のエリアだと思って下さい。

なお、しきい値は1250pxじゃないの？と疑問に思う方がいらっしゃると思いますが、1250pxは高速接続（4G回線）の場合で、低速接続（3G回線）は2500pxです。

また、LighthouseやPageSpeed Insightsは低速接続で評価しているので、テストでスコアを上げたい場合は、ビューポートから2500pxより内側の画像にloading="lazy"の属性を追加しても遅延読み込みは発生せず、スコアは改善されません。

Googleが公開しているデモサイトを見て欲しいのですが、すべての画像にloading="lazy"の属性が入ってますが、先頭から6枚の画像のデータは最初に読み込まれてます。

画像の高さは400pxですが上下にpaddingが16pxあるので、1枚432pxとなり、6枚目の画像はビューポートから2500pxを超えてしまうので、6枚目の画像迄は遅延読み込み読みされません。

iframe要素の場合

loading="lazy"はビューポートから3500pxより下側（遠い位置）でご使用下さい。

3500pxの距離は、スマホだとざっくり5.5ページ以降のエリアだと考えて下さい。

なお、3500pxというしきい値はGoogleの公式説明はなく、管理人がテストした結果です。

高さ334pxの12枚のYouTube動画を埋め込んで、何枚目のYouTube動画が遅延読み込みされたか調べたところ、先頭から10枚は遅延読み込みされませんでした。

動画は出来るだけ記事の前側に貼ると思うので、5.5ページ以降に埋め込むのは、ちょっと現実的ではないかも知れませんね。

まとめ

loading="lazy"での遅延読み込みは万能ではなく、しきい値から下側（遠い場所）でないと効果が発揮できないことが分かりました。

スマホだと4.5ページ～5.5ページで完結するような短い記事の場合、loading="lazy"は役に立たないかも知れません。

その場合、目次を先頭に入れ表示する、フォントを大きめに変更する、改行を多くする等、ビューポートからの距離を稼いだり、遅延読み込みできない画像はwebpを使用し、データ量を削減すると良いでしょう。

また、Chromeの検証モードでネットワークの状態を確認し、意図した通りに遅延読み込みされているか見ながら修正すると完璧になると思います。

はてなブログでは2021年6月から、はてなフォトライフの画像を貼り付けると、自動でloading="lazy"の属性が追加されるように変わってますが、画像を貼る位置によっては、遅延読み込みされないので気を付ける必要があります。

はてなフォトライフの画像を表示する際に、画面にズレが生じないよう変更しました - はてなブログ開発ブログ

WordPress5.5からプラグインなしで<img>要素にloading="lazy"が追加され、WordPress5.7からは<iframe>要素にもloading="lazy"が自動で追加されるようになりました。

さらに、2022年1月25日にリリース予定のWordPress5.9では、LCP改善のため1枚目の画像にはloading="lazy"は適用されないようになります。

Lazy-loadはLCPを悪化させる!? WordPressは2つ目の画像からネイティブLazy-loadを実装するように改良予定 | 海外SEO情報ブログ

ただし、ビューポートから2500px以内にある<img>要素<iframe>要素はloading="lazy"を設定しても遅延読み込みされないので注意が必要です。

なおネイティブlazy-lode（loading=”lazy”）では遅延読み込みできない領域は、JavaScriptを使ったLazyLodeで対応可能なので、下記記事を参考に実施してみて下さい。

JavaScriptを使ったLazyLoadの方法 - after work lab

気軽に足跡残してね！

この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。

ツイッターで♡いいねする

https://t.co/Cv2tlbk9So

loading="lazy"について勉強したことをブログにまとめて見ました。

画像や動画の遅延読み込みに興味がある方はご覧下さい。#HTML #lazylode #lazyloding #遅延読み込み
— heavy-peat (@AfterWork_Lab) January 9, 2022