ネイティブ Lazy-loadとは？対応状況は！ファーストビューは？確認方法は？

ネイティブLazyLoadとは？LazyLoadという「画像の読み込みを遅らせるためのテクニック」を
HTMLタグに加えるだけで使うことができる、一部ブラウザの標準機能です。通常のLazyLoadはJavaScriptのライブラリとして提供されているが、HTML上で変更を加えるだけでLazyLoadが出来るのでネイティブLazyLoadと呼ばれています。

<img> 要素と iframe の <iframe> 要素に loading="lazy" 属性を付けることで、ブラウザの標準機能として遅延読み込みを可能にしますのでSEOにも効果があります。

ネイティブLazyLoadとは？HTMLでの使い方

ネイティブLazuLoadのHTMLでの使い方です。参考にしてください。

HTMLでの使い方

<img="cat.jpg" alt="" width="800" height="600" loading="lazy" >

loading属性の設定とwidth・height指定をする。

loading=”lazy”
lazy-loadを必ず適用させる。
Viewport(スクリーンに見えるエリア)に画像が近づくと画像を読み込みする。

loading=”eager”
lazy-loadを適用せずに、ページのロードと同時にコンテンツを読み込みする。

loading=”auto”
lazy-loadするかどうかの判断をブラウザに任せる。

WordPress5でネイティブLazy-load の仕様変更！JQUERY

JQUERY による実装を必要としません。HTML コードを書くだけなので、簡単に実装できるのが最大の長所です。

imgタグで発生する事象

• 画像読み込みが終わるまでブラウザが重くなり、画面操作に支障が出る
• ネットワークやサーバーの負荷が瞬間的にひっ迫する
• PageSpeedInsightsで低スコアになる

WordPress5.5ではwidth 属性と height 属性を追加

width 属性と height 属性を追加してある <img> タグには loading="lazy" が記事出力時に自動的に挿入されます。

PageSpeedInsightsのCLSを 防ぐために width/height が必要です。

loading="lazy" を WordPress が追加する画像 (<img> タグ) には width 属性と height 属性が存在していなければなりません。

遅延読み込みをするので、画像はあとから読み込まれます。それまでなかった場所に画像が出現します。このときに、コンテンツ要素の移動が発生する可能性があります。これがCLSに影響を及ぼしていました。width 属性と height 属性があるとブラウザは画像のアスペクト比（縦横の比率）を計算し事前に画像のスペースを確保できます。

WordPress がバージョン 5.7

iframeとは、HTMLの要素（タグ）の一つで、Webページ内に矩形の領域を設け、別のWebページなどを読み込んで表示するものです。

別のWebページや画像などをあたかもページの要素の一つのように埋め込んで一体的に表示することができる。表示する内容はsrc属性でURLの形で指定します。

ネイティブ Lazy-load のデメリット！ファーストビュー

画像/iframe の読み込みを遅らせることにより、ページの表示速度を速くするのがLazy-load の目的です。

ページを開いたときにすぐに表示されるべき画像や iframe にまでネイティブ Lazy-load を適用すると、ページの読み込み速度、PageSpeedInsightsのCLSがよくなるもののLCP が悪化するようになっていました。

WordPress 5.9 では、最初に設置された画像と iframe にはネイティブ Lazy-load を適用しないように仕様が改良されることになっていました。

最初の画像がファーストビュー内に出現するかどうかはテーマのデザインにも大きく依存しますので気をつけてください。

まとめ

画像遅延ロードの確認方法としては、各ブラウザの開発ツールの「ネットワーク」を用いて、ファーストビュー時に読み込まれる画像が制限されていることと、スクロールに応じて順次画像が読み込まれることを確認していきます。

あわせて読みたい

【最強最速化ツール】WPRocketRocketの使い方や設定方法！ この記事ではWordPressブログを高速化する最強のプラグイン『WP Rocket』の設定方法や使い方、クーポンも解説します。 WP Rocketを使用することで、CSS・Javascript・HT…

関連記事:

『過大なDOMサイズの回避』とは？document write 非推奨！Wordpresの原因とDom減らす解決・改善の方法！javascript 高速化 テクニック JETPACKとは？意味！必要か？重いWEBサイトやブログ！メリットやデメリット！ 【Resource Hints】dns-prefetch(プリフェッチ)とは?リリース！使い方！遅くなる?重くなる！メリットやデメリット HTTP/2の確認方法？対応ブラウザ！Chrome SPDY indicatorを有効化チェック 「静的なアセットと効率的なキャッシュポリシーの配信」とは？TTLを見直す？SEO効果？WordPress ヘッダービディングとは？導入メリットや仕組み！デメリットを紹介