What is lazy loading?
Lazy loading means a browser waits to load certain resources, usually images and iframes, until they are about to enter the viewport. A long article with thirty images downloads only the few at the top on arrival, and fetches the rest as the reader scrolls. That saves bandwidth and gets the first screen ready faster.
Browsers support it natively through the loading="lazy" attribute on <img> and <iframe>, available in all major browsers. JavaScript libraries used to be necessary; they rarely are now.
How it works
With loading="lazy", the browser holds off on the request until the element is within a certain distance of the viewport. The distance depends on the browser and connection speed, so images are usually loaded before the user actually reaches them.
For SEO, native lazy loading is safe: Googlebot renders pages with a tall viewport and loads lazy images that use the native attribute. Problems come from custom JavaScript implementations that only load content on scroll events or user interaction, because Googlebot does not scroll or click. Content that needs an interaction to appear may never be seen.
The main risk is lazy-loading the wrong images. Anything in the first screen, and especially the Largest Contentful Paint image, should load eagerly. Lazy-loading it delays the most important paint on the page.
Example
<!-- Hero image: load immediately, with high priority -->
<img src="hero.webp" width="1200" height="675" fetchpriority="high" alt="Pour-over setup on a wooden counter">
<!-- Further down the article: lazy -->
<img src="grind-chart.webp" width="800" height="500" loading="lazy" alt="Chart of grind sizes from fine to coarse">
<!-- Embedded video far below the fold -->
<iframe src="https://www.youtube.com/embed/..." width="560" height="315" loading="lazy" title="Pour-over technique video"></iframe>
Always keep width and height on lazy images so their space is reserved and they do not cause layout shift.
In WordPress
WordPress has added loading="lazy" to images since version 5.5 and to iframes since 5.7. Recent versions skip it for the first large content image and give that image fetchpriority="high". Themes that print hero images outside the content, and some page builders, can still end up lazy-loading the LCP image, so check the source. Caching and optimization plugins often add their own lazy loading; running two systems at once can cause conflicts.
Common mistakes
- Lazy-loading above-the-fold images, which slows LCP.
- JavaScript lazy loading that uses
data-srcwith no fallback, hiding images from crawlers that do not run scripts. - Missing dimensions on lazy images.
Common questions
Does lazy loading hurt SEO?
Native lazy loading does not; Google loads those images when rendering. Custom scripts that load content only after scrolling or clicking can hide it from Googlebot.
Should I lazy-load every image?
No. Load images in the first screen normally, especially the main hero image, and lazy-load the rest.