Web development and performance
What is Lazy loading?
Lazy loading defers fetching an image or iframe until it is near the viewport, saving bandwidth on content the visitor may never scroll to. Applied correctly it is free performance; applied to the hero image it directly damages Largest Contentful Paint.
Also called: loading=lazy · deferred loading
The rule
- Lazy-load everything below the fold
- Never lazy-load the LCP element — usually the hero image
- Never lazy-load anything in the first viewport at any breakpoint
- Set width and height regardless, or you have traded one metric for another
How it goes wrong
A plugin or theme applies loading="lazy" to every image site-wide, including the hero. The browser now waits to discover it is needed before requesting it, adding a full round trip to the metric that matters most.
The counterpart worth knowing
fetchpriority="high" on the LCP image tells the browser to prioritise it. The pair — eager and high priority above the fold, lazy below — is most of image performance on a content page.
Where this is covered in depth
A definition can only go so far. Core Web Vitals, and the order that actually reduces them covers this properly — 3 minutes, free, no email required.
Who wrote this
Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada and Pakistan. These definitions come from client work rather than from a content brief — where an entry describes a mistake, it is usually one found on a real site. More about how I work.