So verwenden Sie Lazy Loading, um ein perfektes mobiles Geschwindigkeitsergebnis zu erzielen

Besteht Ihre Website den Google-Geschwindigkeitstest für mobile Websites? Nein? Vielleicht möchten Sie sich Lazy Loading-Bilder ansehen.

Die Leistung der Website ist entscheidend. Wenn Ihr Blog oder Ihre Website langsam geladen wird, ist dies für die Benutzererfahrung schrecklich.

Niemand wird fünf oder zehn Sekunden warten, bis Ihre Website geladen ist. Die Internetgeschwindigkeit oder Downloadgeschwindigkeit muss schnell sein. Eine langsame Website erhöht Ihre Absprungrate und senkt Ihre Conversion-Rate.

Wenn Sie einen Website-Geschwindigkeitstest für Ihre Website durchführen, ist Ihre Desktop-Geschwindigkeit normalerweise in Ordnung. Aber wie schneiden Ihre Seiten bei einem mobilen Geschwindigkeitstest ab?

Bereiten Sie sich auf mobile Benutzer vor

Die meisten Blogging- und Website-Programme sind recht gut für die Desktop-Anzeige konzipiert.

Sie verwenden responsives Design, um eine mobile Version bereitzustellen.

Obwohl dies eine praktische Lösung ist, hat sie einen signifikanten Nachteil.

Wenn Ihre Website responsive ist, funktioniert sie auf Mobilgeräten.

Die Dateigrößen Ihrer Bilder sind jedoch für den Desktop bestimmt, sodass die Geschwindigkeit Ihrer mobilen Website viel langsamer ist.

Wenn Sie einen Google Pagespeed Insights-Test durchführen, ist Ihr Ergebnis für den Desktop möglicherweise angemessen und im grünen Bereich, aber für Ihre mobile Version sieht es so aus.

Wenn Sie bedenken, dass die Hälfte oder sogar mehr Ihrer Website-Besucher mobile Geräte verwenden, müssen Sie Ihre Seitenladezeit und mobile Geschwindigkeit wirklich verbessern.

Google geht dazu über, seinen Mobile-First-Index als Rankingfaktor zu verwenden.

Es gibt viele kostenlose Website-Geschwindigkeitstestdienste, die Sie zur Leistungsüberwachung verwenden können.

Allerdings messen nicht alle Speedtest-Apps die Geschwindigkeit mobiler Websites. Lassen Sie sich also nicht von guten Ergebnissen für die Seitengeschwindigkeit Ihrer Desktop-Website verunsichern.

WebpageTest ermöglicht Ihnen die Auswahl verschiedener mobiler Versionen und ist somit eine Alternative zu Google.

Stellen Sie immer sicher, dass Sie Ihre mobile Version überprüfen können, da sich Geräte mit einer viel langsameren Internetverbindungsgeschwindigkeit verbinden.

Wenn Ihre Ergebnisse unbefriedigend sind, müssen Sie arbeiten.

Wie verbessern Sie Ihre mobile Performance?

Viele Faktoren tragen zu einer langsamen Websitegeschwindigkeit sowohl auf dem Desktop als auch auf Mobilgeräten bei.

Javascript- und CSS-Dateien können zu früh geladen werden und das Rendern blockieren. Wenn Sie WordPress verwenden, können Sie dies einfach beheben, indem Sie ein Caching-Plugin verwenden.

Möglicherweise haben Sie ein Problem mit Ihrem Webhost, das dazu führt, dass Ihre TTFB (Time To First Byte) etwas höher als eine halbe Sekunde ist.

Die meisten Hosts liegen jedoch höchstens 10 bis 20 Prozent über dieser Zeit, was kein großes Problem darstellt.

Das größte Problem sind fast immer Bilder und Iframes. Wenn Sie einem Beitrag ein Bild hinzufügen, wird es nicht für Mobilgeräte komprimiert, angepasst oder formatiert.

Sie können ein Plugin verwenden, um zu helfen. Smush ist ein beliebtes Plugin zum Komprimieren von Bildern beim Hochladen. Das Ergebnis wird Ihre Desktop-Version ein wenig verbessern, aber nicht Ihre mobile Version.

