Auf Tilda ist "Lazy Loading" standardmäßig für alle Websites aktiviert. Dadurch können Websites schneller geladen werden, 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 das Laden von Bildern außerhalb des Sichtbereichs verhindert. Das heißt, die Bilder werden geladen, wenn der Benutzer die Seite scrollt. Schauen wir uns einmal an, wie es funktioniert.
Wählen Sie eine reguläre Vorlage Tilda und veröffentlichen Sie sie: http://project130385.tilda.ws/
Öffnen Sie die Entwicklerkonsole des Browsers, aktivieren Sie in den Einstellungen die Nachahmung der langsamen Geschwindigkeit (3G) und aktualisieren Sie die Seite.
Wählen Sie eine reguläre Vorlage Tilda und veröffentlichen Sie sie: http://project130385.tilda.ws/
Öffnen Sie die Entwicklerkonsole des Browsers, aktivieren Sie in den Einstellungen die Nachahmung der langsamen Geschwindigkeit (3G) und aktualisieren Sie die Seite.
DOMContentLoaded: 628 Millisekunden
Dieser Parameter zeigt an, dass alle grundlegenden Skripte und der HTML-Code geladen wurden, so dass der Benutzer die Seite sofort betrachten kann.
Finish: 1.65 seconds
Dieser Parameter gibt an, wie lange es gedauert hat, bis die gesamte Website geladen war.
Übertragen: 263KB
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, so dass der Benutzer die Seite sofort betrachten kann.
Finish: 1.65 seconds
Dieser Parameter gibt an, wie lange es gedauert hat, bis die gesamte Website geladen war.
Übertragen: 263KB
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 zu den Website-Einstellungen → Mehr und aktivieren Sie das Kontrollkästchen "Lazy Load für Bilder deaktivieren". Testen Sie die Seite noch einmal.
DOMContentLoaded: 697 Millisekunden
Dieser Parameter zeigt an, dass alle grundlegenden Skripte und der HTML-Code geladen wurden, was bedeutet, dass der Benutzer die Seite sofort anzeigen kann.
Finish: 10.14 seconds
Dieser Parameter zeigt an, wie lange es gedauert hat, bis die gesamte Website geladen war.
Übertragen: 1.8MB
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, was bedeutet, dass der Benutzer die Seite sofort anzeigen kann.
Finish: 10.14 seconds
Dieser Parameter zeigt an, wie lange es gedauert hat, bis die gesamte Website geladen war.
Übertragen: 1.8MB
Dieser Parameter zeigt an, wie viele Daten übertragen wurden (in Bytes).
Die Gesamtladezeit der Seite und die Menge der übertragenen Daten haben sich vervielfacht.
Mal sehen, was wir mit PageSpeed Insights noch lernen können. Prüfen wir die Seite mit ausgeschalteter Optimierung.
Mal sehen, was wir mit PageSpeed Insights noch lernen können. Prüfen wir die Seite mit ausgeschalteter Optimierung.
Aktivieren wir nun Lazy Load für Bilder:
Lazy Load blockiert Bilder, die für die Benutzer nicht sichtbar sind,
, wodurch Websites schneller geladen werden können.
, wodurch Websites schneller geladen werden können.
Hinweis
Wie kann ich den JavaScript- und CSS-Code entfernen, der verhindert, dass der obere Teil der Seite angezeigt wird?
Diese Frage stellt sich oft nach der Teilnahme am Test. Google rät davon ab, oben auf der Seite Skripte zu verwenden.
Theoretisch können Sie die Skripte entfernen. Sie müssen jedoch bedenken, dass es sich um eine automatische 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 das macht kaum einen Unterschied.
Deshalb empfehlen wir, die Ergebnisse des automatisierten Tests zu ignorieren, der so schlecht auf Skripte im oberen Teil der Seite reagiert.
Übrigens, wie hat Google seinen eigenen Test bestanden?
Deshalb empfehlen wir, die Ergebnisse des automatisierten Tests zu ignorieren, der so schlecht auf Skripte im oberen Teil der Seite reagiert.
Übrigens, wie hat Google seinen eigenen Test bestanden?
Ups!
