imgタグのloading属性(lazy)の使い方と超簡単に実装する方法

loading属性とは

imgタグやiframeタグをHTMLコード内に追記させるだけで遅延ロードを実装させることができる属性。

<!-- loading="lazy" を 追加する -->
<img src="foo.jpg" loading="lazy">

<!-- 現在使用できるのはimgとiframeだけ -->
<iframe src="bar.html" loading="lazy">

対応しているブラウザはまだ少ないが、未対応のブラウザはloading属性を無視するだけなので読み込み時間の短縮のために積極的に使用したほうが良いだろう。

HTMLのすべてのimgタグにloading="lazy"を追加して遅延ロードを実装させたいのであれば正規表現による置換を使えば超簡単に実装できる。

検索: <img ([^>/]+(?:(?:.|\r|\n)*?))(\/?>)
置換: <img $1 loading="lazy"$2

JavaScriptによるLazy Loadだとファーストビューにある画像も遅延ロードの対象にしてしまうと画像の表示が遅れてしまう。

しかしloading="lazy"だとファーストビューに画像があっても画像表示が遅延することはないので安心だ。

WordPressならNative LazyloadというGoogle製のプラグインをインストールするだけでimgタグにloading="lazy"が追加されるようになる。

Native Lazyloadには1つ星の悪い評価もあるが、これはリリースして間もない頃に画像が正しく表示できないという不具合があったためで、現在はアップデートされて改善済みだ。

ちなみにiwb.jpのWordPressにもインストールされている。

スマホのChromeだとloading="lazy"が効かないと誤解されることがあるが、これは縦に長いスマホの場合はだいたい3000px以上の下の画像でないとloading="lazy"の対象にならないことによる誤解だ。

どのくらい下の画像からloading="lazy"の遅延ロードで読み込むかはブラウザ依存でこちら側では設定できないので注意。