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 での実装が不要になりますね。

SEO Consultant

2003年頃からSEOに興味を持ち、情報の少ない中英語サイトから学びつつ、多くのサイトを運営し順位を追うことで、常にGoogleの変化を理解し、時代に合わせてSEOコンサルティングしています

おすすめ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です