Chrome ネイテイブlazy-loadをサポート
Google Chrome 76 がネイティブ lazy-load をサポートしました。
JavaScript のライブラリを利用せずとも、ブラウザの標準機能として画像の遅延読み込みが可能になりました。
ネイティブ lazy-load は既に開発版 Chrome (Canary) で試験運用していました。
遅延読み込みは JavaScript で実装しているわけではありません。Chrome の標準機能として実装された lazy-load の機能で実現しているのです。
Loading 属性でネイティブ lazy-loadを利用
ネイティブ lazy-load を利用するには、 <img> タグに loading 属性を追加。
<iframe> タグでも loading 属性は機能します。3種類の値を loading 属性に設定できるとのことです。
loading=”lazy”: lazy
lazy-load を必ず適用。Viewportに画像が近づくと画像を読み込み。
loading=”eager”: eager
lazy-load を適用しないでページのロードと同時にコンテンツを読み込み。
loading=”auto”: auto
lazy-load するかどうかの判断をブラウザに一任。
loading 属性の値が設定されていないとき 、loading=”auto” が適用。
全体のコード例は下記の通りです。
<img src=“lazy-cat.png” loading=“lazy” alt=“かわいいネコ” height=“700” width=“1200” />
SEOには影響なし
loading 属性をサポートしていないブラウザ（Chrome 以外や Chrome 75 以下）は、loading 属性を無視します。単なる img タグとして扱います。
画像の表示に悪影響を与えることはないのです。
WordPressで簡単実装
ネイティブ Lazy-load を簡単に実装する WordPress 用のプラグインを Google は公開しました。
Native Lazyload プラグインの使い方は非常にシンプル。
インストールして有効にするだけなのです。
設定項目はなし。
すぐに導入しましょう。
まとめ
Chrome 以外も loading 属性をサポートするようになると、JavaScript での実装が不要になりますね。
