What Lazy loading means
Lazy loading cuts the amount of data a page loads up front, making it faster on phones and slow connections. It should not be applied to the main hero image, since that delays LCP. Modern browsers support it natively.
Why it matters for your website
Pages with many images can load slowly if the browser downloads everything at once. Lazy-loading saves data and speeds up the first view, which helps visitors on phones stay on the page. Done wrong, though, it can delay your main image and hurt your speed scores.
Example
A furniture store's category page shows 60 product photos. With lazy-loading, only the first row loads right away and the rest load as shoppers scroll.
Tips
- Use the built-in loading="lazy" attribute on images and iframes below the fold.
- Set width and height on images so the layout doesn't jump when they load.
- Load your top hero image normally so it shows up as fast as possible.
Common mistakes
- Lazy-loading the largest image at the top of the page, which slows LCP.
- Using a script that hides images from search engines until a user scrolls or clicks.
Questions about Lazy loading
What is Lazy loading?
Delaying the loading of images, videos or other content until a visitor scrolls near it.
Does lazy-loading hurt SEO?
Not when done right. Google says to make sure lazy-loaded content loads when it enters the viewport, and native browser lazy-loading is supported.
Can I lazy-load YouTube embeds?
Yes. Adding loading="lazy" to the iframe, or using a click-to-play preview image, keeps the embed from slowing down the first page load.
