Bilder verzögert laden: wann es hilft und wann es schadet
Verzögertes Laden bedeutet, dass der Browser mit dem Herunterladen eines Bildes wartet, bis der Besucher es gleich sehen wird. Richtig eingesetzt spart es Daten und lässt Seiten schneller wirken. Überall eingesetzt, kann es dazu führen, dass Ihr wichtigstes Bild später erscheint als nötig. Dieser Ratgeber erklärt, wo es hilft und wo es schadet.
Was verzögertes Laden ist und wie es funktioniert
Normalerweise beginnt ein Browser fast sofort, jedes Bild einer Seite herunterzuladen, auch solche weit unterhalb des Bildschirms, zu denen der Besucher vielleicht nie scrollt. Verzögertes Laden ändert das: Bilder weit außerhalb des sichtbaren Bereichs werden erst geladen, wenn der Besucher in ihre Nähe scrollt.
Moderne Browser unterstützen das nativ. Fügen Sie einem img-Element loading="lazy" hinzu, zum Beispiel <img src="photo.jpg" loading="lazy" width="800" height="600" alt="...">, und der Browser erledigt den Rest. WordPress fügt dieses Attribut Bildern standardmäßig hinzu.
Nutzen und Risiken
Nutzen
- Seiten laden ihre wichtigen Inhalte früher, weil am Anfang weniger Dateien um Bandbreite konkurrieren.
- Besucher, die nicht scrollen, laden keine Bilder herunter, die sie nie sehen, was Daten spart.
- Lange Artikel, Galerien und Produktlisten werden spürbar leichter.
Risiken
- Das erste große Bild verzögert zu laden verspätet es und kann den Largest Contentful Paint verschlechtern.
- Ohne Abmessungen springen Bilder plötzlich auf und verschieben den Inhalt, was die Layoutverschiebung erhöht.
- Laden Bilder zu spät, sehen Besucher beim schnellen Scrollen leere Lücken.
- Manche JavaScript-Bibliotheken für verzögertes Laden verbergen die echte Bildadresse vor Suchmaschinen.
Ziel ist, nur das zu verzögern, was der Besucher nicht sofort sieht.
Wo Sie es einsetzen und wo nicht
| Bild | Verzögert laden? | Warum |
|---|---|---|
| Titelbild oder Banner am Seitenanfang | Nein | Es ist meist das LCP-Element und sollte zuerst laden |
| Erstes Bild einer sichtbaren Karussellfolie | Nein | Der Besucher sieht es sofort |
| Bilder weiter unten im Artikel | Ja | Sie werden erst gebraucht, wenn der Besucher scrollt |
| Produktraster ab der zweiten Zeile | Ja | Spart Bandbreite bei langen Listen |
| Bilder in versteckten Tabs oder Akkordeons | Ja | Sie sind erst sichtbar, wenn sie geöffnet werden |
Als Faustregel gilt: Bilder im ersten Bildschirm der Seite laden normal, alles andere kann verzögert laden.
Schritt für Schritt: richtig einrichten
- 1Listen Sie die Bilder der Seite auf und markieren Sie, welche ohne Scrollen sichtbar sind.
- 2Lassen Sie diese ohne
loading="lazy". Beim Hauptbild fügen Sie zusätzlichfetchpriority="high"hinzu. - 3Fügen Sie
loading="lazy"bei den übrigen hinzu. - 4Fügen Sie
widthundheight(oder ein CSS-Seitenverhältnis) bei jedem Bild hinzu. Bild skalieren zeigt die genaue Pixelgröße jeder Datei. - 5Machen Sie jede Datei leicht. Komprimieren Sie mit Bild komprimieren, damit Bilder beim Laden günstig sind.
- 6Prüfen Sie Plugins und Themes. Manche Optimierungs-Plugins laden alles verzögert. Stellen Sie sicher, dass das erste Bild ausgenommen ist.
- 7Testen Sie auf einem Handy mit gedrosselter Verbindung und scrollen Sie. Bilder sollten kurz vor dem Erreichen erscheinen.
Natives verzögertes Laden oder eine JavaScript-Bibliothek?
- Natives
loading="lazy": die einfachste und sicherste Wahl. Kein zusätzlicher Code, von modernen Browsern unterstützt, und Suchmaschinen finden die Bilder. Es bietet weniger Kontrolle darüber, wie früh Bilder zu laden beginnen. - Eine JavaScript-Bibliothek: bietet Kontrolle über Schwellenwerte und Platzhalter, bringt aber Code zur Pflege mit und kann Bildadressen vor Crawlern verbergen, wenn die echte URL nicht im HTML steht.
Für die meisten Websites ist natives verzögertes Laden der richtige Standard.
Häufige Fehler
- Das Titelbild verzögert laden. Das ist der häufigste und teuerste Fehler. Siehe den Ratgeber zu Core Web Vitals und Bildern.
- Abmessungen weglassen, was Layoutverschiebungen verursacht, wenn Bilder erscheinen.
- Die echte Bildadresse nur in ein data-Attribut schreiben, dem Suchmaschinen womöglich nicht folgen.
- Annehmen, dass verzögertes Laden die Optimierung ersetzt. Eine schwere Datei ist beim Laden immer noch schwer, skalieren und komprimieren Sie also zusätzlich.
Häufig gestellte Fragen
Schadet verzögertes Laden dem SEO?
Natives verzögertes Laden schadet dem SEO nicht, weil Suchmaschinen die Bilder finden können. Probleme entstehen, wenn die echte Bildadresse in JavaScript versteckt ist oder wenn das Hauptbild verzögert geladen wird und die Seite ausbremst.
Sollte ich jedes Bild verzögert laden?
Nein. Bilder, die im ersten Bildschirm sichtbar sind, vor allem das Hauptbild, sollten normal laden. Laden Sie den Rest verzögert.
Was bewirkt loading="lazy"?
Es weist den Browser an, das Herunterladen eines Bildes zu verzögern, bis der Besucher in seine Nähe scrollt. Es funktioniert in modernen Browsern nativ, ohne JavaScript.
Warum springt die Seite wegen meiner verzögert geladenen Bilder?
Der Browser kennt die Bildgröße erst nach dem Laden und kann daher keinen Platz reservieren. Fügen Sie jedem Bild width- und height-Attribute oder ein CSS-Seitenverhältnis hinzu.
Lädt WordPress Bilder standardmäßig verzögert?
Neuere Versionen fügen Bildern automatisch loading="lazy" hinzu und versuchen, es beim ersten Bild zu vermeiden. Prüfen Sie das HTML Ihrer Seite, denn Themes und Plugins können das ändern.