Die durchschnittliche Größe einer Webseite liegt bei 3719 kB, wobei Bilder und Videos laut http Archiv nahezu 78% des Gesamtgewichts ausmachen. Das sind viele Bytes, die der Browser eines Websitebesuchers herunterladen und rendern muss. In Zukunft wird der Workload vermutlich noch größer, da umfangreichere Websites und eine zunehmende Verwendung von Bildern im Trend liegen. WordPress ist führend, wenn es um die Freigabe von Medien und die Einbindung von Mediendateien in das Web Design geht. Es ist kinderleicht, Bilder und Videos in Beiträge, Seiten und sogar in den Hintergrund des Themes zu integrieren.
Mit der Veröffentlichung von WordPress 5.5 wurde das Lazy Loading Teil der Core-Version und macht es sehr einfach, diese Technik zu implementieren.
All diese Ressourcen machen das Herunterladen einer Webseite jedoch zu einem langwierigen Erlebnis für Benutzer, da diese auf das Herunterladen großer Dateien – einschließlich der Dateien, die zunächst nicht einmal sichtbar sind – warten müssen, bevor sie eine Webseite betrachten können. Hier kommt WordPress Lazy Load ins Spiel.
- Was ist Lazy Loading und wie funktioniertes?
- WordPress Lazy Load
- Verbesserung der Lazy Load Geschwindigkeit mit Lazy Load Plugins
- Lazy Loading Auswirkung auf SEO
Was ist Lazy Loading und wie funktioniert es?
Lazy Loading ist eine Optimierungstechnik, die sichtbare Inhalte lädt, aber das Herunterladen und Rendern von Inhalten, die nicht aktuell gebraucht werden, verzögert. Es ist genau einer der Sachen, die Google begeistert und es ist eine Technik, die Du in Betracht ziehen solltest, wenn Deine Beiträge und Seiten viele eingebettete Videos und hochauflösende Bilder enthalten.
Lazy Loading funktioniert so:
- Der Browser erstellt das DOM der Webseite, ohne Bilder herunterzuladen und Videos vorzuladen.
- JavaScript wird zur Bestimmung derjenigen Bilder und Videos verwendet, die heruntergeladen bzw. vorgeladen werden sollen. Dies wird basierend auf dem Inhalt, der beim Laden der Seite zunächst sichtbar ist, bestimmt. Es werden also dementsprechend nur die Inhalte geladen, die auch wirklich benötigt werden.
- Das Herunterladen und Rendern von zusätzlichen Inhalten verzögert sich, bis ein Seitenbesucher die Seite nach unten scrollt und die zusätzlichen Inhalte relevant werden.
Bilder und Videos werden also erst dann geladen, wenn sie tatsächlich benötigt werden. Dies kann eine deutliche Leistungssteigerung für Websites mit vielen hochauflösenden Bildern und eingebetteten Videos bewirken.
WordPress Lazy Load
Wie bei so vielen anderen Leistungsproblemen von Websites, gibt es auch für verzögertes Laden ein Plugin in WordPress, mit dem Du das Problem beheben kannst. Es stehen sogar viele kostenlose Plugins zur Verfügung, mit denen man Bilder und Videos bequem nach Bedarf laden kann. Nachdem wir ein paar Dutzend Plugins auf Herz und Nieren geprüft haben, haben wir fünf Plugins identifiziert, die eine messbare Verbesserung der Websiteleistung bewirken. Wenn Du bereit bist, Lazy Loading zu implementieren, solltest Du zunächst diese fünf Aspekte berücksichtigen.
Wird eine Website wirklich durch Bilder und Videos verlangsamt?
Bevor Du überhaupt Bilder in WordPress hochlädst, solltest Du sie erst einmal optimieren.
Wir brauchen eine Grundauswertung, damit wir die Auswirkungen des Hinzufügens von Bildern und Videos sehen können. Es hat keinen Sinn, ein Problem zu beheben, wenn es von Anfang an keines gibt. Ich habe eine Standard WordPress Installation auf einem Kinsta Hosting Account für einen Test eingerichtet. TwentySixteen ist das aktive Theme und es wurden keine Optimierungs-Plugins oder Techniken wie Caching implementiert.
Hier ist die Bewertung des Pingdom Website Geschwindigkeitstest, bevor Bilder oder Videos hinzugefügt wurden.
Wie Du sehen kannst, ist die Seite mit knapp 155 kb sehr kompakt und in weniger als einer halben Sekunde geladen. Aber was passiert, wenn wir eine Seite mit großen Bilddateien und eingebetteten YouTube-Videos hochladen?
Die Seitengröße ist auf 1,7 MB gestiegen und die Ladezeit der Seite hat sich mit nun knappen 1,3 Sekunden fast verdreifacht. TwentySixteen ist ein gut geschriebenes, kompaktes Theme, sodass die Seite selbst mit einem halben Dutzend Bildern und hinzugefügten YouTube-Videos immer noch erstaunlich flink lädt. Wir können jedoch sehen, dass das Hinzufügen von Bildern und Videos die Seite vergrößert und die Geschwindigkeit des Seitenladens erheblich verlangsamt hat.
Verbesserung der Seitenladegeschwindigkeit mit Lazy Loading Plugins
Zwei Plugins, die die Bereitstellung dieser Webseite erheblich beschleunigen, sind a3 Lazy Load und Lazy Load. Schauen wir uns an, wie sich jedes einzelne verhält. Wir haben ebenfalls mehrere andere Plugins getestet, die aber nicht zu einer messbaren Verbesserung der Performance der Webseite führten. Wenn Du Lazy Load Plugins ausprobierst, solltest Du einen Vorher-Nachher-Test durchführen, um sicherzustellen, dass die gewünschten Ergebnisse erzielt wurden.
a3 Lazy Load
a3 Lazy Load ist eine weitere beliebte WordPress Lazy Load Option. Dieses Plugin ist auf mehr als 50.000 WordPress Webseiten aktiv und hat eine sehr gute Bewertung von 4,7 von 5 Sternen und fast 40 Nutzerbewertungen.
Die Aktivierung des Plugins fügt ein Einstellungsmenü unter Einstellungen > a3 Lazy Load hinzu. Zu Testzwecken habe ich die Standardeinstellungen mit einer kleinen Ausnahme in Ruhe gelassen. Ich habe die Option „Hintergrundfarbe laden“ verwendet, um die Farbe des Platzhalters an die Farbe des Hintergrunds der Webseite anzupassen. Mit dieser vorgenommenen Änderung und den Standardeinstellungen hat die Webseite sehr gut performt.
Wir sind wieder bei einer Seitenladezeit von weniger als einer halben Sekunde gelandet. Das ist, angesichts der Anzahl der Bilder und Videos, die auf dieser Webseite enthalten sind, bemerkenswert.
Testergebnisse im Vergleich
Zweifellos wirst Du feststellen, dass die Seitengröße und die Anzahl der Anfragen deutlich zurückgegangen sind. Was verursacht diesen dramatischen Unterschied? Pingdom bietet eine Momentaufnahme der Inhaltsgröße und somit liefert schneller Vergleich die Antwort. Im untenstehenden Bild wird ein Schnappschuss der Inhaltsgröße bei aktiviertem a3 Lazy Load abgebildet.
Der Speicherbedarf des Bildes ist mit etwas mehr als 150 kb klein. So sieht der Screenshot mit einer Gesamtnutzlast von 2,0 MB aus.
Das Skript, HTML, CSS und andere Inhaltsgrößen sind nahezu identisch. Die Bildgröße beträgt jedoch 1,86 MB – im Grunde genommen die Größe der Vollversion des allerersten Bildes auf der Seite – und nicht nur 150 kb. Was ist da also los?
Wie bereits erwähnt, liefert WordPress automatisch eine Vielzahl von Bildgrößen und der Browser wählt und rendert die kleinstmögliche Version, basierend auf der Größe, in der das Bild auf dem Bildschirm wiedergegeben wird. A3 Lazy Load leaves default WordPress behavior intact and the result is that a much smaller image file is delivered.
Lazy Load
Die zweite Option ist Lazy Load, ein kostenloses Plugin, das vom Team bei WP Rocket erstellt wurde. Es gab bisher 10.000 Installationen bei einer Bewertung von 4 von 5 Sternen. Wenn Du nach einer einfachen WordPress Lazy Load Option mit einer guten Geschwindigkeit suchst, ist dies eine gute Wahl.
Dieses Plugin kann für Miniaturansichten, sämtliche Bilder in einem Beitrag oder Widget-Text, Avataren und Smileys benutzt werden. Der große Vorteil ist, dass es keine JavaScript-Bibliotheken wie jQuery gibt und das Skript weniger als 10 KB wiegt. Man muss keine Optionen konfigurieren, sondern lediglich das Plugin installieren und schon funktioniert das verzögerte Laden.
Native Lazy Loading
In den letzten Jahren hat es einen Vorstoß gegeben, die Lazy-Loading-Funktionalität direkt in Webbrowser zu integrieren. Gegenwärtig ist Lazy Loading in Chrome-basierten Browsern wie Chrome und Brave sowie Firefox verfügbar.
Natives Lazy Loading ist großartig für die Leistung der Webseite, da es nicht auf Inline-Javascript-Code oder externe Skripte angewiesen ist. Um deiner Webseite das native Lazy Loading hinzuzufügen, füge einfach ein loading=lazy-Attribut zu den Bildern und Iframes hinzu, die du mit Lazy Loading laden möchtest.
Google hat das Native Lazyload-Plugin entwickelt, um diesen Prozess zu erleichtern. Nach dem Aktivieren des Plugins wird WordPress automatisch das Attribut loading in eure img und iframe Tags einfügen.
Lazy Load for Videos
Wenn Du Dich besonders für das verzögerte Laden von Videos interessierst, empfehlen wir das Plugin Lazy Load for Videos. Während diese Funktion auch einige der oben genannten Plugins anbietet, ist dieses eine großartige Lösung für reine Videoinhalte.
Auswirkungen von Lazy Load auf SEO
Welches Plugin Du auch im Endeffekt für WordPress verwendest, es ist in jedem Fall wichtig, dass Du Deine SEO dadurch nicht schädigst. Es gibt zwei Dinge, die Du noch einmal überprüfen solltest:
- Stelle sicher, dass Google Deine verzögert geladenen Bilder noch durchsuchen kann. Das funktioniert ganz einfach mit dem Tool „Fetch as Google“ im Crawl-Bereich der Google Search Console. Wenn Du Deine Bilder noch im Quellcode sehen kannst, dann ist höchstwahrscheinlich alles in Ordnung.
- Stelle sicher, dass Du immer noch alt Text auf Deinen Bildern verwendest, da dies für die Rangliste der Google-Bildsuche wichtig ist.
Alt text is extremely helpful for Google Images — if you want your images to rank there. Even if you use lazy-loading, you know which image will be loaded, so get that information in there as early as possible & test what it renders as.
— John Mueller (official) · Not #30D (@JohnMu) September 4, 2018
Zusammenfassung
Mit der weitverbreiteten Browser-nativen Lazy-Loading Unterstützung am Horizont empfehlen wir ein Plugin wie Google’s Native Lazy Load, um eine Lazy-Loading-Basislinie für deine Webseite zu setzen.
Mit Chrome- und Firefox-Unterstützung und in Zukunft auch Safari-Unterstützung sollte das browser-native Lazy Loading alles sein, was du brauchst, um deine Bilder und Iframes so zu laden. Wenn du nach einer JavaScript-basierten Option suchst, die auch ältere Browser unterstützt, ist a3 Lazy Load eine großartige Option.
Verzögertes Laden ist nur eine der Techniken, die Du verwenden kannst, um Deine WordPress Website zu optimieren. Wenn Du viele Bilder und Videos verwendest, hat es jedoch das Potenzial, einen großen Einfluss auf die Geschwindigkeit der Webseite zu haben. Sobald Du Lazy Loading implementiert hast, gibt es mehrere zusätzliche Techniken, die Du in Betracht ziehen und implementieren kannst, um die beste Leistung zu erzielen.
Haben wir andere gute WordPress-Lösungen für das Lazy Loading vergessen? Wenn ja, lass es uns in den Kommentaren wissen.
Jon is the Chief Operating Officer at Kinsta and is involved with Kinsta's sales, customer service, and technical support teams on a daily basis. Jon's a family man. So when he isn't feverishly tapping the keys of his laptop he's usually helping one of his kids fix a bike or setting up Netflix for an impatient preschooler.
Schreibe einen Kommentar