Sådan bruger du PageSpeed Insights API til at overvåge sidens ydeevne

Der findes værktøjer til at hjælpe med at overvåge sidens ydeevne og vurdere dine forbedringer. Et af de bedste er PageSpeed Insights. Det er tilgængeligt som en webapplikation og som fanen Lighthouse i Chromes DevTools (de samme DevTools er også tilgængelige i Edge, Opera, Brave og Vivaldi).

Websiders ydeevne er vigtigere end nogensinde før. Brugerne forventer en glat og responsiv oplevelse, der kan konkurrere med desktopapplikationer. Desuden måler Googles Core Web Vitals sidens ydeevne – det har indflydelse på PageRank og din indsats for søgemaskineoptimering.

WordPress kører mere end en tredjedel af alle websteder, men ydelsen påvirkes af ineffektiv hosting, langsomme temaer og en overdreven afhængighed af plugins. Du kan løse de fleste problemer ved at skifte til en god webhost og bruge bedste praksis-præstationsmetoder.

Adgang til Lighthouse

Start Lighthouse ved at åbne den side, du vil undersøge, og tryk på Ctrl/Cmd + Shift + I eller vælg Developer Tools fra More tools (Flere værktøjer) i menuen. Skift til fanen Lighthouse, og klik på knappen Analyse Page Load. Resultaterne vises efter et par sekunder:

Du kan bore ned i procenterne på øverste niveau for at finde yderligere oplysninger og tips, der adresserer kendte problemer. Værktøjet er uvurderligt, men der er også ulemper:

• Du skal manuelt starte en kørsel for hver side, du tester, men der er dog nogle ulemper.
• Det er ikke let at registrere, hvordan faktorer er blevet bedre eller værre over tid.
• Der er mange data at kontrollere, og det er let at tage fejl.
• De tekniske detaljer er til rådighed for udviklere. Det er muligvis overvældende for kunder og ledere, der ønsker et hurtigt overblik over udviklingen.
• Lighthouse-kørsler kan påvirkes af lokale enheds- og netværkshastigheder, hvilket kan føre til falske antagelser.

PageSpeed Insights API giver en måde at løse disse problemer på, så testene kan automatiseres, registreres og sammenlignes.

Hvad er PageSpeed Insights API?

Google tilbyder et gratis PageSpeed Insights REST API, som returnerer data i JSON-format, der indeholder alle Lighthouse-metrikker og meget mere. Det giver dig mulighed for at automatisere sidekørsler, gemme de resulterende data, gennemgå ændringer over tid og vise præcis de oplysninger, du har brug for.

PageSpeed Insights API emulerer, hvordan Google ser dit websted. Du kan køre en rapport med få dages mellemrum, eller når du udsender en opdatering af ydeevnen.

Resultaterne er nyttige, men ikke nødvendigvis vejledende for den faktiske brugeroplevelse. Browser Performance API’et er en bedre mulighed, når du ønsker at overvåge den reelle ydeevne på tværs af alle dine brugeres enheder og netværk.

PageSpeed Insights API hurtigstart

Kopier følgende adresse til din webbrowser, og rediger url for at vurdere ydelsen på din side:

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://www.yoursite.com/

Firefox er ideel, fordi den har en indbygget JSON-fremviser, selv om Chrome har udvidelser, der giver den samme funktionalitet. Den samlede Lighthouse Performance score er fremhævet nedenfor:

Du kan ændre API-URL-forespørgselsstrengen til dine egne sider og præferencer. Den eneste krævede parameter er url, f.eks.

url=https://mysite.com/page1

En skrivebordstest køres som standard, men du kan anmode udtrykkeligt om den med:

strategy=desktop

eller skifte til mobil med:

strategy=mobile

Du kan også vælge at bruge en eller flere kategorier af interesse: Kun præstationstest køres, medmindre du angiver en eller flere kategorier af interesse:

category=performance
category=accessibility
category=best-practices
category=seo
category=pwa

Et specifikt sprog kan defineres ved at angive et sprogområde – f.eks. fransk:

locale=fr-FR

og Google Analytics-kampagnedetaljer kan indstilles med:

utm_campaign=<campaign>
utm_source=<source>

Tjenesten er gratis for sjældne forespørgsler, men du skal tilmelde dig en Google API-nøgle, hvis du har til hensigt at køre mange tests fra den samme IP-adresse inden for en kort periode. Nøglen tilføjes til URL’en med:

key=<api-key>

Du kan opbygge URL’ens forespørgselsstreng ved at angive de valgte parametre adskilt med et ampersand (&). Den følgende API-URL tester siden på https://mysite.com/ ved hjælp af en mobilenhed for at vurdere kriterierne for ydeevne og tilgængelighed:

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://mysite.com/&strategy=mobile&category=performance&category=accessibility

Du kan konstruere dine egne URL’er eller bruge Google PageSpeed API URL builder-værktøjet, hvis du har brug for yderligere hjælp.

PageSpeed Insights API JSON-resultater

Testene returnerer typisk omkring 600 KB JSON-data afhængigt af de valgte kategorier, antallet af aktiver på siden og kompleksiteten af skærmbilleder (indlejret i base64-format).

