皆さん、こんにちは。

業務改善を行うIT・業務コンサルタント、高橋です。

冒頭に『それが必要なくなるかもしれません』という書き方をしましたが、実際にはブラウザが『Google Chrome 76』であれば『Lazy Load』や『lazysizes』といったものは必要なくなりました。

『Google Chrome 76』において『ネイティブlazy-load』をサポートするようになったのです。

JSなしで画像が遅延読込み可能に

『ネイティブlazy-load』はどうやら開発版のGoogle Chrome（Canary）で試験的に運用されていたようで、今回『Google Chrome 76』から正式にサポートされるようになりました。

ブラウザでサポートしてくれますので『<img>タグ』に『loading属性』を追加すれば機能してくれます。

『<img>タグ』だけでなく『<iframe>タグ』でも『loading属性』は機能します。

例えば、

<img src=”example.jpg” alt=”例” height=”500″ width=”500″>というコードの場合

<img src=”example.jpg” loading=”lazy” alt=”例” height=”500″ width=”500″>

とするだけです。

この『loading属性』は『lazy』を含めて3種類あります。

『loading=”lazy“』：lazy-loadを必ず適用し、画像が近づくとそれを読み込む。

『loading=”eager“』：lazy-loadを適用せず、ページと同時に画像を読み込む。

『loading=”auto“』：lazy-loadするかはブラウザに判断を任せる。

また、値がなく属性だけの場合は『auto』が適用されるとなっています。

Google Chromeを使っているユーザーは多いですから、JavaScriptを外してこのパターンに変更してしまっても良いのかもしれません。

ちなみに、SEOへの影響はないようです。

Googleが行っていることなので影響があっても困りますが。。。