Add loading attribute for audio and video

[tunetheweb]

Description

We're adding loading=lazy to <audio> and <video> attributes!

Coming to Chrome in 147 (behind a flag): https://chromestatus.com/feature/5200068565139456

FYI: @scottjehl @hjanuschka

Motivation

More details:

https://scottjehl.com/posts/lazy-media/ (with a demo of it working)
https://www.januschka.com/chromium-video-lazy-loading.html

Additional details

Test results and supporting details
Audio:
https://wpt.fyi/results/html/semantics/embedded-content/the-audio-element?label=experimental&label=master&aligned

Video:
https://wpt.fyi/results/html/semantics/embedded-content/the-video-element?label=experimental&label=master&aligned

https://chromestatus.com/feature/5200068565139456

Implementation bugs:

• Chrome: https://crbug.com/469111735 -
• Firefox: https://bugzil.la/2005072 (being implemented at: https://phabricator.services.mozilla.com/D278547)
• Safari: https://webkit.org/b/303995 (being implemented at: Implement HTML video and audio element lazy-loading via the loading attribute WebKit/WebKit#58220)

Related issues and pull requests

Makes progress on: mdn/mdn#809

BCD PR: mdn/browser-compat-data#29256
Spec PR (almost ready to merge): whatwg/html#11980

[github-actions]

Preview URLs (14 pages)

• /en-US/docs/Learn_web_development/Extensions/Performance/Best_practices
• /en-US/docs/Learn_web_development/Extensions/Performance/HTML
• /en-US/docs/Learn_web_development/Extensions/Performance/Multimedia
• /en-US/docs/Learn_web_development/Extensions/Performance/Perceived_performance
• /en-US/docs/Web/API/HTMLIFrameElement/loading
• /en-US/docs/Web/API/HTMLImageElement/loading
• /en-US/docs/Web/API/HTMLImageElement
• /en-US/docs/Web/API/HTMLMediaElement/loading
• /en-US/docs/Web/API/HTMLMediaElement
• /en-US/docs/Web/API/Window/load_event
• /en-US/docs/Web/HTML/Reference/Elements/audio
• /en-US/docs/Web/HTML/Reference/Elements/img
• /en-US/docs/Web/HTML/Reference/Elements/video
• /en-US/docs/Web/Performance/Guides/Lazy_loading

Flaws (2)

Note! 13 documents with no flaws that don't need to be listed. 🎉

Found an unexpected or unresolvable flaw? Please report it here.

URL: /en-US/docs/Web/API/HTMLMediaElement
Title: HTMLMediaElement
Flaw count: 2

• macros:
  • Macro domxref produces link /en-US/docs/Web/API/MediaController which doesn't resolve
  • Macro domxref produces link /en-US/docs/Web/API/MediaController which doesn't resolve

External URLs (1)

URL: /en-US/docs/Web/Performance/Guides/Lazy_loading
Title: Lazy loading

• https://web.dev/articles/iframe-lazy-loading (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2026-03-17 15:01:02)

[hamishwillee]

Thanks @tunetheweb . I'd prefer to wait until BCD data is accepted before we merge this. Otherwise it is not obvious that this feature is not actually avaiable on any browser.

[hamishwillee]

A few nits added but this looks good. Won't mark as approved until BCD goes in, because otherwise someone is likely to merge prematurely.

[tunetheweb]

Thanks Hamish! Hopefully that Spec PR gets merged soon and the rest of these PRs can fall like dominoes 😁

Also happy to convert this PR to draft in the meantime if that’s easier for you all.

[hamishwillee]

Thanks Barry. Yeah, I'll press that convert to draft button now.

If you don't mind doing this in two phases you can probably get this in without waiting for the spec. Essentially BCD could go in without the spec and this would be "non-standard" - and then this PR could merge. Then when the spec goes in you'd update BCD and the docs would automatically update this to no longer be non-standard.

[tunetheweb]

The spec PR is all but approved IIUC. To be honest I expected the review of both my PRs to take longer and that to be merged by the time this was finished! But you’re all too efficient! 😁

So will give it another few days. Of it drags on and the Chrome implementation lands then will reconsider as quite like having things documented when available. Then again if marked as “non-standard” then it might put some people off anyway!