Es gibt Tools, die dabei helfen, die Seitenleistung zu überwachen und deine Verbesserungen zu bewerten. Eines der besten ist PageSpeed Insights. Es ist als Webanwendung und als Lighthouse-Tab in den DevTools von Chrome verfügbar (die gleichen DevTools gibt es auch in Edge, Opera, Brave und Vivaldi).
Die Leistung von Webseiten ist wichtiger denn je. Die Nutzerinnen und Nutzer erwarten ein flüssiges und reaktionsschnelles Erlebnis, das es mit Desktop-Anwendungen aufnehmen kann. Außerdem messen die Core Web Vitals von Google die Seitenleistung – sie beeinflusst den PageRank und deine Bemühungen zur Suchmaschinenoptimierung.
Mehr als ein Drittel aller Websites werden mit WordPress betrieben, aber die Leistung wird durch ineffektives Hosting, langsame Themes und eine übermäßige Abhängigkeit von Plugins beeinträchtigt. Die meisten Probleme kannst du beheben, indem du zu einem guten Webhoster wechselst und Best-Practice-Performancetechniken anwendest.
Zugriff auf Lighthouse
Starte Lighthouse, indem du die Seite, die du untersuchen willst, öffnest und Strg/Cmd + Umschalt + I drückst oder im Menü unter Weitere Tools den Punkt Entwicklertools wählst. Wechsle auf die Registerkarte Lighthouse und klicke auf die Schaltfläche Seitenladen analysieren. Die Ergebnisse werden nach ein paar Sekunden angezeigt:
Du kannst die Prozentsätze auf der obersten Ebene aufschlüsseln, um weitere Informationen und Hinweise auf bekannte Probleme zu erhalten. Das Tool ist von unschätzbarem Wert, hat aber auch seine Schattenseiten:
- Du musst für jede Seite, die du testest, manuell einen Durchlauf starten.
- Es ist nicht einfach, aufzuzeichnen, wie sich Faktoren im Laufe der Zeit verbessert oder verschlechtert haben.
- Es gibt eine Menge Daten zu prüfen und es ist leicht, etwas falsch zu machen.
- Die technischen Details sind für Entwickler/innen gedacht. Für Kunden und Manager, die einen schnellen Überblick über den Fortschritt haben wollen, ist das möglicherweise zu viel.
- Die Lighthouse-Läufe können von den lokalen Geräte- und Netzwerkgeschwindigkeiten beeinflusst werden, was zu falschen Annahmen führen kann.
Die PageSpeed Insights API bietet eine Möglichkeit, diese Probleme zu lösen, damit die Tests automatisiert, aufgezeichnet und verglichen werden können.
Was ist die PageSpeed Insights API?
Google stellt eine kostenlose PageSpeed Insights REST API zur Verfügung, die Daten im JSON-Format mit allen Lighthouse-Kennzahlen und mehr zurückgibt. Damit kannst du Seitenläufe automatisieren, die resultierenden Daten speichern, Änderungen im Laufe der Zeit überprüfen und genau die Informationen anzeigen, die du brauchst.
Die PageSpeed Insights API ahmt nach, wie Google deine Website sieht. Du kannst alle paar Tage einen Bericht erstellen oder immer dann, wenn du ein Leistungsupdate veröffentlichst.
Die Ergebnisse sind hilfreich, geben aber nicht unbedingt Aufschluss über die tatsächliche Nutzererfahrung. Die Browser Performance API ist die bessere Option, wenn du die tatsächliche Leistung auf allen Geräten und in allen Netzwerken deiner Nutzer/innen überwachen willst.
PageSpeed Insights API Schnellstart
Kopiere die folgende Adresse in deinen Webbrowser und bearbeite die url, um die Leistung deiner Seite zu beurteilen:
https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://www.yoursite.com/
Firefox ist ideal, weil er einen eingebauten JSON-Viewer hat, obwohl es für Chrome Erweiterungen gibt, die die gleiche Funktionalität bieten. Die Gesamtbewertung der Lighthouse-Leistung wird unten hervorgehoben:
Du kannst den API-URL-Abfrage-String für deine eigenen Seiten und Einstellungen ändern. Der einzige erforderliche Parameter ist url, z.B.
url=https://mysite.com/page1
Ein Desktop-Test wird standardmäßig ausgeführt, aber du kannst ihn explizit mit anfordern:
strategy=desktop
oder zu Mobile wechseln mit:
strategy=mobile
Es werden nur Leistungstests durchgeführt, es sei denn, du gibst eine oder mehrere Kategorien von Interesse an:
category=performance
category=accessibility
category=best-practices
category=seo
category=pwa
Eine bestimmte Sprache kann durch das Festlegen eines Gebietsschemas definiert werden – z. B. Französisch:
locale=fr-FR
und Google Analytics-Kampagnendetails können mit festgelegt werden:
utm_campaign=<campaign>
utm_source=<source>
Der Dienst ist für seltene Anfragen kostenlos, aber du musst dich für einen Google API-Schlüssel anmelden, wenn du vorhast, viele Tests von derselben IP-Adresse in einem kurzen Zeitraum durchzuführen. Der Schlüssel wird der URL mit hinzugefügt:
key=<api-key>
Du kannst den Abfrage-String der URL erstellen, indem du die von dir gewählten Parameter durch kaufmännische Und-Zeichen (&) getrennt angibst. Die folgende API-URL testet die Seite https://mysite.com/ mit einem mobilen Gerät, um die Leistung und die Kriterien der Barrierefreiheit zu bewerten:
https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://mysite.com/&strategy=mobile&category=performance&category=accessibility
Du kannst deine eigenen URLs erstellen oder das Google PageSpeed API URL Builder Tool verwenden, wenn du weitere Hilfe benötigst.
PageSpeed Insights API JSON-Ergebnisse
Die Tests liefern in der Regel ca. 600 KB JSON-Daten, abhängig von den gewählten Kategorien, der Anzahl der Assets auf der Seite und der Komplexität der Screenshots (eingebettet im base64-Format).
Die Menge der Daten ist erschreckend, es gibt einige Überschneidungen und die Dokumentation der Ergebnisse ist nicht immer klar. Das JSON ist in vier Abschnitte unterteilt, die im Folgenden beschrieben werden.
loadingExperience
Dies sind Metriken, die für das Ladeerlebnis des Endnutzers berechnet werden. Dazu gehören Informationen wie die Core Web Vitals CUMULATIVE_LAYOUT_SHIFT_SCORE, FIRST_CONTENTFUL_PAINT_MS und FIRST_INPUT_DELAY_MS. Details und ein „Kategorie“-Wert liefert FAST, AVERAGE, SLOW oder NONE, wenn keine Messung durchgeführt wurde. Beispiel:
"loadingExperience": {
"metrics": {
"CUMULATIVE_LAYOUT_SHIFT_SCORE": {
"percentile": 0,
"distributions": [
{
"min": 0,
"max": 10,
"proportion": 0.970
},
{
"min": 10,
"max": 25,
"proportion": 0.017
},
{
"min": 25,
"proportion": 0.012
}
],
"category": "FAST"
},originLoadingExperience
Dies sind aggregierte Metriken, die für die Ladeerfahrung aller Nutzer/innen berechnet werden. Die Abschnitte sind identisch mit loadingExperience (siehe oben) und es ist unwahrscheinlich, dass Websites mit weniger Traffic einen Unterschied in den Zahlen aufweisen.
lighthouseResult
Dies ist der größte Abschnitt und enthält alle Lighthouse-Kennzahlen. Er enthält Informationen über den Test:
- requestedUrl – die URL, die du angefordert hast
- finalUrl – die tatsächlich getestete Seite nach allen Weiterleitungen
- lighthouseVersion – die Softwareversion
- fetchTime – der Zeitpunkt, zu dem der Test ausgeführt wurde
- userAgent – der User-Agent-String des für den Test verwendeten Browsers
- environment – erweiterte User-Agent-Informationen
- configSettings – die Einstellungen, die an die API übergeben werden
Es folgt ein Abschnitt „Audits“ mit vielen Abschnitten wie unused-javascript, unused-css-rules, total-byte-weight, redirects, dom-size, largest-contentful-paint-element, server-response-time, network-requests, cumulative-layout-shift, first-meaningful-paint, screenshot-thumbnails und full-page-screenshot.
Die meisten Audit-Metriken enthalten einen Abschnitt „Details“, der Faktoren wie „overallSavingsBytes“ und „overallSavingsMs“ enthält, die den Nutzen einer Leistungsverbesserung abschätzen.
Die Abschnitte „Screenshot“ für die ganze Seite und die Miniaturansichten enthalten eingebettete base64-Bilddaten.
Ein Abschnitt „Metriken“ enthält eine Zusammenfassung aller Metriken in einem Array „Items“, z. B.
"metrics": {
"id": "metrics",
"title": "Metrics",
"description": "Collects all available metrics.",
"score": null,
"scoreDisplayMode": "informative",
"details": {
"type": "debugdata",
"items": [{
"observedFirstVisualChange": 234,
"observedFirstContentfulPaint": 284,
"interactive": 278,
"observedFirstPaintTs": 1579728174422,
"observedDomContentLoaded": 314,
// ... etc ...
}]
},
"numericValue": 278,
"numericUnit": "millisecond"
},Auf den Abschnitt „Audits“ folgt der Abschnitt „Kategorien“, der die Gesamtbewertung von Lighthouse für die ausgewählten Kategorien liefert, die über die API-URL übergeben wurden:
"categories": {
"performance": {
"id": "performance",
"title": "Performance",
"score": 0.97,
"auditRefs": [
//...Die „Punktzahl“ ist eine Zahl zwischen 0 und 1, die normalerweise als Prozentsatz in den Lighthouse-Berichten angezeigt wird. Im Allgemeinen ist eine Punktzahl von:
- 0.9 bis 1,0 ist gut
- 0.5 bis unter 0,9 bedeutet, dass eine Verbesserung notwendig ist
- unter 0,5 ist schlecht und erfordert dringendere Aufmerksamkeit
Im Abschnitt „auditRefs“ findest du eine Liste aller Kennzahlen und die Gewichtungen, die zur Berechnung der einzelnen Punkte verwendet wurden.
analysisUTCTimestamp
Schließlich wird die Analysezeit angegeben. Diese sollte mit der in lighthouseResult.fetchTime angegebenen Zeit identisch sein.
Nützliche JSON-Ergebnis-Metriken
Ich empfehle dir, das JSON-Ergebnis in einem Texteditor zu speichern und zu untersuchen. Einige haben JSON-Formatierer eingebaut oder sind als Plugins verfügbar. Alternativ kannst du auch kostenlose Online-Tools verwenden, wie z. B.:
Die folgenden Metriken werden wahrscheinlich nützlich sein. Vergiss nicht, die zugehörigen Kategorieoptionen auf der URL zu setzen, falls nötig.
Zusammenfassende Metriken
Gesamtpunktzahl von 0 bis 1:
| Leistung | lighthouseResult.categories.performance.score |
| Zugänglichkeit | lighthouseResult.categories.accessibility.score |
| Best-Practices | lighthouseResult.categories.best-practices.score |
| SEO | lighthouseResult.categories.seo.score |
| Progressive Webanwendung (PWA) | lighthouseResult.categories.pwa.score |
Leistungsmetriken
Dazu gehören Core Web Vitals-Bewertungen von 0 bis 1:
| Erstes Contentful-Paint | lighthouseResult.audits.first-contentful-paint.score |
| Erstes aussagekräftiges Bild | lighthouseResult.audits.first-meaningful-paint.score |
| Größter Contentful-Paint | lighthouseResult.audits.largest-contentful-paint.score (lighthouseResult.audits.largest-contentful-paint.score) |
| Geschwindigkeitsindex | lighthouseResult.audits.speed-index.score |
| Kumulative Layout-Verschiebung | lighthouseResult.audits.cumulative-layout-shift.score |
Andere nützliche Leistungsbewertungen sind:
| Server-Antwortzeit | lighthouseResult.audits.server-response-time.score |
| Ist crawlbar | lighthouseResult.audits.is-crawlable.score |
| Konsolenfehler | lighthouseResult.audits.errors-in-console.score |
| Gesamtgewicht der Bytes | lighthouseResult.audits.total-byte-weight.score |
| Bewertung der DOM-Größe | lighthouseResult.audits.dom-size.score |
In der Regel erhältst du tatsächliche Zahlen und Einheiten wie:
- lighthouseResult.audits.total-byte-weight.numericValue –
die Gesamtseitengröße, z.B. 450123 - lighthouseResult.audits.total-byte-weight.numericUnit –
die für die Gesamtseitengröße verwendete Einheit, z. B. „Byte“
Alternativ dazu enthält „displayValue“ in der Regel eine lesbare Nachricht mit der Zahl und der Einheit:
- lighthouseResult.audits.server-response-time.displayValue –
eine Meldung über die Antwortzeit, z. B. „Root document took 170 ms“ - lighthouseResult.audits.dom-size.displayValue –
eine Meldung über die Anzahl der Elemente im DOM, z. B. „543 Elemente“
Erstellen eines No-Code Performance Dashboards
Live-API-Feeds können in vielen Systemen gelesen und verarbeitet werden, auch in Microsoft Excel. (Etwas seltsam ist, dass Google Sheets keine JSON-Feeds ohne weitere Plugins oder Makrocode unterstützt. Es unterstützt jedoch XML.)
Um den Live-Gesamtwert in Excel zu importieren, öffnest du ein neues Tabellenblatt, wechselst auf die Registerkarte Daten und klickst auf Aus dem Web. Gib deine PageSpeed Insights API URL ein und klicke auf OK:
Klicke im nächsten Dialog auf Verbinden und behalte die Standardeinstellung (Anonym) bei. Du gelangst nun zum Tool Abfrageeinstellungen:
Klicke rechts neben der Leuchtturmergebnis-Metrik auf Datensatz. Klicke dann auf Kategorien und Leistung, um die Hierarchie der JSON-Objekte aufzuschlüsseln:
Klicke oben in den Rechtsklick-Menüoptionen auf das Symbol In Tabelle.
Du kannst dann auf den Filterpfeil in der Tabellenüberschrift klicken, um alles andere als die Punktzahl zu entfernen, bevor du auf OK klickst:
Klicke abschließend auf Schließen & Laden, um die Live-Punktzahl in deinem Arbeitsblatt anzuzeigen:
Du kannst den gleichen Prozess auch für andere interessante Kennzahlen anwenden.
Ein Web Performance Dashboard erstellen
Diese Codepen-Demonstration bietet ein Formular, in das du eine URL eingeben und eine Desktop- oder mobile Analyse auswählen kannst, um Ergebnisse zu erhalten.
Der Code erstellt eine PageSpeed Insights-URL, ruft die API auf und stellt dann die verschiedenen Ergebnisse in einer zusammenfassenden Tabelle dar, die schneller zu sehen ist als ein Standard-Lighthouse-Bericht:
Die asynchrone Funktion startCheck() wird aufgerufen, wenn das Formular abgeschickt wird. Sie bricht das Submit-Ereignis ab und blendet die vorherigen Ergebnisse aus:
// make API request
async function startCheck(e) {
e.preventDefault();
show(resultTable, false);
show(status);
show(error, false);Sie konstruiert dann apiURL aus den Formulardaten und deaktiviert die Felder:
const
form = e.target,
fields = form.firstElementChild,
data = new FormData(form),
qs = decodeURIComponent( new URLSearchParams(data).toString() ),
apiURL = form.action + '?' + qs;
fields.disabled = true;Die Fetch-API wird verwendet, um die PageSpeed-URL aufzurufen, die Antwort zu erhalten und den JSON-String in ein brauchbares JavaScript-Objekt zu parsen. Ein try/catch-Block sorgt dafür, dass Fehler aufgefangen werden:
try {
// call API and get result
const
response = await fetch(apiURL),
result = await response.json();Das Ergebnisobjekt wird an eine showResult() Funktion übergeben. Diese extrahiert Eigenschaften und fügt sie in die Ergebnistabelle oder ein anderes HTML-Element ein, dessen data-point-Attribut auf eine PageSpeed API-Eigenschaft gesetzt ist, z. B.
<td data-point="lighthouseResult.categories.performance.score"></td>
Das Ende des Try-Blocks:
// output result
showResult(result);
show(status, false);
show(resultTable);
}Schließlich behandelt ein Catch-Block Fehler und die Formularfelder werden wieder aktiviert, sodass weitere Tests durchgeführt werden können:
catch(err) {
// API error
console.log(err);
show(status, false);
show(error);
}
fields.disabled = false;
}Weitere Entwicklungsoptionen
Der obige Beispielcode holt sich ein Ergebnis von der PageSpeed Insights API, wenn du es anforderst. Der Bericht ist besser konfigurierbar als Lighthouse, aber die Ausführung bleibt ein manueller Prozess.
Wenn du dein eigenes Dashboard entwickeln willst, kann es praktisch sein, eine kleine Anwendung zu erstellen, die die PageSpeed Insights API aufruft und das resultierende JSON in einem neuen Datenbankeintrag gegen die getestete URL und das aktuelle Datum/die aktuelle Uhrzeit speichert. Die meisten Datenbanken unterstützen JSON, wobei MongoDB für diese Aufgabe ideal geeignet ist. Ein Cron-Job kann deine Anwendung zeitgesteuert aufrufen – vielleicht einmal pro Tag in den frühen Morgenstunden.
Eine serverseitige Anwendung kann dann ihre eigene REST-API für deine Berichtsanforderungen implementieren, z. B. um die Veränderungen bestimmter Leistungskennzahlen zwischen zwei Daten zu ermitteln. Sie kann von clientseitigem JavaScript aufgerufen werden, um Tabellen oder Diagramme anzuzeigen, die die Leistungsverbesserungen im Laufe der Zeit veranschaulichen.
Wenn du komplexe Berichte mit großen Datenmengen erstellen willst, ist es besser, die Zahlen einmal pro Tag vorzuberechnen, sobald neue PageSpeed-Daten verfügbar sind. Schließlich willst du die Leistungsverbesserungen nicht in einem Bericht zeigen, dessen Erstellung Minuten dauert!
Zusammenfassung
Das Lighthouse-Tool von Chrome ist großartig, aber es ist mühsam, viele Seiten regelmäßig auszuwerten. Mit der PageSpeed Insights API kannst du die Leistung deiner Website mit programmatischen Techniken bewerten. Die Vorteile:
- Leistungstests können automatisiert werden. Du kannst nicht vergessen, einen Test durchzuführen.
- Die Ergebnisse werden auf den Google-Servern gesammelt, sodass lokale Geräte- und Netzwerkgeschwindigkeitsfaktoren weniger Einfluss haben.
- Die Metriken enthalten Informationen, die normalerweise nicht in Lighthouse verfügbar sind.
- Wichtige Metriken können aufgezeichnet und im Laufe der Zeit überwacht werden, um sicherzustellen, dass sich die Seitenleistung mit jedem Update verbessert hat.
- Leistung, Zugänglichkeit und SEO-Informationen können in vereinfachten Berichten angezeigt werden, damit sie für Entwickler, Manager und Kunden auf einen Blick verfügbar sind.
Schreibe einen Kommentar