Technical SEO
Lazy Loading
Last updated
What is Lazy Loading?
Lazy loading is a performance technique where resources — most commonly images and iframes — are deferred and only loaded when they are about to enter the user's viewport, rather than being fetched all at once when the page first loads. This reduces initial page weight and frees bandwidth for the resources needed above the fold, which can speed up the initial render.
From an SEO standpoint, lazy loading requires careful implementation. If images critical to the page's content or Largest Contentful Paint element are lazy-loaded, they may not be discovered by Googlebot during rendering, causing them to be missing from the indexed version of the page. Google recommends using the native `loading="lazy"` attribute on images below the fold and keeping above-the-fold images eagerly loaded.
Why it matters for SEO
When applied correctly, lazy loading improves Core Web Vitals scores by reducing page weight and speeding up initial render. When applied incorrectly — particularly on LCP-candidate images — it can hurt rankings by preventing search engines from seeing or indexing key visual content.
Example
A long recipe post has one hero photo at the top and twenty step-by-step photos further down. The step photos get the attribute loading="lazy" so they load only as the reader scrolls, while the hero image, which is the page's Largest Contentful Paint element, is left eager and marked fetchpriority="high". Lazy-loading the hero image by mistake would delay LCP, because the browser would wait before requesting it.
Go further with Lazy Loading
Put the theory to work
LazySEO researches keywords, writes SEO articles and publishes them to your site on a schedule.