Lazy Loading

Lazy loadingLazy loading is the deferred loading of content such as images only when it enters the visible area, in order to reduce the initial loading time.Open glossary entry → means that content such as images or embedded elements is loaded only when it enters the user's visible area, rather than immediately on page load. This reduces the initial amount of data and can improve loading time, especially on long pages with many images.

Correct application is crucial:

• Images below the visible area can sensibly be lazy loaded.
• The most important image in the visible area, often the LCPLargest Contentful Paint (LCP) measures when the largest visible content element in the viewport has loaded, representing the perceived loading speed.Open glossary entry → element, should not be lazy loaded.

A common mistake is loading="lazy" on the hero or LCP image. This defers exactly the element that is decisive for a good Largest Contentful Paint (LCP). It is better to prioritise the LCP image with fetchpriority="high" instead and to use lazy loading only for secondary content.