Add support for video and audio element lazy-loading via the loading attribute by scottjehl · Pull Request #11980 · whatwg/html

scottjehl · 2025-12-02T18:27:08Z

Specify support for the loading attribute for the video element and audio element using similar conventions to img and iframe, where the attribute already has precedent. Loading has possible values of eager and lazy. When a media element's loading attribute value is lazy, loading of any video or poster image data, as well as autoplay playback, will defer until layout is known and the video is in the viewport.

Note Jan 22, 2026: Broadening PR to include Audio Element support.

Fixes #10376
Fixes #6636

At least two implementers are interested (and none opposed):
- Mozilla/Gecko Postion: Positive Add support for video element lazy-loading via the loading attribute mozilla/standards-positions#1325
- WebKit Position: Positive Add support for video and audio element lazy-loading via the loading attribute WebKit/standards-positions#586
- Chromium: Add support for video and audio element lazy-loading via the loading attribute #11980 (comment)
Tests are MERGED with tentative status:
- Web Platform Tests for HTML video and audio element lazy loading via the loading attribute web-platform-tests/wpt#57051
- PR to remove tentative when this lands Change HTML Video and Audio Lazy Loading Tests from Tentative to Non-Tentative web-platform-tests/wpt#57754
Implementation bugs are filed:
- Gecko: https://bugzilla.mozilla.org/show_bug.cgi?id=2005072
  - Firefox patch in Review https://phabricator.services.mozilla.com/D278547
- WebKit: https://bugs.webkit.org/show_bug.cgi?id=303995
  - WebKit Patch in Review: Implement HTML video and audio element lazy-loading via the loading attribute WebKit/WebKit#58220
- Chromium: https://issues.chromium.org/issues/469111735 https://chromestatus.com/feature/5200068565139456
  - Chromium patch MERGED behind a flag: https://chromium-review.googlesource.com/c/chromium/src/+/7511253
MDN issue is filed: Document HTMLMediaElement (Video & Audio) Lazy Loading (Experimental) mdn/mdn#809
The top of this comment includes a clear commit message to use.

(See WHATWG Working Mode: Changes for more details.)

/acknowledgements.html ( diff )
/indices.html ( diff )
/media.html ( diff )
/urls-and-fetching.html ( diff )

Specify support for the loading attribute for video using similar conventions to img and iframe, where the attribute has precedent. It has possible values of eager and lazy. When the loading attribute value is lazy, loading of any video or poster image data, as well as autoplay playback, must defer until layout is known and the video is in the viewport. This commit contains examples for how the loading attribute should take precedence over the preload, poster, and autoplay attributes. These were informed by experiments with local patch implementations to several user agents.

annevk · 2025-12-04T07:46:43Z

cc @whatwg/media

foolip · 2025-12-09T10:17:28Z

This direction makes sense to me, but I'm not personally able to make a commitment to implement in Chromium.

@zcorpan I think you've mentioned this feature, perhaps you have feedback?

Add detail for video element lazy loading behavior when loading state is lazy. This involves returning early to prevent poster and video data loading and defining resumption steps to resume when loading state changes to eager. Also includes notes about autoplay eligibility and precedence over the preload attribute.

Adjust language of this statement about precedence of the loading attribute over the preload attribute so that it reiterates a fact.

Remove mention as audio is not mentioned in this proposed attribute addition

…g attribute These tests support the proposal for the addition of a loading attribute on the video element, designed to enable lazy-loading for video and poster data. HTML Standard PR here whatwg/html#11980 Co-authored-by: Zach Lysobey <zlysobey@squarespace.com> Co-authored-by: Brad Frost <bfrost@squarespace.com> Co-authored-by: Credo Duarte <cduarte@squarespace.com>

scottjehl · 2026-01-07T22:24:02Z

Added and linked up a PR with web platform tests web-platform-tests/wpt#57051

small note: it says my entity is unverified above, but I think it's registered correctly now and needs a check

zcorpan · 2026-01-15T15:57:26Z

@scottjehl I tried to push changes to this branch but was denied. Can you enable "Allow edits from maintainers"?

scottjehl · 2026-01-15T16:07:02Z

@zcorpan I looked into how to do that and it sounds like the option may not be available for forks made by an organization, such as this one. Any other way we can help? Perhaps if the changes are in a public fork of yours I could pull them from there?

zcorpan · 2026-01-16T10:55:58Z

@scottjehl OK, pushed to https://github.com/zcorpan/html/tree/video-loading-attribute

scottjehl · 2026-01-16T12:40:00Z

