Lazy-load Tag Helper

Overview

The Lazy-load Tag Helper generates <img>, <iframe>, or <video> markup with the right loading="lazy", decoding="async", and fetchpriority attributes — plus the explicit width/height pair that prevents layout shift. Pick the element type, fill in the source and dimensions, and copy a tag that defers loading until the element nears the viewport.

Useful for performance engineers and front-end developers learning how to lazy-load images natively or how to defer iframe loading without JavaScript. Reach for it when chasing Core Web Vitals scores, particularly Largest Contentful Paint and Cumulative Layout Shift improvements.

How it works

The HTML Living Standard adds loading="lazy" on <img> and <iframe>, deferring the network fetch until the element approaches the viewport (typical threshold is several screens away — browsers tune this). decoding="async" lets the browser decode the image off the main thread. fetchpriority="high" or "low" adjusts how aggressively the network layer schedules the request, useful for hero images that should load first.

For <video>, set preload="metadata" (or none) to skip downloading the body until play, and prefer <source> children with type so the browser only loads the format it can decode.

Examples

• A below-the-fold image → <img src="/img.jpg" loading="lazy" decoding="async" width="800" height="600" alt="...">.
• A YouTube embed → <iframe src="..." loading="lazy" width="560" height="315" allowfullscreen></iframe>.
• A hero image (do not lazy-load) → <img src="/hero.jpg" fetchpriority="high" width="1200" height="630" alt="...">.
• A video with deferred body → <video controls preload="metadata" poster="..."><source src="..." type="video/mp4"></video>.

FAQ

Should I lazy-load the hero image?

No. The Largest Contentful Paint element should load eagerly with fetchpriority="high". Lazy-loading delays it and hurts LCP scores.

Why specify width and height?

Browsers need the intrinsic ratio to reserve space, which prevents layout shift when the image arrives. Without these, content reflows as images load — the CLS metric punishes this.

Is native lazy-loading better than IntersectionObserver?

For typical use, yes — native is simpler, smaller, and gets the threshold right per browser heuristics. IntersectionObserver still wins when you need custom logic (preload on hover, fade-in animation).

Does loading="lazy" work for background-image?

No. CSS background images do not support lazy-loading natively. Use an <img> and position it instead, or load the background via JavaScript.

Try Lazy-load Tag Helper