Lazy loading is the technique of waiting to load resources until they are needed, usually when they are close to entering the viewport. Browsers support it natively for images and iframes with the loading="lazy" attribute. It reduces initial page weight and speeds up loads with many images below the fold, but lazy-loading the main above-the-fold image delays Largest Contentful Paint.
Native lazy loading
Add loading="lazy" to img and iframe elements that start below the fold. The browser decides when to fetch them based on distance from the viewport. Always include width and height attributes so the space is reserved and the page does not shift when images arrive.
<!-- Hero image: load immediately, with high priority -->
<img src="/hero.avif" width="1200" height="630" alt="Dashboard overview" fetchpriority="high">
<!-- Below-the-fold screenshot -->
<img src="/feature.avif" width="800" height="500" alt="Report builder" loading="lazy">SEO considerations
Google renders pages but does not scroll or click like a user, so lazy-loaded content must load when it is visible in the viewport, not only after a scroll event or interaction. Native loading="lazy" and IntersectionObserver both work. Content that loads only after a click, such as text hidden behind a load more button with no separate URL, may not be indexed.
What not to lazy-load
Do not lazy-load the LCP element, usually the hero image or a large product screenshot near the top. Do not lazy-load the main text of the page. Be careful with JavaScript libraries that swap a placeholder src for a data-src attribute: if the script fails, crawlers and users see only the placeholder.
Example
A lazy hero image
Wickerpond's site template applies loading="lazy" to every image, including the hero screenshot on each landing page. Field data shows a poor LCP on mobile. Removing the attribute from the first image in each template and adding fetchpriority="high" brings the hero forward in the load order.
Common mistakes
Lazy-loading everything
Blanket rules catch the hero image. Exclude above-the-fold images explicitly.
Relying on scroll events
Crawlers do not scroll. Use native lazy loading or IntersectionObserver.
Questions
Yes, if they load when visible in the viewport and the img element has a real src or srcset in the rendered HTML.