@zcorpan looked great, thanks. Merged here!

scottjehl · 2026-03-12T15:24:51Z

Made a PR with 2 tests to support the recent revisions to this proposal about load() method precedence over the loading attribute. web-platform-tests/wpt#58455

scottjehl · 2026-03-12T16:08:10Z

Comment on the Webkit standards position ticket WebKit/standards-positions#586 (comment) from Igalia :

We (Igalia) support this and propose to mark as supported and close.

zcorpan

LGTM % comment above.

scottjehl · 2026-03-12T21:41:34Z

Thanks @zcorpan !

scottjehl · 2026-03-17T14:17:15Z

Small update: MDN's content appears to be ready, pending this proposal moving to Stage 4. mdn/content#43434

Are there any steps I can help with on my end at this point? Thank you!

zcorpan · 2026-03-23T15:45:45Z

This now has support from Gecko, WebKit, and Chromium, as far as I can tell. All boxes are ticked. I think this is ready for stage 4, i.e., be merged.

…o elements. r=dom-core-reviewers,media-playback-reviewers,webidl,layout-reviewers,smaug,emilio,pehrsons,alwu Add support for the `loading` attribute on <video> and <audio> elements, mirroring the existing behavior for <img> and <iframe>. The attribute accepts `eager` (default) and `lazy`. When `loading="lazy"` is set, loading of the media resource and poster image, as well as autoplay, is deferred via an intersection observer until the element is near the viewport. Gated behind the media.lazy_loading.enabled pref. Spec: https://html.spec.whatwg.org/multipage/media.html#attr-media-loading Spec PR: whatwg/html#11980 Co-authored-by: Scott Jehl <sjehl@squarespace.com> Differential Revision: https://phabricator.services.mozilla.com/D278547

…o elements. r=dom-core-reviewers,media-playback-reviewers,webidl,layout-reviewers,smaug,emilio,pehrsons,alwu,keithamus Add support for the `loading` attribute on <video> and <audio> elements, mirroring the existing behavior for <img> and <iframe>. The attribute accepts `eager` (default) and `lazy`. When `loading="lazy"` is set, loading of the media resource and poster image, as well as autoplay, is deferred via an intersection observer until the element is near the viewport. Gated behind the media.lazy_loading.enabled pref. Spec: https://html.spec.whatwg.org/multipage/media.html#attr-media-loading Spec PR: whatwg/html#11980 Co-authored-by: Scott Jehl <sjehl@squarespace.com> Differential Revision: https://phabricator.services.mozilla.com/D278547

