Suche nach Möglichkeiten zur Verbesserung der Nutzererfahrung mit den Webtools von Chrome.
Heute stellen wir neue Tool-Funktionen in Lighthouse, PageSpeed und in den Entwicklertools vor, mit denen ihr wie Ihre Website im Hinblick auf Web Vitals verbessert werden kann.
Lighthouse ist eine automatisiertes Open-Source-Tool zur Verbesserung der Qualität von Webseiten Sie finden sie in der Chrome- der Entwicklertools-Suite von Google Cloud. gegen eine beliebige Webseite, die öffentlich ist oder eine Authentifizierung erfordert. Sie finden Lighthouse auch in PageSpeed Statistiken, CI und WebPageTest
Lighthouse 7.x umfasst neue Funktionen wie Screenshots von Elementen zur leichteren visuellen Prüfung von Teile Ihrer UI, die sich auf Messwerte zur Nutzererfahrung auswirken (z.B. welche Knoten zum Layout beitragen) Umschalttaste)
Außerdem unterstützen wir jetzt auch Screenshots von Elementen in PageSpeed Insights, sodass ihr noch mehr Probleme mit einmaligen Leistungsdurchläufen von Seiten zu erkennen.
Core Web Vitals messen
Lighthouse kann synthetisch messen die Core Web Vitals-Messwerte, darunter Largest Contentful Paint, Cumulative Layout Shift und Total Blocking Time (ein Lab-Proxy für First Input Delay). Diese Messwerte spiegeln das Laden, die Layoutstabilität und die Bereitschaft der Interaktion wider. Andere Messwerte wie Der Fokus von First Contentful Paint wird in der Zukunft des Core Web Vitals ebenfalls verfügbar.
Die „Messwerte“ des Lighthouse-Berichts enthält Lab-Versionen dieser Messwerte. Sie können und fasst zusammen, welche Aspekte der User Experience Ihre Aufmerksamkeit erfordern.
<ph type="x-smartling-placeholder">
Feldmesswerte, wie sie in der Chrome-Nutzererfahrung Melden oder RUM, haben das nicht Einschränkungen und sind eine wertvolle Ergänzung zu Lab-Daten, da sie die Erfahrung echter Nutzer widerspiegeln. haben. Felddaten bieten keine Diagnoseinformationen aus dem Labor. Hand in Hand.
Ermitteln, wo Web Vitals-Werte verbessert werden können
Largest Contentful Paint-Element identifizieren
Der LCP ist ein Maß für die wahrgenommene Ladeerfahrung. Sie markiert den Punkt während des Seitenaufbaus, Primär- oder "größte" – Content wurde geladen und ist für den Nutzer sichtbar.
Lighthouse hat das „Largest Contentful Paint“-Element um zu ermitteln, welches Element Large Contentful Paint. Wenn Sie den Mauszeiger auf das Element bewegen, wird es im Hauptbrowserfenster markiert.
Wenn es sich bei diesem Element um ein Bild handelt, sind diese Informationen ein nützlicher Hinweis für die Optimierung des Ladevorgangs dieses Bilds. Lighthouse umfasst eine Reihe von Prüfungen zur Bildoptimierung, mit denen Sie Wenn Ihre Bilder besser komprimiert, in der Größe angepasst oder in einem optimalen, modernen Bild bereitgestellt werden könnten Format.
Möglicherweise finden Sie auch LCP Bookmarklet von Annie Sullivan ist nützlich, um das LCP-Element mit nur einem Klick in einem roten Rechteck zu identifizieren.
Spät entdeckte Bilder vorab laden, um den LCP zu verbessern
Um Largest Contentful Paint zu verbessern, laden Sie Ihren kritischen Helden vorab wenn diese zu spät vom Browser gefunden werden. Eine späte Erkennung kann auftreten, Das JavaScript-Bundle muss geladen werden, bevor das Bild sichtbar ist.
<ph type="x-smartling-placeholder">
Einige häufig gestellte Fragen zum Vorabladen von LCP-Bildern sind ebenfalls hilfreich kurz darüber sprechen.
Können responsive Bilder vorab geladen werden? Ja.
Angenommen, Sie haben ein responsives Hero-Image, wie unten mit srcset und sizes angegeben:
<img src="lighthouse.jpg"
srcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w" sizes="50vw" alt="A helpful
Lighthouse">
Dank der Attribute imagesrcset und imagesizes, die dem Attribut link hinzugefügt wurden, können wir
Ein responsives Bild mit derselben Bildauswahllogik, die von srcset und sizes verwendet wird, vorab laden:
<link rel="preload" as="image" href="lighthouse.jpg"
imagesrcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w"
imagesizes="50vw">
Werden bei der Prüfung auch Möglichkeiten für das Vorabladen hervorgehoben, wenn das LCP-Bild über ein Preisvergleichsportal definiert wird Hintergrund? Ja.
Jedes Bild, das über CSS-Hintergrund oder <img> als LCP-Bild gekennzeichnet wurde, kommt infrage,
die in einer Wassertiefe von drei oder mehr
Wasserfällen entdeckt wurden.
Lazy Loading von Bildern, die nicht auf dem Bildschirm zu sehen sind und dies für den LCP vermeiden
Nicht sichtbare Bilder, die für die anfängliche Nutzererfahrung nicht entscheidend sind, können per Lazy-Loading geladen werden. Mit dieser Technik wird der Download eines Bildes verzögert, bis der Nutzer in dessen Nähe scrollt. Dadurch werden Netzwerkkonflikte um wichtige Assets reduziert und in einigen Fällen der LCP verbessert. Die Prüfung Nicht sichtbare Bilder zurückstellen kann hier Abhilfe schaffen:
Kritische „above the fold“-Bilder wie „Largest Contentful Paint“ sollten nicht per Lazy Loading geladen werden. Andernfalls kann sich das Laden des LCP-Bilds verzögern. In Lighthouse wird über die Option „Largest Contentful Paint-Bild wurde mit Lazy Loading geladen“ gekennzeichnet, wenn ein LCP-Bild fälschlicherweise per Lazy Loading geladen wird. Prüfung:
CLS-Beiträge identifizieren
Cumulative Layout Shift ist ein Maß für die visuelle Stabilität. Sie gibt an, wie stark eine Seite dass sich die Inhalte optisch bewegen. Lighthouse hat ein Audit zum Debuggen von CLS mit dem Titel „ Layout Shifts“.
Bei dieser Prüfung werden DOM-Elemente hervorgehoben, die am meisten zu Verschiebungen der Seite beitragen. Im Element In der Spalte links sehen Sie die Liste dieser DOM-Elemente und rechts ihre Gesamt-CLS. Beitrag.
Dank der Screenshot-Funktion von Lighthouse-Elementen können wir beide eine Vorschau des Hauptelemente, die in der Prüfung aufgeführt wurden, sowie zum Zoomen klicken, um eine bessere Übersicht zu erhalten:
Für CLS nach dem Laden kann eine permanente Visualisierung mit Rechtecken sinnvoll sein. welche Elemente am meisten zu CLS beigetragen haben. Diese Funktion finden Sie in Tools von Drittanbietern wie Core Web Vitals-Dashboard von SpeedCurve und ich verwende gern das Layout Shift-GIF von Defaced Generator für:
Wenn ich die Probleme mit Layout Shifts für die gesamte Website betrachten möchte, nutze ich die Kernfunktionen der Search Console Web Vitals-Bericht. So kann ich sehen, die Arten von Seiten mit hohem CLS-Wert auf meiner Website (in diesem Fall Teile, die ich aufwenden muss):
<ph type="x-smartling-placeholder">
CLS bei Bildern ohne Abmessungen identifizieren
Um den Cumulative Layout Shift zu begrenzen, der durch Bilder verursacht wird ohne Abmessungen, fügen Sie die Attribute für Breite und Höhe in Ihre Bilder und Videoelemente ein. Dieser Ansatz stellt sicher, dass der Browser den richtigen Speicherplatz im Dokument zuteilen kann. während das Bild geladen wird.
Siehe Festlegen von Höhe und Breite für Bilder ist wichtig. Noch einmal für eine Gute Beschreibung, wie wichtig es ist, über die Bildabmessungen und das Seitenverhältnis nachzudenken.
CLS in Anzeigen identifizieren
Mit Publisher Ads for Lighthouse können Sie Ermitteln von Möglichkeiten zur Verbesserung des Ladeerlebnisses von Anzeigen auf Ihrer Seite, einschließlich Beiträgen Layout Shifts und lange Aufgaben, die sich darauf auswirken können, wie schnell Ihre Seite von den Nutzern verwendet werden kann. In Lighthouse können Sie über Community-Plug-ins aktivieren.
Denken Sie daran, dass Anzeigen die größten Mitwirkenden an Layout Shifts im Web. Folgendes ist wichtig:
- Vorsicht beim Platzieren nicht fixierter Anzeigen im oberen Bereich des Darstellungsbereichs
- Verschiebungen werden vermieden, indem die größtmögliche Größe für die Anzeigenfläche reserviert wird.
Nicht zusammengesetzte Animationen vermeiden
Nicht zusammengesetzte Animationen können auf Low-End-Geräten aufgrund ihrer starken JavaScript-Aufgaben beschäftigen den Hauptthread. Solche Animationen können Layout Shifts zur Folge haben.
Wenn Chrome feststellt, dass eine Animation nicht zusammengesetzt werden konnte, wird sie an einen Entwicklertools-Trace gemeldet Mit Lighthouse kann aufgelistet werden, welche Elemente mit Animationen nicht zusammengesetzt wurden aus welchem Grund. Sie finden diese im Abschnitt Nicht zusammengesetzte Objekte vermeiden Animationen prüfen.
Debug First Input Delay / Total Blocking Time / Long Tasks (Gesamte Blockierzeit)
„Erste Eingabe“ misst die Zeit ab der ersten Interaktion eines Nutzers mit einer Seite (z.B. wenn er auf eine auf eine Schaltfläche klicken oder ein benutzerdefiniertes JavaScript-Steuerelement verwenden, mit der Verarbeitung von Event-Handlern als Reaktion auf diese Interaktion beginnen können. Langes JavaScript Aufgaben können sich auf diesen Messwert und den Proxy für diesen Messwert auswirken: Gesamtblockierungszeit.
Lighthouse umfasst das Audit Lange Hauptthreadaufgaben vermeiden, in dem Aufgaben im Hauptthread. Dies kann hilfreich sein, um die Personen mit den größten Beeinträchtigungen Eingabeverzögerung. In der linken Spalte sehen wir die URL der Skripts, die für den langen Hauptthread verantwortlich sind. Aufgaben.
Rechts sehen Sie die Dauer dieser Aufgaben. Zur Erinnerung: Lange Aufgaben sind Aufgaben, länger als 50 Millisekunden ausgeführt werden. Dadurch wird der Hauptthread so lange blockiert, die Framerate oder Eingabelatenz beeinflussen.
Wenn Sie Drittanbieterdienste für das Monitoring in Betracht ziehen, gefällt mir auch die Ausführung des Hauptthreads gut. über die Zeitachse, dass Calibre zur Visualisierung dieser Kosten an, um sowohl übergeordnete als auch untergeordnete Aufgaben hervorzuheben, Aufgaben, die die Interaktivität beeinflussen.
Netzwerkanfragen blockieren, um die Vorher/Nachher-Auswirkungen in Lighthouse zu sehen
Chrome-Entwicklertools unterstützen das Blockieren von Netzwerken Anfragen um die Auswirkungen einzelner Ressourcen, die entfernt werden oder nicht verfügbar sind, zu sehen. Das kann hilfreich sein zu den Kosten einzelner Skripts (z. B. Einbettungen oder Tracker von Drittanbietern) wie „Total Blocking Time“ (TBT) und „Time to Interactive“.
Die Blockierung von Netzwerkanfragen funktioniert auch mit Lighthouse. Werfen wir nun einen kurzen Blick Lighthouse-Bericht für eine Website Die Leistungsbewertung liegt bei 63/100 mit einer TBT von 400 ms. Im Code sehen wir uns an, laden wir auf dieser Website ein Intersection Observer-Polyfill in Chrome, das nicht erforderlich ist. Lassen Sie uns blockieren!
Wir können in den Entwicklertools im
Bereich „Network“ mit der rechten Maustaste auf ein Skript klicken
und dann auf Block Request URL klicken, um
. Jetzt machen wir das für den Intersection-Observer-Polyfill.
Jetzt können wir Lighthouse noch einmal ausführen. Dieses Mal sehen wir, dass sich unsere Leistungsbewertung verbessert hat (70/100), da hat eine Gesamtblockierungszeit (400 ms = > 300 ms).
Kostspielige Einbettungen von Drittanbietern durch eine Fassade ersetzen
Häufig werden Ressourcen von Drittanbietern verwendet, um Videos, Beiträge in sozialen Medien oder Widgets in Seiten. Standardmäßig werden die meisten Einbettungen sofort geladen und können kostspielige Nutzlasten enthalten, sich negativ auf die User Experience auswirken. Dies ist Verschwendung, wenn der Drittanbieter nicht kritisch ist (z.B. muss der Nutzer scrollen, bevor er sie sieht).
Ein Muster zur Verbesserung der Leistung solcher Widgets ist das Lazy Loading für den Nutzer durch Lazy Loading. Interaktion. Hierzu wird ein schlanke Vorschau des Widgets (Fassade) anzeigen und die Vollversion nur laden, wenn ein Nutzer mit der damit nichts. In Lighthouse werden Ressourcen von Drittanbietern empfohlen, Lazy-Loading mit einer Fassade, etwa YouTube-Videoeinbettungen.
Zur Erinnerung: In Lighthouse wird Drittanbietercode hervorgehoben, der den Hauptthread länger als 250 ms blockiert. Dadurch können alle Arten von Drittanbieterskripts (auch solche, die von Google erstellt wurden) verfügbar gemacht werden, die sich besser auf ein Verzögerungs- oder Lazy Loading auswirken könnten, wenn zum Ansehen der gerenderte Inhalt Scrollen erforderlich ist.
Mehr als Core Web Vitals
Neben den Core Web Vitals bieten auch die neuesten Versionen von Lighthouse und PageSpeed Insights Versuchen Sie, konkrete Hinweise zu geben, mit denen Sie die Geschwindigkeit von JavaScript-lastigen Websites verbessern können. Anwendungen laden können, wenn Quellzuordnungen aktiviert sind.
Dazu gehört eine wachsende Zahl von Audits zur Senkung der Kosten für JavaScript auf Ihrer Seite, z. B. da die Abhängigkeit von Polyfills und Duplikaten reduziert wird, die für die Nutzerfreundlichkeit möglicherweise nicht benötigt werden.
Weitere Informationen zu den Core Web Vitals-Tools erhalten Sie in der Lighthouse-App Ihr Team Ihr Twitter-Konto und What's new in Entwicklertools.
Hero-Image von Mercedes Mehling auf Unsplash