Lazy Loading

 > SEO Glossar > Lazy Loading
Interesse?
Rufen Sie an
0351 31446588

oder schreiben Sie
  26. April 2019

Lazy Loading und Infinite Scroll sind bewährte UX-Methoden die genutzt werden, um Web-Inhalte dynamisch zu laden, sobald sie im sichtbaren Bereich (Viewport) vom Browser angezeigt werden. So können der HTML Quellcode und die Anzahl der Ressourcen verringert werden, was sich auf die Performance (Ladezeit) positiv auswirken soll. Das gegensätzliche Prinzip ist Eager Loading, bei dem alle Webseiten-Inhalte geladen werden.

Suchmaschinen-Bots können Probleme bei der Verarbeitung von Inhalten haben, die per Lazy Loading oder Infinite Scroll nachgeladen werden. Deshalb sollte aus SEO-Perspektive gewährleistet sein, dass die Implementierung alle relevanten Inhalte lädt, sobald sie im Viewport angezeigt werden. Google stellt für Webmaster eine Lazy Loading-Guideline bereit, die hier zu finden ist.

Google empfiehlt bei Lazy Loading

  • Laden von Inhalten, wenn sie im Viewport sichtbar sind: Um sicherzustellen, dass der Googlebot den gesamten Inhalt der Webseite sieht, muss gewährleistet sein, dass die Implementierung des Lazy Loading den gesamten relevanten Inhalt lädt, sobald er im Viewport angezeigt wird. Google empfiehlt die IntersectionObserver-API und ein Polyfill zu verwenden.
  • Unterstützung von Lazy Loading und Infinite Scroll: Um das paginierte Laden zu unterstützen, sollte ein eindeutiger Link zu jedem Abschnitt angegeben werden, den Webseiten-Nutzer direkt teilen und laden können. Google empfiehlt, die History-API zu verwenden, um die URL zu aktualisieren, wenn der Inhalt dynamisch geladen wird.
  • Testen: Nachdem die Implementierung eingerichtet wurde, sollte sichergestellt werden, dass sie ordnungsgemäß funktioniert. Das kann durch Nutzung eines Puppeteer-Skripts erfolgen, um die die Implementierung lokal zu testen. Puppeteer ist eine Node.js-Bibliothek zur Steuerung von headless Chrome.

Lazy Loading-Beispiel

Das folgende Beispiel einer Kategorieseite des home24-Online Shops zeigt beispielhaft die Implementierung von Lazy Loading. Die Produktbilder werden nachgeladen, sobald sie durch Scrollen des Besuchers im Viewport erscheinen.

Lazy Loading Beispiel am home24-Online Shop
Lazy Loading Beispiel am home24-Online Shop
SEO Glossar