🔖
ネイティブLazyLoadとは?
はじめに
本記事は、筆者による理解の復習・確認やアウトプットの練習のために書いております。
間違った解釈等ございましたら、ご連絡いただけますと幸いです。
前提
imgタグを使って実装すると起きる事象
- 画像読み込みが終わるまでブラウザが重くなり、画面操作に支障が出る
- ネットワークやサーバーの負荷が瞬間的にひっ迫する
- PageSpeedInsightsで低スコアになる
対処法
- スプライト画像を使う(複数の画像を1枚にまとめた画像)
- CDNを使う
- (自分のPCから一番近いサーバーからコンテンツをDLすることで高速化を図る技術)
- Expiresヘッダを設定する
- (コンテンツの有効期限を明確にし、
有効期限内はブラウザのキャッシュを利用することができる)
- (コンテンツの有効期限を明確にし、
Webフロント側で手軽に出来る対策
- LazyLoad(遅延読み込み)
ネイティブLazyLoadとは？
LazyLoadという「画像の読み込みを遅らせるためのテクニック」を
HTMLタグに加えるだけで使うことができる、一部ブラウザの標準機能。
通常のLazyLoadはJavaScriptのライブラリとして提供されているが、
HTML上で変更を加えるだけでLazyLoadが出来るのでネイティブLazyLoadと呼ばれている。
対応ブラウザはこちら
適用方法
<img src="~" loading="lazy" width="○○(px)" height="○○(px)">
loading属性の設定とwidth・height指定をする。
loading="lazy"
lazy-loadを必ず適用させる。
Viewport(スクリーンに見えるエリア)に画像が近づくと画像を読み込みする。
loading="eager"
lazy-loadを適用せずに、ページのロードと同時にコンテンツを読み込みする。
loading="auto"
lazy-loadするかどうかの判断をブラウザに任せる。
なぜWidthとHeightをつける必要があるのか？
CLSを防ぐため
Cumulative Layout Shift (CLS)とは、
読み込みの段階で予期しないレイアウトのズレがどのくらい発生したのかを表す指標。
WidthとHeightがなくても機能はするが、
レイアウトのズレを防止するためにも付けることが推奨されている。
数値が0.1を超えると改善が必要となる。
注意点
初めからビューポートに表示される画像とiframeには、ネイティブLazyLoadを使わないのが理想
- 最初から表示すべきなのに遅延読み込みが指定されていると、
ブラウザに余分な処理が必要になる。(Intersection Observerの介入)
不都合は生じないが、つけない方が良い。
参考・引用URL
Discussion