First page of the weekly MDN-upgrade backlog (133 old-shape pages). The old page was static prose with a hand-written support table, no Baseline banner, no live example, and plain-text citations. In-place upgrade, identity and lede preserved: - Baseline banner from webstatus.dev (loading-lazy-media, Baseline 'limited': Chrome/Chrome Android 150, Edge 150, no Firefox/Safari). - Formal Syntax section: keyword/state grammar from the merged HTML Standard (whatwg/html#11980 has landed since the page was written; all spec links re-pointed from the PR to media.html#attr-media-loading) plus the verbatim IDL line ([CEReactions] attribute DOMString loading; on HTMLMediaElement) and the limited-to-known-values reflection contract. - Real per-version BCD compat table (html.elements.video.loading / audio.loading): Chrome 150 full, 148-149 partial (not for <source>, crbug 514611050), Edge/Chrome Android via mirror + webstatus dates, Firefox/Safari not-supported rows with tracking bugs + positions. - Live showcase demo embedded (scroll-detector concept, HEAD-checked 200); all five live concept routes linked; stale '(when built)' text removed. - Warn-block reframed honestly: documents the v147 dev-trial stage with the real flag (LazyLoadVideoAndAudio) and the shipped 148/150 timeline. - Behavior/lifecycle, invalid-value defaults, security/privacy sections added; every citation now links its artifact directly. - New reference-contract.json (implementation-sufficient, 2 items x 9 dimensions) and _questions.json (guidanceConsulted: css-layout, accessibility, optimize-image-priority). Verified: suite 19 pass / 0 fail / 5 blocked; responsive matrix desktop:ok mobile:ok (screenshots read); validate-artifacts + test-reference-contract + check-routes PASS. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TxJjQpAcTzXzR2XW5TVJQp

This was referenced Dec 3, 2025

Add support for video and audio element lazy-loading via the loading attribute WebKit/standards-positions#586

Closed

Add support for video element lazy-loading via the loading attribute mozilla/standards-positions#1325

Closed

annevk added addition/proposal New features or enhancements needs implementer interest Moving the issue forward requires implementers to express interest topic: media needs tests Moving the issue forward requires someone to write tests labels Dec 4, 2025

foolip reviewed Dec 9, 2025

View reviewed changes

Comment thread source Outdated

zcorpan reviewed Dec 11, 2025

View reviewed changes

Comment thread source Outdated

scottjehl added 2 commits December 11, 2025 11:34

Fix video element loading attribute precedence wording

33a79cf

Adjust language of this statement about precedence of the loading attribute over the preload attribute so that it reiterates a fact.

Fix mistaken attribute addition for audio interface

c495816

Remove mention as audio is not mentioned in this proposed attribute addition

scottjehl mentioned this pull request Jan 7, 2026

Web Platform Tests for HTML video and audio element lazy loading via the loading attribute web-platform-tests/wpt#57051

Merged

ryantownsend mentioned this pull request Jan 10, 2026

prefers-reduced-data media query web-platform-dx/developer-signals#314

Open

zcorpan requested changes Jan 14, 2026

View reviewed changes

Comment thread source Outdated

Comment thread source Outdated

Comment thread source Outdated

Comment thread source Outdated

zcorpan removed needs implementer interest Moving the issue forward requires implementers to express interest needs tests Moving the issue forward requires someone to write tests labels Jan 14, 2026

apply suggested edits from @zcorpan

f149247

scottjehl requested a review from zcorpan January 14, 2026 17:41

zcorpan added 2 commits January 15, 2026 16:51

Nits

e6c8d0d

Run specfmt

65e2159

zcorpan reviewed Jan 16, 2026

View reviewed changes

Comment thread source Outdated

scottjehl mentioned this pull request Mar 12, 2026

Lazy loading video & audio: test load method precedence over loading attribute in media elements web-platform-tests/wpt#58455

Open

scottjehl mentioned this pull request Mar 12, 2026

Upcoming WHATNOT meeting on 2026-03-12 #12244

Closed

cwilso added stage: 3 Committed and removed stage: 2 Iteration labels Mar 12, 2026

zcorpan reviewed Mar 12, 2026

View reviewed changes

Comment thread source Outdated

zcorpan approved these changes Mar 12, 2026

View reviewed changes

remove extraneous check in the posterResumptionSteps section

0bc407f

This was referenced Mar 13, 2026

Chrome 147 adds loading attribute to audio/video behind flag mdn/browser-compat-data#29256

Merged

Add loading attribute for audio and video mdn/content#43434

Merged

This was referenced Mar 18, 2026

Upcoming WHATNOT meeting on 2026-03-19 #12275

Closed

Propose addition to org attribution section for contributions to media lazy loading #12292

Closed

zcorpan merged commit 489e0b6 into whatwg:main Mar 23, 2026
2 checks passed

zcorpan added stage: 4 Standard and removed stage: 3 Committed labels Mar 23, 2026

tunetheweb mentioned this pull request Mar 26, 2026

Lazy load media 2 mdn/browser-compat-data#29353

Closed

This was referenced May 21, 2026

HTML Video Poster Image: Enable Responsive Images and ALT Text for Poster #10378

Open

Lazy loading video element poster attribute #6636

Closed

github-actions Bot mentioned this pull request May 27, 2026

Lazy-loading media web-platform-dx/developer-signals#824

Closed

coderabbitai Bot mentioned this pull request May 29, 2026

Optimise website and update data rahulc0dy/vault#11

Merged

Uh oh!

Conversation

scottjehl commented Dec 2, 2025 • edited by pr-preview Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

annevk commented Dec 4, 2025

Uh oh!

Uh oh!

foolip commented Dec 9, 2025

Uh oh!

Uh oh!

scottjehl commented Jan 7, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

zcorpan commented Jan 15, 2026

Uh oh!

scottjehl commented Jan 15, 2026

Uh oh!

zcorpan commented Jan 16, 2026

Uh oh!

scottjehl commented Jan 16, 2026

Uh oh!

Uh oh!

scottjehl commented Mar 12, 2026

Uh oh!

scottjehl commented Mar 12, 2026

Uh oh!

Uh oh!

zcorpan left a comment

Choose a reason for hiding this comment

Uh oh!

scottjehl commented Mar 12, 2026

Uh oh!

scottjehl commented Mar 17, 2026

Uh oh!

zcorpan commented Mar 23, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

10 participants

scottjehl commented Dec 2, 2025 •

edited by pr-preview Bot

Loading