vier

Let's be more curious.

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

lazy-loading

はじめに

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

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

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

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

(注)SafariやiOSはまだ正式にサポートされてなく、実験的なWebkitの機能でLazy image LodingをONにすることで遅延読み込みを適用できます。

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="" frameborder="0" 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

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

はてなブログでは2021年6月に、はてなフォトライフの画像を貼り付けたときの表示方法を修正しました。最終的な見た目に変化はありませんが、画面のズレが起きなくなったことでCLS(Cumulative Layout Shift)の数値が改善され、視覚的安定性が向上しました。


img要素の場合


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

img要素の場合


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

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

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

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

6枚の画像のデータ


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


iframe要素の場合


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

iframe要素の場合



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

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

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

先頭から10枚は遅延読み込みされません


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


まとめ

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

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

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

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

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

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

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

本日、はてなフォトライフの画像をはてなブログに貼り付けた場合に、画像表示時に画面にズレ(レイアウトシフト)が生じないよう変更しました。この変更により、画面をスクロールした際に、後から画像の読み込みが行われ、閲覧中の領域が下にずれてしまう、という問題を回避することができます。また、この変更に合わせて画像の遅延読み込み(lazy load)にも対応し、画像をたくさん掲載したブログでも快適に閲覧できるようになりました*1。なお、本変更が適用されるのは、本機能リリース後に投稿されたエントリのみとなります。過去に投稿されたエントリへの適用方法については、下記をご参照ください。 過去に貼り付けたフォトライ…


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情報ブログ

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

ファーストビューに掲載されている画像を Lazy-load すると コア ウェブ バイタル の 1 指標である LCP を低下させる恐れがある。そのため WordPress は、ファーストビューの画像にネイティブ Lazy-load を適用しないように改善する予定だ


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

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


気軽に足跡残してね!

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


それでは今回の記事はこれでおしまい。

New PostOld Post
No Comment
    Please Enter Comments in Light mode
    comment url