Mængden af data er skræmmende, der er en del overlapning, og dokumentationen af resultaterne er ikke altid klar. JSON’en er opdelt i fire sektioner som beskrevet nedenfor.

loadingExperience

Dette er målinger, der er beregnet for slutbrugerens oplevelse af sidens indlæsning. Det omfatter oplysninger som Core Web Vitals CUMULATIVE_LAYOUT_SHIFT_SCORE, FIRST_CONTENTFUL_PAINT_MS og FIRST_INPUT_DELAY_MS. Detaljer og en “kategori”-værdi returnerer FAST, AVERAGE, SLOW eller NONE, hvis der ikke blev foretaget nogen måling. Eksempel:

"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

Dette er aggregerede målinger, der er beregnet for alle brugernes oplevelse af indlæsning af siden. Afsnittene er identiske med loadingExperience ovenfor, og det er usandsynligt, at websteder med mindre trafik vil vise nogen forskel i tallene.

lighthouseResult

Dette er det største afsnit og indeholder alle Lighthouse-metrikker. Det indeholder oplysninger om testen:

• requestedUrl – den URL, du anmodede om
• finalUrl – den faktiske side, der blev testet efter alle omdirigeringer
• lighthouseVersion – softwareversionen
• fetchTime – det tidspunkt, hvor testen blev kørt
• userAgent – brugeragentstrengen for den browser, der blev brugt til testen
• environment – udvidede oplysninger om brugeragent
• configSettings – de indstillinger, der er overført til API’et

Dette efterfølges af en “audits”-sektion med mange sektioner, herunder unused-javascript, unused-css-rules, total-byte-weight, redirects, dom-size, biggest-contentful-paint-element, server-response-time, network-requests, cumulative-layout-shift, first-meaningful-paint, screenshot-thumbnails og full-page-screenshot.

De fleste auditmetrikker indeholder en “detaljer”-sektion, som indeholder faktorer som “overallSavingsBytes” og “overallSavingsMs”, som estimerer fordelene ved at implementere en ydelsesforbedring.

Afsnittene “skærmbillede” på hele siden og miniaturebilleder indeholder indlejrede base64-billeddata.

Et “metrics”-afsnit indeholder en oversigt over alle målinger i et “items”-array, f.eks.

"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"
},

Afsnittet “audits” efterfølges af “categories”, som giver samlede Lighthouse-scoringer for de valgte kategorier, der er overført via API-URL’en:

"categories": {
"performance": {
"id": "performance",
"title": "Performance",
"score": 0.97,
"auditRefs": [
//...

Scoren er et tal mellem 0 og 1, som normalt vises som en procentdel i Lighthouse-rapporterne. Generelt er en score på:

• 0.9 til 1,0 er god
• 0.5 til under 0,9 betyder, at der er behov for forbedringer
• under 0,5 er dårligt og kræver mere akut opmærksomhed

I afsnittet “auditRefs” findes en liste over alle målepunkter og de vægtninger, der er anvendt til at beregne hver enkelt score.

analysisUTCTimestamp

Endelig angives analysetiden. Denne skal være identisk med den tid, der vises i lighthouseResult.fetchTime.

Nyttige JSON-resultatmetrikker

Jeg anbefaler, at du gemmer og undersøger JSON-resultatet i en teksteditor. Nogle har JSON-formatere indbygget eller er tilgængelige som plugins. Alternativt kan du bruge gratis online-værktøjer som f.eks:

• JSON Formatter & Validator
• JSON Formatter
• jsonformatter.io

Følgende målinger vil sandsynligvis være nyttige. Husk at indstille de tilknyttede kategoriindstillinger på URL’en efter behov.

Oversigt over målinger

Samlet score fra 0 til 1:

Ydelsesmålinger

Disse omfatter Core Web Vitals-scoringer fra 0 til 1:

Andre nyttige præstationsscorer omfatter:

Du kan normalt få faktiske tal og enheder som f.eks:

• lighthouseResult.audits.total-byte-weight.numericValue –
  den samlede sidestørrelse, f.eks. 450123
• lighthouseResult.audits.total-byte-weight.numericUnit –
  de enheder, der anvendes til den samlede sidestørrelse, f.eks. “byte”

Alternativt indeholder “displayValue” normalt en læsbar meddelelse med både tal og enhed:

• lighthouseResult.audits.server-response-time.displayValue –
  en meddelelse om svartiden, f.eks. “Root document took 170 ms”
• lighthouseResult.audits.dom-size.displayValue –
  en meddelelse om antallet af elementer i DOM, f.eks. “543 elementer”

Oprettelse af et no-code ydelsesdashboard

Live API-feeds kan læses og behandles i mange systemer, herunder Microsoft Excel. (Noget bizart nok understøtter Google Sheets ikke JSON-feeds uden yderligere plugins eller makrokode. Det understøtter XML.)

Hvis du vil importere den samlede live-præstations score til Excel, skal du starte et nyt regneark, skifte til fanen Data og klikke på Fra web. Indtast din PageSpeed Insights API-URL, og tryk på OK:

Klik på Connect i den næste dialogboks, og behold standardindstillingen (Anonym). Du vil gå videre til værktøjet Query Settings (Forespørgselsindstillinger):

Klik på Record til højre for lighthouse resultatmetrikken. Klik derefter på det samme på categories og performance for at bore ned i JSON-objekthierarkiet:

Klik på ikonet Into tabel øverst i højreklikmenuen.

Du kan derefter klikke på filterpilen i tabeloverskriften for at fjerne alt andet end scoren, før du klikker på OK:

Til sidst skal du klikke på Close og reload for at få vist det levende resultat i dit regneark:

Du kan følge den samme proces for andre interessante målinger.

Opret et dashboard for webpræstationer

Denne Codepen-demonstration indeholder en formular, hvor du kan indtaste en URL og vælge desktop- eller mobilanalyse for at få resultater.

Koden opretter en PageSpeed Insights-URL, kalder API’et og gengiver derefter forskellige resultater i en oversigtstabel, som er hurtigere at få vist end en standard Lighthouse-rapport:

Den asynkrone startCheck() -funktion kaldes, når formularen indsendes. Den annullerer submit-hændelsen og skjuler tidligere resultater:

// make API request
async function startCheck(e) {
e.preventDefault();
show(resultTable, false);
show(status);
show(error, false);

Derefter konstruerer den apiURL ud fra formularens data og deaktiverer felterne:

  const
form = e.target,
fields = form.firstElementChild,
data = new FormData(form),
qs = decodeURIComponent( new URLSearchParams(data).toString() ),
apiURL = form.action + '?' + qs;
fields.disabled = true;

Fetch API ‘et bruges til at kalde PageSpeed-URL’en, hente svaret og analysere JSON-strengen til et brugbart JavaScript-objekt. En try/catch-blok sikrer, at fejl opfanges:

  try {
// call API and get result
const
response = await fetch(apiURL),
result = await response.json();

Resultatobjektet sendes til en showResult() -funktion. Denne udtrækker egenskaber og placerer dem i resultattabellen eller ethvert andet HTML-element, hvis data-point-attribut er sat til en PageSpeed API-egenskab, f.eks.

<td data-point="lighthouseResult.categories.performance.score"></td>

Afslutningen af try-blokken:

    // output result
showResult(result);
show(status, false);
show(resultTable);
}

Til sidst håndteres fejl i en catch-blok, og formularfelterne aktiveres igen, så der kan køres yderligere tests:

  catch(err) {
// API error
console.log(err);
show(status, false);
show(error);
}
fields.disabled = false;
}

Yderligere udviklingsmuligheder

Eksempelkoden ovenfor henter et resultat fra PageSpeed Insights API’et, når du anmoder om det. Rapporten er mere konfigurerbar end Lighthouse, men udførelsen er stadig en manuel proces.

Hvis du har til hensigt at udvikle dit eget dashboard, kan det være praktisk at oprette et lille program, der kalder PageSpeed Insights API’et og gemmer den resulterende JSON i en ny databasepost i forhold til den testede URL og den aktuelle dato/tid. De fleste databaser har JSON-understøttelse, selv om MongoDB er ideelt egnet til opgaven. Et cronjob kan kalde din applikation på et tidsbestemt grundlag – måske en gang om dagen i de tidlige morgentimer.

En applikation på serversiden kan derefter implementere sin egen REST API til dine rapporteringsbehov, f.eks. returnere ændringerne i specifikke præstationsmetrikker mellem to datoer. Det kan kaldes af JavaScript på klientsiden for at vise tabeller eller diagrammer, der illustrerer ydelsesforbedringer over tid.

Hvis du ønsker at oprette komplekse rapporter med betydelige datamængder, er det at foretrække at forudberegne tallene en gang om dagen på det tidspunkt, hvor nye PageSpeed-data er tilgængelige. Du ønsker trods alt ikke at vise, hvordan ydeevnen forbedres i en rapport, som det tager minutter at generere!

Oversigt

Chrome’s Lighthouse-værktøj er fantastisk, men det er en pligt at evaluere mange sider ofte. PageSpeed Insights API giver dig mulighed for at vurdere webstedets ydeevne ved hjælp af programmatiske teknikker. Fordelene:

• Ydelsestests kan automatiseres. Du må ikke glemme at køre en test.
• Resultaterne indsamles på Googles servere, så lokale enheds- og netværkshastighedsfaktorer har mindre indflydelse.
• Metrikker omfatter oplysninger, der normalt ikke er tilgængelige i Lighthouse.
• Vigtige metrikker kan registreres og overvåges over tid for at sikre, at sidens ydeevne er blevet forbedret med hver opdatering.
• Oplysninger om ydeevne, tilgængelighed og SEO kan vises på forenklede rapporter, så de er tilgængelige med et enkelt blik for udviklere, ledere og kunder.

Craig Buckler

Freelance UK web developer, writer, and speaker. Has been around a long time and rants about standards and performance.

• Hjemmeside
• LinkedIn
• Twitter
• YouTube