v148 · HTML

loading="lazy" for Video & Audio

The loading="lazy" attribute now works on <video> and <audio> — deferred loading until the element nears the viewport, with zero JavaScript required.

concepts

  1. Scroll Detector

    A tall gallery of video elements. Those above the fold have loading="eager"; those below have loading="lazy". A live panel shows which elements have triggered loadstart — watch them activate as you scroll.

  2. Performance Compare

    Side-by-side: the old approach (IntersectionObserver + JavaScript) vs. the new loading="lazy" attribute. Same result, dramatically less code.

  3. Lazy Gallery

    A 12-item media gallery mixing video and audio elements, all marked loading="lazy". Watch the load counter tick as each item enters the viewport, and toggle lazy vs. eager to see the bandwidth difference with a live "saved MB" counter.

  4. Bandwidth Savings Lab

    A simulated news feed with 12 video and audio elements, a live network budget meter, and a network throttle slider (2G/3G/4G/Wi-Fi). Toggle loading="lazy" globally and watch the budget drop. A savings calculator shows bandwidth saved, CO₂ equivalent, and time saved on 3G. An element table shows load state, estimated size, viewport distance, and priority for each element.

  5. Network Waterfall

    Configure a page with 3–10 media elements and a viewport size, then run the simulated load. A colour-coded waterfall chart shows which requests fire at page start versus which are deferred until scroll. A summary quantifies the bandwidth saved and the percentage reduction in initial media bytes.

why it shipped

Lazy loading for <img> shipped in Chrome 76 (2019) and for <iframe> in Chrome 77. Video and audio — the next obvious candidates — required developers to implement their own deferred loading via IntersectionObserver: observe the element, set src only when it enters the viewport, then disconnect the observer. This pattern is well-understood but verbose, and it's easy to get wrong (e.g. not disconnecting the observer, or triggering load too late). The native loading attribute brings the same declarative API that exists for images and iframes, letting the browser optimise the loading threshold automatically based on connection speed and scroll velocity.

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