←  All terms
L
Performance

Lazy Loading

Lazy loading delays images, video, or code until they are likely to be needed.

Lazy loading delays images, video, or code until they are likely to be needed. Optimization becomes meaningful when real-user data, repeatable lab tests, and an explicit performance budget are used together. The concept is closely related to Image Optimization and Website Performance.

Read more

Image Optimization

Website Performance

Largest Contentful Paint

FAQ

Lazy Loading

What mistakes commonly occur with lazy loading?
Frequent mistakes are delaying images in the first viewport, using placeholders without fixed dimensions, and loading content only after user interaction, which search engines may never trigger. The last one can hurt indexing. It is safer to apply lazy loading selectively to non-critical elements and verify results in testing.
Can lazy loading cause layout shifts?
Yes, if space for deferred elements is not reserved, content jumps when they appear and hurts Cumulative Layout Shift, which should stay at 0.1 or below. Explicit widths and heights or an aspect ratio prevent this. Placeholders should already know the final size.
Does lazy loading require JavaScript?
No, images and iframes have the native loading="lazy" attribute, which modern browsers support. JavaScript is only needed for finer control, for example with background images or components. The native approach needs less maintenance and adds no load to the main thread.
How does lazy loading affect LCP?
Applied correctly, it reduces competition for bandwidth and can improve LCP. Applied to the largest element, it makes LCP worse. The hero image should therefore explicitly not be lazy loaded. The effect can be verified by measuring before and after the change.
When should lazy loading be used?
Lazy loading suits images, videos, and scripts outside the initial viewport. It saves data and speeds up the start, since only what is needed gets loaded. It is unsuitable for elements in the first viewport, because it delays their display. The dividing line is the first screen height.