Lazy Loading
Lazy loading refers to the deferred loading of resources such as images, components, or modules only when they are needed in the viewport. The goal is to reduce the initial Ladezeit of a page and improve perceived performance. When used correctly, lazy loading significantly reduces the amount of data transferred on the first load and improves PageSpeed scores.
Why is lazy loading relevant?
By deferring non-critical resources, the time to first visible render is shortened. This improves metrics like First Contentful Paint and indirectly Largest Contentful Paint . Especially on content-rich pages, lazy loading reduces the initial network payload.
Technical implementation
Lazy loading can be implemented via native browser attributes or framework mechanisms. In modern architectures, it is often combined with optimized Rendering and a structured Build-Prozess to intelligently prioritize resources.
SEO and UX considerations
Incorrectly implemented lazy loading can prevent search engines from properly indexing content or cause layout shifts. Combining it with proper Caching and structured markup prevents negative impacts on PageSpeed or user experience.
How we use it
In our Angular architecture, we use @defer blocks with viewport triggers: components below the visible area are only loaded when the user scrolls to them. Images receive the native loading="lazy" attribute — except for the hero image, which is prioritized via preload to avoid degrading Largest Contentful Paint . On the glossary overview page with 65+ entries, this strategy saves over 400 KB of data on the initial load. Combined with Server-Side Rendering , the content remains fully crawlable despite the deferred loading.