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
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.
Samples: https://scottjehl.com/posts/lazy-media
Explainers: https://scottjehl.com/posts/lazy-media