Lazy Loading

  9. November 2018

Lazy Loading und Infinite Scroll sind bewährte UX-Methoden die angewendet werden, um Webseiten-Inhalte dynamisch zu laden, sobald sie im sichtbaren Bereich (Viewport) angezeigt werden. So können der HTML Quellcode und die Datenzugriffe verringert werden, was sich auf die Webseiten-Performance (Ladezeit) positiv auswirken soll. Das gegensätzliche Prinzip dafür ist Eager Loading, bei dem alle Inhalte einer Webseite 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-Sicht 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 Googlebot den gesamten Inhalt der Webseite sieht, muss sichergestellt sein, dass die Implementierung des Lazy Loading den gesamten relevanten Inhalt lädt, sobald er im Viewport angezeigt wird. Google rät dazu 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