Um die Seitenladezeit auf Mobilgeräten zu verbessern, müssen Sie viel kleinere Bilder bereitstellen. Aber das ist mit viel Arbeit verbunden.

Bis vor kurzem war die beste Lösung, eine separate mobile Version Ihrer Website zu haben oder AMP-Seiten zu verwenden. In jedem Fall mussten alle Bilder auf der bestehenden Website durch Next-Gen-Bilder ersetzt werden.

Die mit beiden Lösungen verbundene Arbeit kann je nach Größe Ihrer Site Wochen oder Monate dauern.

Für die meisten Website-Eigentümer gilt: Wenn Sie nichts über eine Kreuzungsbeobachter-API oder eine img src, ein data src-Attribut, eine faule Klasse, img-Tags oder eine img-Klasse wissen, werden Sie keine neue mobile Website erstellen.

Seien wir ehrlich. Es ist alles zu schwer und zeitaufwändig.

Mehr zum Lesen: So stoppen Sie Kontaktformular- und Kommentar-Spam

Lazy-Loading-Verhalten anwenden

Glücklicherweise gibt es eine einfache Möglichkeit, die Ladezeit Ihrer mobilen Seite zu korrigieren. Die Antwort ist, alle Ihre Bilder träge zu laden.

Lazy Loading verzögert die Lieferung von Bildern, bis der Leser sie benötigt. Wenn ein Leser eine Webseite durchblättert, werden Bilder unter dem, was sichtbar ist, zurückgehalten.

Dadurch wird die anfängliche Ladezeit einer Seite gegenüber der Zeit für eifriges Laden enorm reduziert. Es gibt viele Plugins und Lösungen zum Hinzufügen von Lazy Loading zu Ihrem Blog oder Ihrer Website.

Lazy-Load-Tests ausführen

In den letzten Wochen habe ich Beta-Tests mit einer neuen Methode durchgeführt, um eine mobile Website zum Zingen zu machen.

Sie haben vielleicht schon von Content Delivery Networks, verzögertem Laden und zurückgestellten Offscreen-Bildern gehört.

Wenn Sie dies nicht getan haben, handelt es sich um Elemente, die nur Bilder liefern, wenn eine Seite geladen wird und wenn ein Benutzer auf der Seite nach unten scrollt. Sie haben dies möglicherweise auf Websites wie Medium in Aktion gesehen.

Wenn Sie eine Website zum ersten Mal besuchen, erscheint ein Bild für den Bruchteil einer Sekunde verschwommen. Sie werden Platzhalterbilder genannt.

Dann erscheint das Bild sofort klar.

Dies ist Lazy Loading in Aktion. Wenn ein Benutzer die Seite nach unten scrollt, werden Bilder erst geladen, wenn sie benötigt werden.

Dadurch funktioniert eine Seite superschnell, insbesondere auf Mobilgeräten. Ein Lazy Loader kann auf beliebig viele Bilder auf Webseiten angewendet werden.

Aber bei dieser Lösung fehlt noch ein Element. Die Bilder sind nicht in Next-Gen-Formaten.

Glücklicherweise gibt es jetzt eine Lösung, sodass Sie nicht alle Ihre Bilder ersetzen müssen. Optimole ist ein WordPress-Plugin, das viel Arbeit leistet.

Es lädt nicht nur Bilder verzögert, sondern ersetzt Ihre Bilder auch durch eine neue Bild-URL, die Bilder der nächsten Generation liefert.

Darüber hinaus werden Bilder im Handumdrehen skaliert.

Optimole auf die Probe stellen

Ich habe viele Tests durchgeführt und jedes Mal, wenn ich eine Seite überprüft habe, hat sie bei einem Google-Geschwindigkeitstest für Mobilgeräte sehr gut abgeschnitten.

Einer meiner Tests war mit einer Webseite in voller Breite, die zehn große, unkomprimierte Bilder ohne Größe enthielt.

Mit anderen Worten, ich habe einfach einen Haufen großer Bilder auf eine Seite gehauen und veröffentlicht. (Die Bilder wurden mit freundlicher Genehmigung von Pixabay bereitgestellt, sodass sie keiner Creative-Commons-Zuordnung bedürfen.)

