Definition
Lazy loading delays loading images, videos or other content until a visitor scrolls near them, so the initial page loads faster.
Lazy loading explained
Browsers support native lazy loading for images and iframes with the loading attribute set to lazy. Images further down a long page then load only when needed, saving data and freeing bandwidth for what visitors see first.
Used carelessly, lazy loading hurts. The most common mistake is lazy-loading the hero image or other content at the top of the page. That delays the Largest Contentful Paint element and makes LCP worse. Images visible on first load should load normally, and the LCP image should often be given high priority.
For SEO, check that lazy-loaded content can still be found by crawlers. Content that loads only after a scroll event or a click, rather than when it enters the viewport, may never be seen by search engines. Google's mobile-first indexing guidance specifically warns against lazy-loading primary content that requires user interaction.
Example
Your blog template lazy-loads every image, including the large header image at the top of each post. Removing lazy loading from that first image, and keeping it on images further down, improves LCP without losing the benefit elsewhere.
Why it matters
Done right, lazy loading speeds up long pages. Done wrong, it slows the most important content and can hide it from search engines.
Related service
Page Speed Optimization
We fix LCP, INP and CLS issues so pages load fast and respond quickly for real users.
Page speed and Core Web Vitals optimizationPublished by Vidern, founded and led by Malhar Shah. Updated .
Find out what's holding your site back
Get a free SEO audit with prioritized fixes, delivered within 48 hours.
Related terms
- LCP (Largest Contentful Paint)LCP (Largest Contentful Paint) measures how long the largest image, video or text block in view takes to render; 2.5 seconds or less is good.
- Mobile-first indexingMobile-first indexing means Google uses the mobile version of a page's content, crawled with its smartphone crawler, for indexing and ranking.
- Core Web VitalsCore Web Vitals are three Google metrics for real-user experience: loading (LCP), responsiveness (INP) and visual stability (CLS).
- Render-blocking resourcesRender-blocking resources are CSS and JavaScript files the browser must download and process before it can show anything on the page.