【Google Chrome 75】Lazy Load(遅延読み込み)をネイティブ実装へ

Google Chrome 75 「Lazy Load(遅延読み込み)」を実装

Google Chrome 75からついにLazy Load(遅延読み込み)がデフォルトで実装されるそうです。
※もうChrome 75になっていますが。

loading属性というものが追加されるので、そちらをimgタグに設定します。

<img src="example.jpg" alt="サンプル" loading="lazy">

のような記述になります。

imgタグだけではなくiframeにも適用されるので、その場合には、

<iframe src="example.html" loading="lazy" allowfullscreen></iframe>

となります。

loading属性で設定できるのは、3パターン

loading属性に設定できるのは、「lazy」「eager」「auto」の3パターンです。

lazy => 「遅延読み込み」を有効にする
eager => 「遅延読み込み」を無効にする
auto => 「遅延読み込み」するかどうかは、ブラウザが判断する

loading属性を設定していな場合、デフォルトでは「auto」が設定されます。

こちらのサイトで詳しく説明されていたので、そちらを参照して貰った方が、より詳細に分かると思います。
https://addyosmani.com/blog/lazy-loading/
※英語ページですが、私のような中学英語で止まっている人間でも分かるように詳しく書かれています。

この記事を書いている人
株式会社ディープ
名前足立拓也

メールアドレスadachi@deep-deep.jp

関連記事

最近の記事

  1. ドメインについて
  2. WP:WordPress(ワードプレス)
  3. URL設計(URLデザイン)
  4. URL「ディレクトリ名」と文字アンダースコア(_)とハイフン(-)
  5. SEO対策(外部ファイルの読み込み)
  6. URL リダイレクト
  7. インデックスされない
  8. 内部対策は必要?
  9. CMS(シーエムエス)
  10. SEO業者は必要?

Twitter

アーカイブ

PAGE TOP