loading=”lazy” 属性について

概要

先日リリースされた、Google Chrome 76において、loading 属性を追加するだけで、画像とiframeの遅延読込を可能にする機能がサポートされました。

あまり詳しくない方にとっては、「遅延読込」とだけを聞くと、ブラウザ動作が遅くなるのでは?と思ってしまうかもしれませんね。

何か?という答えを、簡単に言うとすれば、これまでページを開いた際にページにある画像やiframeの中身を同じタイミングで読み込みしていたのを、loading=”lazy” 属性を付けることで、遅延させてページスクロール後に読み込ませることができるというものです。

「なにがうれしいか」というと、画像の多いページでは全体が表示されるまでに時間がかかっていたページを、まずページ上部の画像を表示させることを優先させて、ページ下部の画像はスクロール後から読み込ませることができます。

読込が遅く、ページがなかなか表示されなかっことにより、ユーザーの途中離脱が行われていたページ等に効果が出てきます。
これは今までも、JavaScriptなどのプログラムで実現できていましたが、画像のHTMLタグに属性として付けられることにより、HTMLをいじれる環境であれば簡単に実現できるようになりました。

考察

商品一覧ページや観光サイトなどで画像が多く表示されるページ等に有効かもしれませんね。

Googleの検索エンジンのロボットには、スクロールという概念がないため直接的なSEO効果はないものの、ユーザーの直帰率の軽減やページを開いてすぐの離脱がすくなくなり、ユーザー本意のページとなることでSEO効果も出てくるでしょう。

ウェブサイトの管理CMSとして使われることの多い、Wordpressにも「Native Lazyload」というGoogle製のプラグインも出ています。

現在は、Google Chromeのみのサポートですが、近くMicrosoft Edge、Safari、Firefoxなどのその他のブラウザでのサポートも進むと思われます。

この際に、たくさん画像があるページやサイトでは「loading=”lazy” 」属性の使用について検討してみてはいかがでしょうか?

使用方法

<img src="image.png" loading="lazy" alt="" width="200" height="200">
<iframe src="https://example.com" loading="lazy"></iframe>

下記の値が loading 属性ではサポートされています:

  • auto: デフォルトのブラウザ遅延読込動作で、属性を含めないのと動作は同じ。
  • lazy: Viewportから「計算された距離」に達するまで、リソースの読込を延期する動作。
  • eager: リソースがどこにあるかに関係なく、すぐにリソースを読み込む動作。

広告