What is lazy loading?
Lazy loading is a technique in which images, videos and other parts of a page are only loaded when the visitor is about to scroll to them. This makes the page load faster when it opens and sends less data. Browsers support it natively through the HTML attribute loading.
Why is lazy loading important?
- Faster pages: less has to be loaded when the page opens.
- Less data use: especially helpful on mobile connections.
- Better Core Web Vitals: a lighter first load helps loading speed, provided you apply it correctly.
Examples of lazy loading
<img src="product.jpg" loading="lazy" alt="Red running shoe">- A product overview of 60 items where only the first row loads immediately.
- An embedded video that only loads when the visitor scrolls to it.
How do you use lazy loading?
Add loading="lazy" to images and videos that sit lower on the page. Do not use it for the first image at the top, because that decides your LCP and needs to load fast. Give images fixed dimensions to prevent layout shifts (technical SEO).