lighthouseの資料を読み込む【Offscreen Images】
TL;DR
- 画像は必要になったタイミングで読み込もう
- そのためには、IntersectionObserverが便利だよ
Why the audit is important
Offscreen imageは、フォールドの下に現れる画像である。 usersはoffscreenの画像は見れないので、offscreenの画像を最初のページ読み込み時において、DLする理由はない。言い換えると、offscreenの画像読み込みを延期することは、pageのload timeと操作可能になる時間を短縮できることを表している。
How to pass the audit
この監査を通すためには、最初のリクエストにおいては、トップページの表示されている部分のみDLすること。この戦略を適用することによって、あなたのJS、HTML、CSSは速度を上げることができる。 Critical Rendering Pathを読んでください
offscreen imagesのlazy-loadするタイミングを賢く決定するために、IntersectionObserverの利用を検討してください。
例えば、とても長いページの下の方に、いくつか画像があると仮定する。IntersectionObserverを使うと、あなたはスクロールして必要になった画像のみを読み込むことができる。
