v147 · Performance · Media
Media Lazy Load Savings Estimator
Configure a page with multiple <video> and <audio> elements and see how many bytes loading="lazy" saves by deferring off-screen elements. Includes a live IntersectionObserver demo showing lazy loading in action.
Page configuration
25%
live lazy-load demo
Simulated media grid — boxes start as "not loaded" and turn green when they enter the viewport. Scroll down to trigger loading.
invalid value fallback
The estimator assumes valid loading="lazy" markup. This check shows what happens when authoring accidentally uses a non-standard value: the IDL property falls back to eager, so the media should be budgeted as immediately loaded.
Click the button to test invalid media loading values.
the HTML
<!-- Chrome 147+: lazy loading for video and audio -->
<video src="clip.mp4" loading="lazy" controls></video>
<audio src="track.mp3" loading="lazy" controls></audio>
<!-- Previously, only images supported loading="lazy" -->
<img src="photo.jpg" loading="lazy" alt="">
references
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