Chrome 148 · HTMLMediaElement loading

Lazy loading <video> and <audio>

Chrome 148 adds loading="lazy" to media elements, so below-the-fold video and audio can delay network work until they are near the viewport. This protects LCP by keeping early bandwidth, CPU, and connection pressure focused on the actual hero content.

Checking browser support…

Simulated LCP region

The above-the-fold content should win the loading race.

Product pages, landing pages, long-form posts, and course pages often have useful but non-critical media below the fold. Lazy media keeps those resources from competing with the LCP candidate.

Read the article
waiting… Largest Contentful Paint

Eager video near the top

This media is intentionally eager, so it can request data immediately.

Eager audio near the top

This audio can also start fetching before the user has shown intent.

What to watch in DevTools

  1. Open DevTools → Network and disable cache.
  2. Reload this page. The eager media should appear in the log early.
  3. Do not scroll. In Chrome 148+, the lazy video/audio below should wait.
  4. Scroll near the bottom. Lazy media requests should appear as they approach the viewport.

Below the fold

Lazy video

loading="lazy" lets Chrome defer fetching this video until it is near view.

Below the fold

Lazy audio

loading="lazy" works for audio too, useful for lists of clips or podcast previews.

Live instrumentation

Media resource timing log

This uses PerformanceObserver. Cross-origin transfer sizes may be hidden, but request timing/name still shows when each media request starts.