Probleme mit Lazy-Load-Inhalten beheben

Das Zurückstellen des Ladens nicht kritischer oder nicht sichtbarer Inhalte wird auch als „Lazy Loading“ bezeichnet. Es ist eine gängige Best Practice, die zur Leistungssteigerung und zur Optimierung der Seitennutzung dient. Weitere Informationen findest du im Web Fundamentals-Leitfaden zum Lazy Loading von Bildern und Videos. Falls diese Technik nicht korrekt implementiert wird, kann es jedoch ungewollt dazu kommen, dass Inhalte für Google unsichtbar werden. Hier erfährst du, wie du dafür sorgst, dass Google Lazy-Loading-Inhalte crawlen und indexieren kann.

Inhalte dann laden, wenn sie in den Darstellungsbereich kommen

Damit sämtliche Inhalte auf deiner Seite für Google sichtbar sind, müssen alle relevanten Inhalte für die Lazy-Loading-Implementierung dann geladen werden, wenn sie im Darstellungsbereich sichtbar sein sollen. Hier einige Beispiele, wie du das erreichst:

Teste außerdem deine Implementierung.

Laden von nummerierten Seiten für unendliches Scrollen unterstützen

Wenn du unendliches Scrollen implementierst, solltest du nicht vergessen, dabei auch die Unterstützung für das Laden von nummerierten Seiten einzurichten. Letzteres ist für Nutzer wichtig, da sie so die Möglichkeit haben, deine Inhalte zu teilen und wieder aufzurufen. Außerdem kann Google auf diese Weise auf einer Seite mit unendlichem Scrollen anstelle des Seitenanfangs einen Link zu einem bestimmten Punkt in den Inhalten anzeigen.

Wenn du das Laden von nummerierten Seiten unterstützen möchtest, gib einen eindeutigen Link zu jedem Abschnitt an, den die Nutzer direkt teilen und laden können. Wir empfehlen dir, die URL über die History API zu aktualisieren, wenn die Inhalte dynamisch geladen werden.

Testen

Nachdem du die Implementierung eingerichtet hast, prüfe, ob sie korrekt funktioniert. Du kannst sie beispielsweise mit einem Puppeteer-Script lokal testen. Puppeteer ist eine Node.js-Bibliothek zur Steuerung der monitorlosen Chrome-Version. Zur Ausführung des Skripts benötigst du Node.js. Mit den folgenden Befehlen wird das Script geprüft und ausgeführt: 

git clone https://github.com/GoogleChromeLabs/puppeteer-examples
cd puppeteer-examples
npm i
node lazyimages_without_scroll_events.js -h

Überprüfe nach der Ausführung des Skripts manuell, ob die dabei erstellten Screenshots sämtliche Inhalte enthalten, die sichtbar sein und von Google indexiert werden sollen.

Du kannst auch mit dem URL-Prüftool in der Search Console kontrollieren, ob alle Bilder geladen wurden. Sieh dir den Screenshot und den gerenderten HTML-Code an.