Lazy Loading
Lazy loading means that images, videos, and embedded content are only loaded when they come into view. The browser therefore only retrieves what is actually visible when the page is rendered, instead of everything at once.
The benefit is significant for image-heavy websites. A page with thirty photos might initially load three, with the rest appearing as you scroll. This reduces the amount of data transferred, eases the strain on mobile connections, and noticeably improves loading times.
One important exception applies: The large image at the very top, usually the hero image, must not load with a delay. It is generally the element that Google uses to measure Largest Contentful Paint (LCP). Delaying its loading worsens the very metric you were trying to improve.
Modern browsers natively support lazy loading via an attribute on the image; no plugin is required. It remains important to specify the width and height for each image, otherwise the layout will jump around when reloading.
Back to the glossary