Lazy Load Checker
Paste any page HTML and audit every image, iframe and video — which are lazy-loaded, which are eager, which are missing loading attributes. Flags the hero-is-lazy mistake that tanks Core Web Vitals.
Page HTML
Hero / above-fold count
How many images at the top of the document are above the fold on a typical screen? These should be eager. Everything after should be lazy.
Usually 1 (the LCP image). Product listing grids may have 2–3.
Paste page HTML
Paste source containing <img>, <iframe> and <video> tags. The tool checks loading, fetchpriority, decoding, and width/height attributes.
How to Set Loading Attributes for Best Core Web Vitals
Four rules that unlock the biggest LCP and INP wins on most sites.
Never lazy-load your LCP image
The biggest image above the fold is usually your LCP element. Lazy-loading it delays LCP by 200–500ms — a guaranteed Core Web Vitals regression. Use loading="eager" explicitly or omit the attribute (eager is the default).
Add fetchpriority="high" to the hero
Browsers don't know which image is most important. fetchpriority="high" tells them. Pair with loading="eager" and a <link rel="preload"> hint for the best possible LCP.
Lazy-load every below-fold image
loading="lazy" on everything below the first viewport saves 40–60% of initial transfer on content-heavy pages. Modern browsers handle it natively — no JavaScript library needed.
Always lazy-load iframes
YouTube, Google Maps, Twitter timelines, ad iframes — each can add 500KB–2MB on first paint. Add loading="lazy" to every <iframe> unless it's the primary content above the fold.
Loading Attributes Reference
What each value does and where to use it.
loading="eager"
Browser loads the resource immediately. Default behaviour — use explicitly on hero/LCP images for clarity.
loading="lazy"
Browser defers loading until the element is near the viewport. Use on below-fold images and all iframes.
fetchpriority="high"
Bumps the resource up the browser's priority queue. Best paired with LCP images and critical CSS.
fetchpriority="low"
Deprioritises the resource without deferring it. Useful for images that will be visible but aren't critical.
decoding="async"
Decode image off the main thread. Reduces jank during scrolling. Pair with loading="lazy" for below-fold content.
decoding="sync"
Forces synchronous decoding. Only useful for LCP-critical images where you can't afford decode delay.
<link rel="preload">
Tell the browser to fetch a critical asset early. Combine with fetchpriority="high" on hero images for the biggest LCP win.
srcset + sizes
Responsive images — browser picks the right size variant. Hugely reduces bytes on mobile. Works with lazy loading.
What Breaks When Loading Attributes Go Wrong
The performance regressions we see most often in audits.
LCP regressions
Wasted bandwidth
CLS (layout shift)
INP / scrolling jank
Lazy Loading FAQ
Should all images be lazy-loaded?
No. Your hero / LCP image should use loading="eager" (or skip the attribute) — lazy-loading the LCP image delays it by 200–500ms and tanks Core Web Vitals. Only lazy-load below-the-fold images.
Does loading="lazy" work in all browsers?
Yes — since 2022, every modern browser supports native lazy loading. IE11 is the only exception, and it gracefully falls back to normal loading.
What about fetchpriority="high" on the hero?
Strongly recommended. Tell the browser which image is most important. Pair with loading="eager" and a preload hint for the biggest LCP wins.
Is my HTML sent anywhere?
No. Everything runs in your browser via the native DOMParser. Nothing is uploaded or stored.