Was ist Lazy Loading?
Kurzdefinition
Lazy Loading ist eine Technik, die das Laden nicht kritischer Ressourcen wie Bilder unterhalb des sichtbaren Bereichs verzögert, bis sie tatsächlich benötigt werden.
Lazy loading is a performance optimization strategy that defers the loading of resources until they're needed. Instead of loading every image, video, and script when a page first opens, lazy loading only loads the resources visible in the initial viewport and fetches the rest as the user scrolls down.
The most common application is image lazy loading. A typical web page might have 20-50 images, but only 2-3 are visible when the page first loads. Without lazy loading, the browser downloads all 50 images immediately, wasting bandwidth and slowing down the initial render. With lazy loading, only the visible images load first, and the rest load as the user scrolls to them.
Modern browsers natively support lazy loading with the loading="lazy" attribute on img and iframe elements. Before native support, JavaScript-based solutions using the Intersection Observer API were the standard approach. Many frameworks and CMS platforms now include lazy loading by default.
Lazy loading can also be applied to JavaScript modules (loading code only when a feature is needed), components (loading UI sections on demand), and data (fetching content as the user navigates). These techniques are especially valuable for large single-page applications where loading everything upfront would be wasteful.
Warum es wichtig ist
Lazy loading directly improves two critical metrics: initial page load time and bandwidth usage. By loading only what's immediately visible, your pages render faster, use less data (important for mobile users), and feel more responsive.
However, lazy loading must be implemented carefully. Never lazy-load your LCP element (the main hero image or content), as this will hurt your Core Web Vitals scores. Only lazy-load resources that are below the fold or behind user interactions.
Praxisbeispiele
A photography portfolio with 200 images per page reduced initial load time from 12 seconds to 1.8 seconds by lazy loading all images below the first three rows
An e-commerce category page with 60 product images implemented native lazy loading, reducing initial page weight from 8MB to 800KB
A news site lazy loads embedded YouTube videos, replacing them with lightweight thumbnails until the user clicks to play, saving 1.5MB of JavaScript per video
A long-form article page lazy loads related article widgets and comment sections at the bottom, prioritizing the article content for the fastest possible initial render
Verwandte Begriffe
LCP (Largest Contentful Paint)
LCP misst die Zeit, bis das größte sichtbare Inhaltselement einer Seite — wie ein Hero-Bild oder eine Überschrift — vollständig gerendert ist.
Core Web Vitals
Core Web Vitals sind drei spezifische Metriken von Google, die die reale Nutzererfahrung auf Websites messen: Ladeleistung (LCP), Interaktivität (INP) und visuelle Stabilität (CLS).
CLS (Cumulative Layout Shift)
CLS misst die Gesamtmenge unerwarteter Layout-Verschiebungen während des gesamten Lebenszyklus einer Seite und quantifiziert, wie stark sich sichtbare Inhalte verschieben.
Caching
Caching ist der Prozess, Kopien von Daten oder Dateien an einem temporären Ort zu speichern, damit zukünftige Anfragen schneller bedient werden können.
Benötigen Sie Hilfe mit lazy loading?
Unser Team hilft Ihnen, dieses Konzept in die Praxis umzusetzen. Fordern Sie eine kostenlose Beratung an, um Ihr Projekt zu besprechen.