Lazy loading for video and audio elements

Category: Multimedia
Type: New or changed feature
Status: Proposed (Chrome Proposed)
Intent stage: None

Breaking change: No
Enterprise impact: None
Spec maturity: Working draft
Web Platform Tests: Yes

WPT details: New Web Platform Tests are added with this implementation. Since the spec is not yet merged, tests are marked as tentative. Video element tests: - html/semantics/embedded-content/the-video-element/video-loading-attr-reflect.tentative.html - html/semantics/embedded-content/the-video-element/video-loading-lazy-in-viewport.tentative.html - html/semantics/embedded-content/the-video-element/video-loading-lazy-window-onload.tentative.html - html/semantics/embedded-content/the-video-element/video-loading-lazy-poster-preload.tentative.html - html/semantics/embedded-content/the-video-element/video-loading-lazy-to-eager.tentative.html - html/semantics/embedded-content/the-video-element/video-loading-lazy-load-when-visible.tentative.html - html/semantics/embedded-content/the-video-element/video-loading-eager.tentative.html Audio element tests: - html/semantics/embedded-content/the-audio-element/audio-loading-attr-reflect.tentative.html - html/semantics/embedded-content/the-audio-element/audio-loading-lazy-in-viewport.tentative.html - html/semantics/embedded-content/the-audio-element/audio-loading-lazy-load-when-visible.tentative.html - html/semantics/embedded-content/the-audio-element/audio-loading-lazy-to-eager.tentative.html

Summary

Adds the loading attribute to <video> and <audio> elements, allowing developers to defer media resource loading until the element is near the viewport using loading="lazy". This matches the existing lazy loading behavior for <img> and <iframe> elements, improving page load performance and reducing data usage. CL: https://chromium-review.googlesource.com/c/chromium/src/+/7511253

Motivation

Web developers frequently need to defer loading of video and audio resources to improve page load performance and reduce data usage, especially on pages with multiple media elements below the fold. Without native support, developers must implement custom JavaScript solutions using Intersection Observer to detect when media elements enter the viewport and then dynamically set the src attribute. This approach is error-prone, adds complexity, and cannot integrate with the browser's preload scanner. The loading attribute already exists for <img> and <iframe> elements, and developers expect the same declarative API for media elements. Native lazy loading allows the browser to optimize resource loading with network-aware thresholds, properly handle the interaction with autoplay and preload attributes, and avoid blocking window.onload for offscreen media.

Standards & signals

Specification: https://github.com/whatwg/html/pull/11980
Firefox: Positive — Implementation under way: https://phabricator.services.mozilla.com/D278547
Safari: Support — Implementation under way: https://github.com/WebKit/WebKit/pull/58220
Web developers: Positive
Tracking bug: https://issues.chromium.org/issues/469111735

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=html%2Fsemantics%2Fembedded-content%2Fthe-video-element%2Fvideo-loading-attr-reflect
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+Lazy%20loading%20for%20video%20and%20audio%20elements
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=Lazy%20loading%20for%20video%20and%20audio%20elements
Baseline status: https://webstatus.dev/?q=Lazy%20loading%20for%20video%20and%20audio%20elements

Samples: https://scottjehl.com/posts/lazy-media

Explainers: https://scottjehl.com/posts/lazy-media

View on chromestatus.com