Chrome76にてLazyloadネイティブサポート
Chrome76、ついにloading属性実装
Webサイトにおいて画像は非常に重要な役割を果たしていて、画像の高解像度化と共に利用される枚数は今後も増えていく傾向にあります。
画像の使用頻度と高解像度化に比例して、Webサイトは画像の読み込みに多くの時間を割くことになります。
画像の読み込みに時間がかかるほどサイトはユーザーフレンドリーではなくなり、ネットワークやサーバーへの負荷も増すことから、ページロード時に画像は読み込まず、表示したいタイミングでロードを開始する「Lazyload」という技術が開発されました。
その「Lazyload」ですが、今までは外部スクリプトを読み込んで実行していたのですが、今ではChrome76の他一部のブラウザでネイティブ対応となっていますので、実装方法をメモしておきます。
Lazyload対応状況
対応ブラウザは2020年5月の段階で以下です。Safariの未サポートが残念です。
loading属性
loading属性は3つの値をサポートします。
| 属性 | 挙動 |
|---|---|
| lazy | 遅延ロードに適した値です。 |
| eager | 遅延ロードには適してません、すぐにロードする値です。 |
| auto | 遅延ロードするかどうかをブラウザに委ねます。 |
loading属性の実装例
loading属性はiframeとimg（srcsetおよびpicture内も含む）で機能します。
実装例
<img src="●●.jpg" loading="lazy" alt=".."><iframe src="●●.html" loading="lazy"></iframe>まとめ
現時点で対応プラウザが少ないとはいえ導入コストは非常に低いですし、Chromeの国内シェアは50%を超えているので、迷ったらとりあえず入れておくのが吉かもしれませんね。
WebブラウザシェアランキングTOP10（日本国内・世界）
https://webrage.jp/techblog/pc_browser_share/
※ページ全体にonloadイベントがあるページでは要注意です。
Chromeのloading属性は、指定しなくてもデフォルトで”lazy”の挙動となりうる
https://qiita.com/spaceonly/items/9d9b3fe46e43524a535a