Auf Tilda ist Lazy Loading standardmäßig für alle Websites aktiviert. Es ermöglicht ein schnelleres Laden von Websites, auch auf mobilen Geräten.
Die Implementierung von Lazy Loading ist ein weiterer Schritt zur Optimierung von Websites auf Tilda für schnelleres Laden. Die Technologien entwickeln sich ständig weiter, und wir arbeiten ständig daran, das Laden noch schneller zu machen.
Lazy Load ist ein Plugin, das verhindert, dass Bilder außerhalb des Anzeigebereichs geladen werden. Das heißt, Bilder werden geladen, wenn der Benutzer auf der Seite scrollt. Schauen wir uns an, wie es funktioniert.
Wählen wir eine reguläre Tilda-Vorlage aus und veröffentlichen sie:http://project130385.tilda.ws/
Öffnen Sie die Entwicklerkonsole des Browsers, aktivieren Sie Slow Speed Imitation (3G) in den Einstellungen und aktualisieren Sie die Seite.
Wählen wir eine reguläre Tilda-Vorlage aus und veröffentlichen sie:http://project130385.tilda.ws/
Öffnen Sie die Entwicklerkonsole des Browsers, aktivieren Sie Slow Speed Imitation (3G) in den Einstellungen und aktualisieren Sie die Seite.
DOMContentLoaded: 628 Millisekunden
Dieser Parameter zeigt an, dass alle grundlegenden Skripte und HTML geladen wurden, sodass der Benutzer die Seite sofort anzeigen kann.
Ziel: 1,65 Sekunden
Dieser Parameter gibt an, wie lange es gedauert hat, bis die gesamte Website geladen ist.
Übertragen: 263 KB
Dieser Parameter zeigt an, wie viele Daten übertragen wurden (in Bytes).
Dieser Parameter zeigt an, dass alle grundlegenden Skripte und HTML geladen wurden, sodass der Benutzer die Seite sofort anzeigen kann.
Ziel: 1,65 Sekunden
Dieser Parameter gibt an, wie lange es gedauert hat, bis die gesamte Website geladen ist.
Übertragen: 263 KB
Dieser Parameter zeigt an, wie viele Daten übertragen wurden (in Bytes).
Diese Zahlen sehen sehr optimistisch aus, aber alles ist relativ, nicht wahr? Gehen Sie zum Website-Einstellungen → Mehr und aktivieren Sie das Kontrollkästchen "Lazy Load für Bilder deaktivieren". Testen Sie die Seite erneut.
DOMContentLoaded: 697 Millisekunden
Dieser Parameter zeigt an, dass alle grundlegenden Skripte und der HTML-Code geladen wurden, sodass der Benutzer die Seite sofort anzeigen kann.
Ziel: 10,14 Sekunden
Dieser Parameter zeigt an, wie lange es gedauert hat, bis die gesamte Website geladen ist.
Übertragen: 1,8 MB
Dieser Parameter zeigt an, wie viele Daten übertragen wurden (in Bytes).
Dieser Parameter zeigt an, dass alle grundlegenden Skripte und der HTML-Code geladen wurden, sodass der Benutzer die Seite sofort anzeigen kann.
Ziel: 10,14 Sekunden
Dieser Parameter zeigt an, wie lange es gedauert hat, bis die gesamte Website geladen ist.
Übertragen: 1,8 MB
Dieser Parameter zeigt an, wie viele Daten übertragen wurden (in Bytes).
Die Gesamtladezeit der Seite und die übertragene Datenmenge haben sich vervielfacht.
Mal sehen, was wir mit PageSpeed Insights noch lernen können. Sehen wir uns die Seite mit deaktivierter Optimierung an.
Mal sehen, was wir mit PageSpeed Insights noch lernen können. Sehen wir uns die Seite mit deaktivierter Optimierung an.
Lassen Sie uns nun Lazy Load für Bilder aktivieren:
Lazy Load blockiert Bilder, die für Benutzer nicht sichtbar sind,
Dadurch können Websites schneller geladen werden.
Dadurch können Websites schneller geladen werden.
Notiz
Wie entferne ich den JavaScript- und CSS-Code, der verhindert, dass der obere Teil der Seite angezeigt wird?
Diese Frage stellt sich oft nach dem Test. Google rät davon ab, Skripte oben auf der Seite zu verwenden.
Theoretisch können Sie die Skripte entfernen. Sie müssen jedoch bedenken, dass es sich um eine automatisierte Analyse handelt, die nicht genau ist. Wie wir gesehen haben, laden die Seiten sehr schnell, wenn Lazy Load aktiviert ist, weil wir alles optimiert haben, was es zu optimieren gab. Die Analyse hat gezeigt, dass das Entfernen von Skripten 0,3 Sekunden spart, aber es macht kaum einen Unterschied.
Aus diesem Grund empfehlen wir, die Ergebnisse des automatisierten Tests zu ignorieren, der so schlecht auf Skripte am oberen Rand der Seite reagiert.
Übrigens, wie besteht Google seinen eigenen Test?
Aus diesem Grund empfehlen wir, die Ergebnisse des automatisierten Tests zu ignorieren, der so schlecht auf Skripte am oberen Rand der Seite reagiert.
Übrigens, wie besteht Google seinen eigenen Test?
Hoppla!
