1 of 6

LazyLoad

sclittle@chromium.org

2 of 6

LazyLoad

Network and computation resources are used for content that the user never sees

  • E.g., ads and images near the bottom of the page

This wastes data, wastes memory, and competes with visible content, slowing it

​

3 of 6

LazyLoad

Defer some below the fold content

  • Cross-origin iframes
    • Leave alone iframes that are likely for analytics or communication (e.g. display:none, 0x0)
  • Images
    • Load in a cheap placeholder with same dimensions to preserve page layout and reduce jank
    • Use same mechanism that's used for Client-side LoFi

From lab benchmarks (230 mobile URLs, cold cache, no scrolling):

  • 34.6% median data savings
  • 18.4% faster median SpeedIndex

4 of 6

LazyLoad

Load deferred content once the user scrolls near it, using IntersectionObserver

  • Content should almost always be finished loading before it's visible
  • Exact distance will depend on factors like current network quality
  • Tune through experimentation

Deferred element OnLoad events will wait for the lazy load to complete

Document OnLoad events will not wait for deferred content

Plan is to add an HTML attribute to allow developers to control what gets lazyloaded.

5 of 6

Current Status

  • Ran benchmarks against prototype
  • Design docs written
  • Sent Intent to Implement
  • Partial lazy frame loading support landed behind a flag

Aiming to have a dev-channel experiment for lazy frames in M68

6 of 6

Thanks!

Team: sclittle@chromium.org, rajendrant@chromium.org, bengr@chromium.org