v148 · HTML · Performance
Network Waterfall
Chrome 148 adds loading="lazy" to <video> and <audio>. Configure a page with multiple media elements, run the simulated load, and see how eager vs lazy loading affects the network waterfall — which requests fire at page load vs when the element enters the viewport.
Page configuration
Media elements
6 elements
Viewport fits
2 in viewport
Avg file size
Network waterfall
Eager (loading="eager" / default)
Lazy — loads at page start (in viewport)
Lazy — deferred (out of viewport)
Click "Run simulation" to generate the waterfall.
Elements with
loading="lazy" that are out of viewport at page load will not send their network request until the user scrolls them into view — saving initial bandwidth and improving page load time.<!-- Before Chrome 148: video always loaded immediately -->
<video src="clip.mp4" preload="metadata"></video>
<!-- Chrome 148: defer loading until element is in viewport -->
<video src="clip.mp4"
loading="lazy"
preload="metadata"></video>
<audio src="track.mp3"
loading="lazy"
controls></audio>
<!-- loading="eager" (default) starts fetch immediately -->
<video src="hero.mp4" loading="eager" autoplay muted></video>
see also
- Scroll Detector — IntersectionObserver timing
- Performance Compare — eager vs lazy metrics
- Lazy Gallery — media gallery demo
- Bandwidth Savings Lab — bandwidth calculator
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