Ein sehr effektives Werkzeug, um zu visualisieren, woher genau der Cumulative Layout Shift (CLS) kommt, und um Ihre Seitenbewertung und damit das Besuchererlebnis zu verbessern.
Es erzeugt ein animiertes GIF, das die Bewegungen der Elemente während des Ladevorgangs Ihrer Seite anzeigt.
In manchen Fällen wesentlich effektiver als ein Wasserfall-Lastdiagramm.
| Analyse kumulativer Layoutverschiebungen | Leuchtturm | WebPageTest | Chrome-Entwicklertools |
|---|---|---|---|
| Ausgabe: Es erzeugt ein GIF, das die Bewegungen der Elemente im Anzeigebereich visualisiert, und gibt den CLS-Wert zurück. Bei Seiten mit vielen vertikalen Bewegungen kann es schwierig sein, die verschobenen Elemente zu erkennen. | Ausgabe: Der Bericht führt CLS unter First Contentful Paint, Speed Index, Total Blocking Time und Largest Contentful Paint auf. Standardmäßig wird ein HTML-Bericht ausgegeben; JSON ist über einen Parameter verfügbar. | Ausgabe: Der Filmstreifen zeigt Schlüsselbilder des Ladevorgangs, und die Wasserfalldiagramme enthalten eine mit dem Filmstreifen synchronisierte rote Linie. Die Dokumentation definiert CLS als Maß dafür, wie stark sich das Layout im Viewport während des Seitenladens verschiebt. | Ausgabe: Die Layoutverschiebungsanzeige im Leistungsbereich stellt Verschiebungen als violette Rauten dar, die in Gruppen angeordnet sind. Beim Überfahren mit der Maus wird das Element im Ansichtsfenster hervorgehoben, und die Registerkarte „Zusammenfassung“ zeigt Zeitangaben, Bewertungen, betroffene Elemente und mögliche Ursachen an. |
| Testbedingungen: Die Desktop-Ansicht ist auf 1920 x 1080 Pixel festgelegt. Auf Mobilgeräten wird das Lighthouse Nexus 5X-Profil verwendet, und CPU und Netzwerk werden gedrosselt, um eine gute 3G-Verbindung zu simulieren. | Testbedingungen: Es läuft lokal in Chrome, über die Entwicklertools, die Kommandozeile, ein Node-Modul oder PageSpeed Insights. Für die Kommandozeile wird Node 22 oder höher benötigt. | Testbedingungen: Die Tests werden auf realen Browsern an Standorten weltweit unter anpassbaren Netzwerkbedingungen durchgeführt. Chrome liefert die meisten Informationen. | |
| CLS-Definition: Version 1.2.0 verwendet die Metrik für das maximale Sitzungsfenster. Während des Tests wird eine Drosselung angewendet. | CLS-Definition: Laborwerkzeuge wie Lighthouse erfassen Verschiebungen nur während des Seitenaufbaus, daher können die Werte niedriger sein als das, was reale Benutzer erleben. | CLS-Definition: Es gelten die gleichen Laborbeschränkungen. Die Punktzahl ergibt sich aus dem Produkt von Aufprallanteil und Distanzanteil; der Zielwert liegt bei 0,1 oder weniger. | CLS-Definition: Jede Schicht hat ihre eigene Punktzahl im Tab „Zusammenfassung“. CLS gruppiert Schichten in Sitzungsfenster von bis zu 5 Sekunden mit Lücken von weniger als 1 Sekunde. |
| Offenheit und Automatisierung: Eine Kommandozeilenversion wird mit npm installiert (layout-shift-gif). Sie akzeptiert URL-, Geräte- und Ausgabeparameter, optional eine Cookie-Datei und unterstützt selbstsignierte HTTPS-Zertifikate. Die Seite bittet um optionale Spenden via Ko-fi. | Offenheit und Automatisierung: Lighthouse ist unter der Apache-2.0-Lizenz lizenziert. Es kann über Lighthouse CI in CI-Umgebungen und als Node-Modul ausgeführt werden. | Offenheit und Automatisierung: Das Repository enthält einen Master-Branch unter Polyform Shield 1.0.0 und einen Apache-Branch unter Apache 2.0. Es dokumentiert den Betrieb einer eigenen Instanz und eine REST-API. Für die meisten Experimente wird WebPageTest Pro benötigt. |
Behandelte Themen: Cumulative Layout Shift (CLS), Page Score, Besuchererfahrung, animiertes GIF, Elementbewegung, Ladeoptimierung, Benutzeroberfläche, Web-Performance, visuelle Analyse, Ladediagramm, Webmetriken, ISO 9241, ISO/IEC 25010, ISO 25012, ISO 25000 und ISO 9241-11.
Empfehlen Sie Ihr bestes Online-Tool:
Kennen Sie eine bessere, ergänzende oder alternative Website zu der oben genannten?
> Hier vorschlagen <
Bilder in voller Größe und Downloads sind nur für registrierte Mitglieder 100% kostenlos verfügbar.
> Login <
