Laden bei Bedarf

Lazy LoadingLazy LoadingEin Bild, Video oder eingebettetes Element erst laden, wenn jemand in seine Nähe scrollt. Browser können das selbst, mit dem Attribut `loading="lazy"`.Im Glossar verschiebt einen Download, bis der Inhalt gleich sichtbar wird. Browser können das selbst, bei Bildern und iframes mit dem Attribut loading="lazy". Für Bilder unterstützen es Chrome ab Version 77, Firefox ab 75 und Safari ab 15.4. Der Browser beginnt mit dem Laden, kurz bevor das Element ins Bild kommt. Chrome rechnet mit einem Abstand von 1’250 Pixeln bei schneller Verbindung und 2’500 Pixeln bei langsamer, damit das Bild in der Regel bereitsteht, wenn man dort ankommt. Bevor es das Attribut gab, brauchte es dafür JavaScript.

Eine lange Seite mit vielen Bildern würde sonst alle auf einmal holen, auch die, zu denen niemand scrollt. Diese Downloads konkurrieren um dieselbe Verbindung mit dem Inhalt im ersten Bildschirm. In einem WordPress-Test, über den web.dev berichtet, senkte Lazy Loading die übertragene Bildmenge von Archivseiten auf dem Desktop von 1’173 KB auf 577 KB. Wer die Seite aufruft, braucht weniger mobiles Datenvolumen, und die Website liefert bei gleich vielen Besuchen weniger Daten aus.

Das Bild im ersten Bildschirm muss sofort laden. Auf 76 Prozent der mobilen Seiten ist der Largest Contentful Paint, der Core Web VitalCore Web VitalsDie drei Messwerte von Google für das Nutzungserlebnis: LCP für das Laden, INP für die Reaktion und CLS für die Stabilität des Layouts. Bewertet wird jeweils das 75. Perzentil echter Besuche.Im Glossar für das Ladetempo, ein Bild (Web Almanac 2025). Wird es aufgeschoben, fordert der Browser die Datei erst an, wenn das Layout feststeht. Im selben WordPress-Test verbesserte sich der LCPLCPLargest Contentful Paint: die Zeit, bis das grösste Bild oder der grösste Textblock im ersten Bildschirm dargestellt ist. Google bewertet 2.5 Sekunden oder weniger als gut.Im Glossar von Archivseiten um 14 Prozent auf dem Desktop und 18 Prozent auf dem Handy, sobald die Bilder im ersten Bildschirm nicht mehr aufgeschoben wurden. Trotzdem laden laut Web Almanac 2025 rund 16 bis 17 Prozent der Seiten ihr LCP-Bild noch verzögert. Gerade dieses Bild braucht das Gegenteil: Mit dem Attribut fetchpriority="high" sank der LCP bei Google Flights laut web.dev von 2,6 auf 1,9 Sekunden.

Aufgeschobene Bilder brauchen Breite und Höhe im Code. Sonst ist kein Platz reserviert, und der Text springt, wenn das Bild eintrifft. Am meisten gewinnen Karten, Videoplayer und andere Einbettungen, weil sie oft viel Skript nachladen. Sie können loading="lazy" am iframe tragen oder zunächst ein einfaches Vorschaubild zeigen, das die echte Einbettung erst lädt, wenn jemand darauf tippt.