Inhalt
- Was machen diese Tools?
- Leistungsbewertung
- Labor- und Felddaten
- Felddaten
- Leistungsmetriken
- Felddaten aus der realen Welt
- Klassifizierung schnell, moderat und langsam
- Labordaten
- Audits
- Leistung optimieren
- PageSpeed Insights API
- Dienste von Drittanbietern
- Sei schnell, bleib schnell!
Tools wie PageSpeed Insights (PSI) und Lighthouse können für die Überwachung der Leistung Ihrer Websites hilfreich sein. Aber warum brauchst du sie? Wenn Sie ein modernes Web-Erlebnis aufbauen, ist es wichtig zu messen, zu optimieren und zu überwachen, ob Sie schnell werden und schnell bleiben möchten. Die Leistung spielt eine wichtige Rolle für den Erfolg einer Website, da leistungsstarke Websites Benutzer besser einbeziehen und binden als leistungsschwache.
In diesem Artikel wird Addy Osmani, der das Web Developer Insights-Team in Chrome leitet, über das Beste seit geschnittenem Brot sprechen: Leistungsmessung und wie diese Tools Ihnen helfen können, Ihre Website zu verbessern.
Benötigen Sie ein neues Kit? Schauen Sie sich unsere Auswahl an Webdesign-Tools und Top-Laptops für die Programmierung an. Um eine ganz neue Website zu erstellen, finden Sie den besten Website-Builder für Ihre Anforderungen.
Was machen diese Tools?
Lighthouse bietet umfassende Leistungsmöglichkeiten und Zeitersparnis durch die Implementierung jeder Optimierung. Sie finden es im Chrome DevTools Audits-Bereich und in PageSpeed Insights.
PageSpeed Insights berichtet über die Leistung einer Seite auf Mobil- und Desktopgeräten und bietet Vorschläge, wie diese Seite verbessert werden kann.
PSI bietet sowohl Labor- (Leuchtturm) als auch Felddaten zu einer Seite. Labordaten
ist nützlich zum Debuggen von Leistungsproblemen, da es in einer kontrollierten Umgebung erfasst wird. Möglicherweise werden jedoch keine realen Engpässe erfasst. Felddaten sind nützlich, um eine echte Benutzererfahrung in der Praxis zu erfassen, verfügen jedoch nur über einen begrenzten Satz von Metriken.
Leistungsbewertung
Am Anfang des Berichts bietet PSI eine Bewertung, die die Leistung der Seite zusammenfasst. Diese Punktzahl wird durch Ausführen von Lighthouse ermittelt, um Labordaten über die Seite zu sammeln und zu analysieren. Eine Punktzahl von 90 oder höher wird als schnell und 50 bis 90 als moderat angesehen. Unter 50 gilt als langsam.
Labor- und Felddaten
Labordaten
Labordaten sind Leistungsdaten, die in einer kontrollierten Umgebung mit vordefinierten Geräte- und Netzwerkeinstellungen erfasst werden.
Dies bietet reproduzierbare Ergebnisse und Debugging-Funktionen, um Leistungsprobleme zu identifizieren, zu isolieren und zu beheben.
Stärken:
- Hilfreich beim Debuggen von Leistungsproblemen
- Ende-zu-Ende und bietet tiefe Sicht in die UX
- Bietet reproduzierbare Test- und Debugging-Umgebung
Einschränkungen:
- Möglicherweise werden keine Engpässe in der realen Welt erfasst
- Kann nicht mit realen Seiten-KPIs korrelieren
Hinweis: Tools wie Lighthouse und WebPageTest erfassen diese Art von Daten.
Felddaten
Felddaten (auch als Real User Monitoring oder RUM bezeichnet) sind Leistungsdaten, die aus realen Seitenlasten Ihrer Benutzer in freier Wildbahn erfasst werden.
Stärken:
- Erfasst echte Benutzererfahrung
- Ermöglicht die Korrelation mit Leistungsindikatoren für Unternehmen
Einschränkungen:
- Eingeschränkter Satz von Metriken
- Eingeschränkte Debugging-Funktionen
Hinweis: Öffentliche Datensätze wie der Chrome User Experience Report und Leistungstools wie der PageSpeed Insights Speed Score melden diesen Datentyp.
Leistungsmetriken
In der Vergangenheit wurde die Webleistung mit dem gemessen Belastung Veranstaltung. Dieser Moment entspricht jedoch nicht unbedingt dem, was den Benutzer interessiert. In den letzten Jahren haben Browserteams daran gearbeitet, eine Reihe neuer Metriken und APIs zu standardisieren, die die Leistung einer Webseite genauer erfassen.
Um sicherzustellen, dass die Metriken für Benutzer relevant sind, stellen wir ihnen einige wichtige Fragen:
- Passiert es Wurde die Navigation erfolgreich gestartet? Hat der Server geantwortet?
- Ist es nützlich? Wurden genügend Inhalte gerendert, damit Benutzer sich damit beschäftigen können?
- Ist es verwendbar? Können Benutzer mit der Seite interagieren oder ist sie beschäftigt?
- Ist es herrlich? Sind die Interaktionen glatt und natürlich, verzögerungsfrei?
Es gibt eine Reihe wichtiger Messgrößen, die gemessen werden müssen, und Lighthouse und PageSpeed Insights versuchen, einige wichtige zu erfassen.
- First Contentful Paint markiert den Zeitpunkt, zu dem der erste Text oder das erste Bild gemalt wird.
- Die Zeit bis zur Interaktion ist die Zeit, die benötigt wird, bis die Seite vollständig interaktiv ist (z. B. kann der Benutzer auf eine Antwort klicken und sie anzeigen).
- Der Geschwindigkeitsindex zeigt an, wie schnell der Inhalt einer Seite sichtbar gefüllt wird.
Und es gibt einige aufregende neue Metriken, die in diesem Jahr in unsere Tools aufgenommen werden:
- Größte inhaltliche Farbe (LCP): Misst die Zeit vom Laden der Seite bis zum Rendern des größten Textblocks oder Bildelements auf dem Bildschirm.
- Total Blocking Time (TBT): Misst die Gesamtzeit zwischen FCP und TTI, in der der Haupt-Thread lange genug blockiert wurde, um die Reaktionsfähigkeit der Eingabe zu verhindern
Erfahren Sie mehr über moderne Leistungsmetriken.
Felddaten aus der realen Welt
Wenn PSI eine URL erhält, wird diese im CrUX-Dataset (Chrome User Experience Report) nachgeschlagen. Falls verfügbar, meldet PSI die Metrikdaten First Contentful Paint (FCP) und First Input Delay (FID) für den Ursprung und möglicherweise die spezifische Seiten-URL.
Klassifizierung schnell, moderat und langsam
PSI klassifiziert Felddaten auch in drei Bereiche, in denen Erfahrungen beschrieben werden, die als schnell, moderat oder langsam gelten. PSI legt die folgenden Schwellenwerte für schnell / mittel / langsam basierend auf dem CrUX-Datensatz fest:
FCP:
- Schnell: 0 - 1.000 ms
- Mittel: 1.000 ms - 3.000 ms Langsam: über 3.000 ms
FID:
- Schnell: 0 - 100 ms
- Medium: 100 ms - 300 ms
- Langsam: über 300ms
Labordaten
PSI verwendet Lighthouse, um die angegebene URL zu analysieren und einen Leistungswert zu generieren, der die Leistung der Seite anhand verschiedener Metriken schätzt, darunter: Erster zufriedener Paint, Geschwindigkeitsindex, Zeit bis zur Interaktion und geschätzte Eingabelatenz (und um Ihre Website weiter zu verbessern, überprüfen Sie, ob Sie dies getan haben habe den idealen Webhosting-Service für Sie).
Jede Metrik ist mit einem Symbol gekennzeichnet:
- Eine schnelle Metrik wird mit einem grünen Häkchen angezeigt
- Moderat wird mit einem orangefarbenen Informationskreis angezeigt
- Langsam wird durch ein rotes Warndreieck angezeigt
Audits
Lighthouse unterteilt seine Audits in drei verschiedene Abschnitte:
- Opportunities bietet Vorschläge zur Verbesserung der Leistungsmetriken der Seite. Jeder Vorschlag in diesem Abschnitt schätzt, wie viel schneller die Seite geladen wird, wenn die Verbesserung implementiert wird
- Die Diagnose bietet zusätzliche Informationen darüber, wie eine Seite den Best Practices für die Webentwicklung entspricht
- Bestehende Audits gibt die Audits an, die von der Seite bestanden wurden
Leistung optimieren
Es gibt verschiedene Optimierungen, die Sie anwenden können, um Ihre Lighthouse / PageSpeed Insights-Metriken zu verbessern.
So verbessern Sie First Contentful Paint:
- Minimieren Sie CSS und entfernen Sie nicht verwendetes CSS
- Beseitigen Sie alle Ressourcen, die das Rendern blockieren
- Stellen Sie die Verbindung zu den gewünschten Ursprüngen her
- Reduzieren Sie die Serverantwortzeiten
- Vermeiden Sie mehrere Seitenumleitungen
- Vermeiden Sie eine übermäßige DOM-Größe
- Stellen Sie sicher, dass der Text beim Laden von Web-Schriftarten sichtbar bleibt (z. B. mit Schriftanzeige).
Das Senden großer JavaScript-Nutzdaten wirkt sich erheblich auf die Geschwindigkeit Ihrer Website aus, insbesondere darauf, wie schnell Benutzer mit Ihren Seiten interagieren können. Um die interaktive Zeit für eine Site zu verkürzen, können Sie:
- Minimieren und komprimieren Sie JavaScript
- Stellen Sie nur das JavaScript bereit, das Benutzer benötigen, wenn sie es benötigen (z. B. durch Code-Aufteilung). Reduzieren Sie die Auswirkungen von Code von Drittanbietern (z. B. verzögertes Laden dieser Ressourcen).
- Reduzieren Sie die Ausführungszeit von JavaScript, indem Sie kostspielige lange Aufgaben optimieren
- Laden Sie Schlüsselskripte vor, insbesondere wenn es sich bei Ihrer Site um eine einseitige Anwendung handelt
Viele dieser Optimierungen können auch Ihren Geschwindigkeitsindex verbessern. Weitere Leistungstipps für Lighthouse / PageSpeed-Ergebnisse erhalten Sie hier.
PageSpeed Insights API
Im Zusammenhang mit PSI steht die PageSpeed Insights-API, die freien Zugriff auf die Leistungsüberwachung von Webseiten bietet und Daten mit Verbesserungsvorschlägen zurückgibt. Die V5-API enthält Labordaten von Lighthouse und reale Daten aus dem Chrome User Experience Report (CrUX).
`` `js const url = 'https://wordpress.org'; const apiCall = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=$ {url}`; const response = warte auf den Abruf (apiCall); const json = warte auf response.json ();
Teams verwenden die API, um Dashboards, benutzerdefinierte Berichte und benutzerdefinierte Integrationen mit anderen Tools zur Messung der Benutzererfahrung zu erstellen. Die Antworten der API können verwendet werden, um alle Daten des zuvor behandelten PSI-Tools zu überwachen und grafisch darzustellen.
Mit PSI-Daten können hochgradig angepasste Berichte erstellt werden. Beispielsweise zeichnet Vrbo, eine Website für Ferienwohnungen, reale Daten aus der PSI-API auf, um langfristige Leistungstrends zu verfolgen und sicherzustellen, dass die Geschwindigkeit in der Reisebranche wettbewerbsfähig bleibt.
Web.dev Measure verwendet dasselbe Back-End wie PSI und verwendet diese Daten für die historische Messung im Zeitverlauf.
Es ist hilfreich, sich mit der Struktur der PSI-API-Antwort vertraut zu machen. Für Labor und Feld / reale Welt stehen Metrikinformationen zur Verfügung:
`` `js const url = 'https://wordpress.org'; const apiCall = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=$ {url}`; fetch (apiCall) .then (response => response.json ()) .then (json => {// Reale Metriken const cruxMetrics = {"Erster inhaltlicher Paint": json.loadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.category, " Verzögerung der ersten Eingabe ”: json.loadingExperience.metrics.FIRST_INPUT_DELAY_MS.category}; // Labormetriken const lighthouse = json.lighthouseResult; displayValue, 'Geschwindigkeitsindex': lighthouse.audits ['Geschwindigkeitsindex']. displayValue, 'Time To Interactive': lighthouse.audits ['interaktiv']. displayValue,}; // ...});
Die Antworten der PSI-API konzentrieren sich auf Leistungsdaten. Das heißt, Sie können die liefern ?Kategorie Argument, um zusätzliche Lighthouse-Überwachungskategorien anzugeben, für die Sie Daten wünschen.
`` `sh curl -i" https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://web.dev&category=pwa&category=performance&category=accessibility&category=best-practices&category=seo "
Sie können auch ein Gebietsschema- oder Strategieargument angeben (Desktop oder Mobile - das das Laden von Seiten auf einem Gerät der Median-Klasse - beispielsweise einem Moto G4 - in einem Mobilfunknetz simuliert).
Lighthouse unterstützt ab sofort Stack Packs, stapelspezifische Empfehlungen, die detailliertere Anleitungen zur Implementierung von Optimierungen enthalten (z. B. WordPress). Die API-Antworten von PSI unterstützen dies ebenfalls. Wenn Sie also eine WordPress-Site testen, sind diese Zeichenfolgen enthalten (z. B. eine Demo-URL für wordpress.org) https: // www.googleapis.com/pagespeedonline/v5/ runPagespeed? rl = https: //wordpress.org).
Das PSI-Tool unterstützt auch das Abrufen von PSI-API-Daten und das Rendern mit dem offiziellen Lighthouse Viewer. Bestehen psiurl als Parameter, um dies in Aktion zu sehen.
Eines der Tools, die wir auf PSI aufbauen, ist das psi-Knotenmodul, das bequeme Leistungsberichte in Ihrem Erstellungsprozess bietet.
`` `js const psi = require ('psi'); (async () => {// Den PageSpeed Insights-Bericht abrufen const {data} = warte auf psi ('https://web.dev'); console.log ('Speed score:', data.lighthouseResult.categories.performance .score); // Einen formatierten Bericht an das Terminal ausgeben und auf psi.output warten ('https://theverge.com'); console.log ('Done');}) ();
Sie können auch Google Sheets und einen Cron-Job verwenden, um die Überwachung mehrerer URLs (z. B. Konkurrenten) zu automatisieren, indem Sie regelmäßig die PSI-API anpingen. Eine praktische Anleitung und ein Blatt, das Sie kopieren können, finden Sie hier.
Dienste von Drittanbietern
Kontinuierliche Überwachungsdienste wie SpeedCurve, Calibre oder Treo nutzen Tools wie Lighthouse und PageSpeed Insights unter der Haube. Wenn Sie lieber einen Service haben möchten, der regelmäßig Ihre Leistungswerte überprüft und Ihnen Berichte sendet, anstatt Ihre eigenen zu erstellen, sollten Sie diese überprüfen. Verwenden Sie letztendlich die Lösung, die für Ihre Website am sinnvollsten ist!
Ebenso wichtig ist, dass Sie Ihre Vermögenswerte an einem sicheren Ort aufbewahren können. Informieren Sie sich über die besten Cloud-Speicheroptionen für Sie.
Sei schnell, bleib schnell!
Wenn es um die Benutzererfahrung geht, ist Geschwindigkeit wichtig. Es ist wichtig, die verschiedenen Erkenntnisse zu verstehen, die Leistungsmetriken bieten, und dann diejenigen zu ermitteln, die für Ihre Benutzererfahrung wichtig sind. Tools wie Lighthouse und PageSpeed Insights können Ihre Erfahrung messen und Möglichkeiten zur Verbesserung aufzeigen. Sie können ein hilfreicher Bestandteil der Toolbox Ihrer Website sein, um schnell zu werden und schnell zu bleiben.
