Google PageSpeed – Lazy Loading für externe Inhalte

In unserer Reihe „Bessere Performance für ein höheres Google-Ranking“ beleuchten wir die entscheidenden Faktoren für den Google PageSpeed. Google hat diese Kennzahl eingeführt, um Webseiten anhand klarer Kriterien objektiv zu bewerten. Neben der reinen Benutzerfreundlichkeit ist der PageSpeed ein offizieller Rankingfaktor im Google-Algorithmus. Je konsequenter du die Optimierungsvorschläge umsetzt, desto schneller wird deine Webseite geladen. Das optimiert das Crawling durch den Google-Bot und senkt zugleich die Absprungrate deiner Besucher.

In diesem Beitrag widmen wir uns zwei großen Performance-Faktoren moderner Websites: visuellen Medien und externen Werbeskripten. Wenn Bilder, Videos und Anzeigen direkt beim ersten Seitenaufruf unkontrolliert geladen werden, blockieren sie das Rendering und verlängern die Ladezeit spürbar. Abhilfe schafft Lazy Loading. Mit dieser Technik werden größere Datenmengen erst dann angefordert, wenn sie sich dem sichtbaren Bereich des Besuchers nähern.
Wir erläutern praxisnah, wie du Lazy Loading für eigene Medien sowie für externe Anzeigen optimal einsetzt, welche Einstellungen sich in der Praxis bewährt haben und wie du wichtige Elemente im sichtbaren Bereich priorisiert lädst.

Bilder und Videos erst laden, wenn sie gebraucht werden

Standardmäßig versucht ein Browser, alle Medien einer Seite sofort herunterzuladen. Bei bildstarken Beiträgen oder bei eingebetteten Videos führt das zu Verzögerungen. Lazy Loading verhindert das: Medien werden zunächst durch Platzhalter ersetzt und erst dann geladen, wenn der Nutzer tiefer scrollt. Für die Umsetzung auf deiner Website gibt es zwei Möglichkeiten: die automatisierte Steuerung über Plugins oder die manuelle Integration direkt im Code.

WordPress-Plugins zum Lazy Loading für Bilder und Videos

Wenn du WordPress nutzt, übernehmen spezialisierte Plugins diese Aufgabe automatisch. Das bekannte Premium-Tool WP Rocket optimiert nicht nur Bilder, sondern bietet auch Lazy Loading für Videos und YouTube-Iframes, indem es sie durch ein leichtes Vorschaubild ersetzt.

Als kostenlose Alternative bietet sich beispielsweise Autoptimize an. Diese Plugins sind schlank und konzentrieren sich auf das Wesentliche. Nach der Aktivierung müssen meist nur die entsprechenden Optionen in den Einstellungen ausgewählt werden. Der Vorteil: Die Plugins decken oft auch Sonderfälle wie Hintergrundbilder in CSS-Klassen ab, die manuell nur schwer zu erfassen sind.

Lazy Loading manuell einrichten

Wer auf zusätzliche Plugins verzichten möchte, um das System schlank zu halten, kann Lazy Loading direkt manuell umsetzen. Moderne Browser unterstützen das sogenannte native Lazy Loading. Dafür fügst du den Bild-HTML-Tags lediglich das Attribut loading=“lazy“ hinzu. Ein korrekter Image-Tag sieht dann so aus:

<img src=“bild.jpg“ loading=“lazy“ alt=“Beispiel“>

Für Videos oder Iframes funktioniert dieses Prinzip analog. Der Browser erkennt den Befehl automatisch und steuert den Ladezeitpunkt ohne zusätzliches JavaScript. Für ältere Browser, die dieses native Feature noch nicht unterstützen, kann alternativ ein minimales JavaScript-Skript über den Intersection Observer eingebunden werden. Die manuelle Methode verursacht keinerlei zusätzliche Serverlast und schont die Performance.

Das Laden externer Anzeigenscripte oder großer Banner verzögern

Werbeanzeigen und Skripte von Drittanbietern werden beim Aufruf deiner Webseite meist sofort mitgeladen, selbst wenn sie sich weit unten im nicht sichtbaren Bereich (Below the Fold) befinden. Je mehr Anzeigen direkt beim Start laden, desto stärker bricht die Ladegeschwindigkeit ein. Der Einfluss von Werbeskripten auf die Performance wird häufig unterschätzt. Sie blockieren das Rendering und können die Ladezeit der Hauptinhalte um bis zu 40 % verzögern.
Oft wartet der Browser sekundenlang auf die Server der Werbenetzwerke, während der Nutzer eigentlich nur den Text lesen möchte. Dieses synchrone Laden bläht die anfängliche Datenmenge unnötig auf und beeinträchtigt die Nutzung auf mobilen Geräten.

Die Verwendung von Lazy Loading sorgt dafür, dass Anzeigen erst geladen werden, wenn der Nutzer in ihre Nähe scrollt. Das spart Bandbreite und steigert die Performance deiner Webseite deutlich.

Wie lässt sich Lazy Loading für Anzeigen technisch umsetzen?

Im Gegensatz zu Bildern oder Videos gibt es für Werbeanzeigen keinen praktikablen manuellen Weg über einfache HTML-Attribute. Da Anzeigen über dynamische, externe Skripte geladen werden, steuert man diese in WordPress am besten über spezialisierte Anzeigenmanager-Plugins. Die bekanntesten WordPress-Tools am Markt sind:

• AdPresso
• AdInserter
• Advanced Ads

Diese Plugins erlauben, einen genauen Abstand in Pixeln (den sogenannten Threshold) zu definieren, den eine Anzeige noch vom sichtbaren Bereich entfernt sein muss, bevor der Ladevorgang startet. Hier gilt es, den passenden Mittelweg zu finden: Lädt man die Anzeigen zu früh, leidet der PageSpeed. Lädt man sie zu spät, scrollt der Nutzer am leeren Werbeplatz vorbei, bevor das Banner geladen ist.

In der Praxis hat sich ein Schwellenwert von 600 bis 1000 Pixeln bewährt. Der optimale Wert hängt jedoch von der Dateigröße und den Antwortzeiten der jeweiligen Werbenetzwerke ab.
Besonders die Lazy-Loading-Umsetzung des Anzeigenmanagers AdPresso bietet hier eine durchdachte Lösung. Während alle anderen Plugins Anzeigen nur pauschal verzögern, bietet AdPresso eine Option zum priorisierten Laden.
Mit dieser Funktion lässt sich die Anzeigenbereitstellung gezielt steuern. Man verzögert das Laden aller Anzeigenplätze, die sich außerhalb des Bildschirms befinden, um den PageSpeed zu schonen. Gleichzeitig kann das Plugin forcieren, dass Werbeplätze im direkt sichtbaren Bereich (Above the Fold) priorisiert geladen werden. Dadurch werden die Core Web Vitals durch die Anzeigen weniger stark negativ beeinflusst und man stellt gleichzeitig sicher, dass die Anzeigen im Sichtfeld beim Seitenaufruf bereits vollständig aufgebaut sind.