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: Chrome 147 adds loading attribute to audio/video behind flag browser-compat-data#29256
• Spec PR: Add support for video and audio element lazy-loading via the loading attribute 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-27 18:13:39)

[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!

[zcorpan]

The spec PR has now been merged.

[pepelsbey]

Looks good! Thank you 🙂

Just a small suggestion.

[tunetheweb]

Thanks @pepelsbey ! @hamishwillee suggested above we want for the BCD PR to be merged first, which is probably a good idea. I probably should have left this in draft until that was done so put that back. Hopefully that one should be merged soon.

[pepelsbey]

I changed the list of related PRs in the description to checklist. It usually helps to convey the message.

[scottjehl]

This looks great. Still in draft? Is there a timeline on when it'll merge to MDN? Thanks.

[tunetheweb]

BCD v7.3.9 was just released containing these changes. So think this is good to merge now!

If you could do the honours @hamishwillee or @pepelsbey ?

[pepelsbey]

Perfect! Thank you ❤️