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.

Benefits and pitfalls #

Lazy loading cuts initial page weight and speeds up the first renderJavaScript rendering is the process by which a browser or crawler executes JavaScript code to build the final, visible page. Content that is not already in the delivered HTML only appears after this step.Open glossary entry →. The classic pitfall: lazy-loading the hero image itself. Everything above the fold should load eagerly — otherwise the largest element appears late and LCP gets worse instead of better. Always reserve width and height so the layout does not shift.

SEO and AI crawler considerations #

GooglebotGooglebot is Google's web crawler, which fetches web pages to crawl and index them for Google Search.Open glossary entry → renders lazy-loaded content, but simpler AI crawlersAI crawlers are automated bots that fetch web pages for AI providers in order to find content, make it available for search functions, retrieve it for answers, or, depending on the provider, use it for model training.Open glossary entry → often do not execute JavaScript. Native loading="lazy" with a real src attribute stays crawlableCrawling is the process by which a search engine bot fetches a URL and downloads its content. It is the first step before a page can be indexed.Open glossary entry → for all of them; JavaScript-only solutions that swap a data-src can hide images from those bots entirely.