今でも画像の遅延読み込みには『jQueryライブラリ』の『Lazy Load』や『lazysizes』、『WordPress』においても複数のプラグインが提供されていますが、それが必要なくなるかもしれません。
皆さん、こんにちは。
業務改善を行う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が行っていることなので影響があっても困りますが。。。