Die Seite war so groß, dass ich Ihnen kein Bild zeigen konnte. Deshalb zeige ich es euch in einem Video.

Als ich die Seite bei Google getestet habe, war dies das Ergebnis.

Kein Wunder, wenn man die Größe aller Bilder bedenkt.

Dann habe ich Optimole aktiviert. Sie können die Einstellungen sehen, die ich unten verwendet habe. Das ist alles, was Sie tun müssen.

Was war das Ergebnis?

Für den Desktop eine perfekte Punktzahl.

Für Mobilgeräte eine nahezu perfekte Punktzahl.

Auf GTmetrix ist der Score wieder nahezu perfekt.

Denken Sie daran, dass dies reale Ergebnisse für eine Seite voller riesiger Bilder in hoher Auflösung sind.

Die Installation des Plugins und das Abrufen eines API-Schlüssels dauerte nur wenige Minuten, und nur wenige Sekunden, um die Einstellungen zu aktivieren.

So hatte ich in weniger als fünf Minuten eine nahezu perfekte mobile Seite und Website.

Erfahren Sie mehr über Optimole

Um das Plugin in der realen Welt in Aktion zu sehen, besuchen Sie die CodeinWP-Website. Es läuft auf Optimole, sodass Sie Tests zur Geschwindigkeit der Website durchführen können.

Sie können Ihre Website überprüfen, indem Sie auf die Optimole-Website gehen.

Klicken Sie auf die Schaltfläche Meine Website prüfen und geben Sie die URL Ihrer Website ein. Sie sehen eine Liste mit all Ihren Bildern und den Einsparungen, die Sie auf Ihrer Website erzielen können.

Wenn Sie eine kleine Website haben, steht eine kostenlose Version des Plugins zur Verfügung. Aber wenn Sie eine große Website haben, sollten Sie eine Premium-Option in Betracht ziehen.

Sie haben länger gebraucht, um diesen Artikel zu lesen, als Sie brauchen werden, um Ihre Website für Ihre mobilen Besucher superschnell zum Laufen zu bringen. Also, worauf wartest Du?

Mehr Lazy-Loading-Alternativen

Wenn Sie keine CDN-Bereitstellung von Nextgen-Images einrichten möchten, gibt es viele kostenlose Optionen, die Sie verwenden können.

WordPress enthält jetzt standardmäßig Lazy Loading. Sie haben jedoch wenig Kontrolle darüber, wie es funktioniert. Es ist normalerweise besser, ein Plugin zu verwenden, damit Sie die Leistung feinabstimmen können.

Smush ist ein beliebtes und kostenloses WordPress-Plugin zum Reduzieren von Bildern, wenn Sie sie in Ihre Medienbibliothek laden.

Aber es hat eine Option, um Lazy Loading zu aktivieren. Ich habe es auf einigen meiner Seiten ausprobiert und es funktioniert einwandfrei. Einfach die Option aktivieren, fertig.

A3 Lazy Load ist ein weiteres kostenloses Plugin. Ich benutze es schon seit langer Zeit auf vielen meiner Websites, einschließlich dieser.

Was ich daran mag, ist, dass ich viele Optionen verfeinern kann. Es hat die Möglichkeit, Widgets auszuschließen, was einige Sprungprobleme bei einigen Themen löst.

BJ Lazy Load gibt es schon lange. Es hat über 90.000 Benutzer. Allerdings wurde es schon lange nicht mehr aktualisiert.

Lazy Load ist ein kostenloses Plugin mit 60.000 Installationen. Es ist eine kostenlose Komponente von WP Rocket, einer All-in-One-Lösung für die Optimierung der Website-Geschwindigkeit.

Ein letztes Plugin ist Lazy Load für Videos. Es ist ein gutes Tool, wenn Sie viele Youtube-Videos auf Ihrer Website haben.

Was für eine Wahl! Jetzt haben Sie überhaupt keinen Grund mehr, eine langsame mobile Website zu haben.

Hinweis: Ich habe keine Zugehörigkeit zu diesem Produkt. Meine Optimole Bewertung basiert auf meinen Erfahrungen als Benutzer.

Mehr lesen: Kostenlose Website-Checker und SEO-Tools