Hur du använder PageSpeed Insights API för att övervaka sidans prestanda

Det finns verktyg som hjälper dig att övervaka sidans prestanda och bedöma dina förbättringar. Ett av de bästa är exempelvis PageSpeed Insights. Det finns som en webb-applikation och som fliken Lighthouse i Chromes DevTools (samma DevTools finns även i Edge, Opera, Brave och Vivaldi).

Webbsidornas prestanda är viktigare än någonsin. Användarna förväntar sig en smidig och responsiv upplevelse som kan konkurrera med dataprogram. Dessutom så mäter Google’s Core Web Vitals sidans prestanda – som ett resultat så påverkar det PageRank och dina ansträngningar för sökmotoroptimering.

WordPress driver mer än en tredjedel av alla webbplatser. Prestandan påverkas dock av ineffektivt hosting, långsamma teman och ett överdrivet beroende av plugins. Du kan åtgärda de flesta problem genom att exempelvis byta till en bra hosting-leverantör och sedan använda bästa praxis för prestandateknik.

Tillgång till Lighthouse

Starta Lighthouse genom att öppna den sida som du vill undersöka och trycka på Ctrl/Cmd + Shift + I eller välja Utveckingsverktyg från Mer verktyg i menyn. Växla sedan till fliken Lighthouse och klicka därefter på knappen Analysera sidladdning. Resultaten visas efter några sekunder:

Du kan borra ner i de högsta procenttalen för att hitta ytterligare information och tips som tar upp kända problem. Verktyget är ovärderligt men det finns dessvärre nackdelar:

• Du måste exempelvis starta en körning manuellt för varje sida som du testar.
• Det är inte lätt att registrera hur faktorerna har förbättrats eller försämrats med tiden.
• Det är mycket data att kontrollera och det är lätt att göra fel.
• De tekniska detaljerna är till för utvecklare. Det kan därför bli överväldigande för kunder och chefer som vill ha en snabb överblick över framstegen.
• Lighthouse-körningar kan påverkas av lokala enhets- och nätverkshastigheter. Som ett resultat så kan det uppstå felaktiga antaganden.

PageSpeed Insights API erbjuder ett sätt att lösa dessa problem så att testerna kan automatiseras, registreras och jämföras.

Vad är PageSpeed Insights API?

Google tillhandahåller ett kostnadsfritt PageSpeed Insights REST API som returnerar data i JSON-format. Det innehåller exempelvis alla Lighthouse-mätvärden. Som ett resultat så blir det möjligt att automatisera sidkörningar, lagra de resulterande uppgifterna, granska förändringar över tid och visa exakt den information du behöver.

PageSpeed Insights API efterliknar hur Google ser din webbplats. Du kan köra en rapport med några dagars mellanrum eller när du släpper en prestandauppdatering.

Resultaten är användbara men inte nödvändigtvis vägledande för den faktiska användarupplevelsen. API: et för webbläsarprestanda är ett bättre alternativ när du vill övervaka den verkliga prestandan på alla dina användares enheter och nätverk.

Snabbstart för PageSpeed Insights API

Kopiera följande adress till din webbläsare och redigera url för att bedöma prestandan på din sida:

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

Firefox är idealisk eftersom den har en inbyggd JSON-läsare, även om Chrome har tillägg som ger samma funktionalitet. Den totala Lighthouse prestanda-poängen är markerad nedan:

Du kan ändra API webbadress-frågesträngen för dina egna sidor och preferenser. Den enda parametern som krävs är url, exempelvis:

url=https://mysite.com/page1

Ett skrivbordstest körs som standard, men du kan uttryckligen begära detta med:

strategy=desktop

eller byta till mobiltest med:

strategy=mobile

Du kan dessutom välja mellan att använda en eller flera kategorier av intresse: Endast prestandatester körs om du inte anger en eller flera kategorier av intresse:

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

Ett specifikt språk kan definieras genom att du ställer in en lokal – exempelvis franska:

locale=fr-FR

och Google Analytics-kampanjinformation kan ställas in med:

utm_campaign=<campaign>
utm_source=<source>

Tjänsten är kostnadsfri för sällan förekommande begäranden. Du måste dock registrera dig för en Google API-nyckel om du tänker köra många tester från samma IP-adress under en kort period. Nyckeln läggs till i webbadressen med:

key=<api-key>

Du kan bygga upp webbadressens frågesträng genom att ange de valda parametrarna separerade med ampersandtecken (&). Följande API-webbadress testar exempelvis sidan på https://mysite.com/ med en mobil enhet för att bedöma prestanda och tillgänglighetskriterier:

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

Du kan sedan skapa dina egna webbadresser eller använda Google PageSpeed API URL builder-verktyget om du behöver mer hjälp.

PageSpeed Insights API JSON-resultat

Testerna returnerar vanligtvis omkring 600 kb JSON-data beroende på de valda kategorierna, antalet tillgångar på sidan och komplexiteten hos skärmdumparna (inbäddade i base64-format).

Mängden data är skrämmande, det finns en del dubbelarbete och resultat-dokumentationen är inte alltid tydlig. JSON är uppdelad i fyra avsnitt som beskrivs nedan.

loadingExperience

Detta är mätvärden som beräknas för slutanvändarens upplevelse av sidladdning. Här ingår exempelvis information som Core Web Vitals CUMULATIVE_LAYOUT_SHIFT_SCORE, FIRST_CONTENTFUL_PAINT_MS och FIRST_INPUT_DELAY_MS. Detaljer och ett ”kategori”-värde som returnerar FAST, AVERAGE, SLOW eller NONE om ingen mätning gjordes. Exempelvis:

"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

Detta är aggregerade mätvärden som beräknas för alla användares upplevelse av sidladdning. Avsnitten är identiska med loadingExperience ovan och webbplatser med mindre trafik kommer sannolikt inte att visa någon skillnad i siffrorna.

lighthouseResult

Detta är det största avsnittet och innehåller alla Lighthouse-mätvärden. Det ger information om testet:

• requestedUrl – den begärda webbadressen
• finalUrl – den faktiska sidan som har testats efter alla omdirigeringar
• lighthouseVersion – programvarans version
• fetchTime – tiden då testet kördes
• userAgent – strängen för användaragenten i den webbläsare som användes för testet
• environment – utökad information om användaragent
• configSettings – de inställningar som skickas till API: et

Detta följs sedan av avsnittet ”audits” med många avsnitt. Det inkluderar exempelvis 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 och full-page-screenshot.

De flesta granskningsmått inkluderar ett avsnitt med ”detaljer” som innehåller faktorer som ”overallSavingsBytes” och ”overallSavingsMs”. Detta avsnitt uppskattar fördelarna med att genomföra en prestandaförbättring.

Avsnitten ”screenshot” för hela sidan och thumbnails innehåller inbäddade base64-bilddata.

I avsnittet ”metrics” finns en sammanfattning av alla mätvärden i matrisen ”items”, exempelvis:

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

Avsnittet ”audits” följs sedan av avsnittet ”categories” som ger övergripande Lighthouse-poäng för de valda kategorierna som skickas via API-webbadressen:

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

Poängen är ett tal mellan 0 och 1 som normalt visas som en procentandel i Lighthouse-rapporter. I allmänhet så är en poäng på:

• 0.9 till 1,0 bra
• 0.5 till under 0,9 innebär att förbättringar är nödvändiga
• under 0,5 är dåligt och kräver mer brådskande uppmärksamhet

I avsnittet ”auditRefs” finns en förteckning över alla mätvärden och de detaljer som har använts för att beräkna varje poäng.

analysisUTCTimestamp

Slutligen så rapporteras analystiden. Den bör vara identisk med den tid som visas i lighthouseResult.fetchTime.

Användbara JSON-resultatmått

Jag rekommenderar att du sparar och undersöker JSON-resultatet i en textredigerare. Vissa har JSON-formatörer inbyggda eller tillgängliga som plugins. Alternativt så kan du använda kostnadsfria online-verktyg som t.ex:

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

Följande mätvärden kan vara användbara. Kom ihåg att ställa in de tillhörande kategorialternativen för webbadressen vid behov.

Sammanfattning av mätvärden

Sammanfattande poäng från 0 till 1:

Prestandaindex

Dessa inkluderar Core Web Vitals-poäng från 0 till 1:

Andra användbara resultat för prestanda är bland annat:

Du kan vanligtvis få fram faktiska siffror och enheter som exempelvis:

• lighthouseResult.audits.total-byte-weight.numericValue –
  den totala sidstorleken, exempelvis 450123
• lighthouseResult.audits.total-byte-weight.numericUnit –
  de enheter som används för den totala sidstorleken, exempelvis ”byte”

Alternativt så innehåller ”displayValue” vanligtvis ett läsbart meddelande med både siffra och enhet:

• lighthouseResult.audits.server-response-time.displayValue –
  ett meddelande om svarstiden, t.ex. ”Rot-dokument tog 170 ms”
• lighthouseResult.audits.dom-size.displayValue –
  ett meddelande om antalet element i DOM, t.ex. ”543 element”

Skapa en prestanda-dator utan kod

Live API-flöden kan läsas och bearbetas i många system, inklusive Microsoft Excel. (Bisarrt nog så har Google Sheets inte stöd för JSON-flöden utan ytterligare plugins eller makrokod. Det finns dock stöd för XML.)

Om du vill importera det totala resultatet för liveprestanda till Excel så startar du ett nytt kalkylblad, växlar sedan till fliken Data och klickar därefter på Från webben. Ange din PageSpeed Insights API-webbadress och tryck på OK:

Klicka på Anslut i nästa dialogruta och behåll standardinställningen (Anonym). Du kommer att gå vidare till verktyget Sökfråge-inställningar:

Klicka på Spela in till höger om fyrens resultatmätare. Klicka sedan på samma sak på kategorier och prestanda för att borra ner i JSON-objekthierarkin:

Klicka på ikonen I tabell högst upp i högerklickmeny-alternativen.

Du kan sedan klicka på filterpilen i tabellrubriken för att ta bort allt annat än poängen innan du klickar på OK:

Slutligen så klickar du på Stäng och ladda för att visa live-föreställningens poäng i kalkylbladet:

Du kan följa samma process för andra mätvärden av intresse.

Skapa en instrumentpanel för webbprestanda

Denna Codepen-demonstration innehåller ett formulär där du kan ange en webbadress och välja analys för skrivbord eller mobil för att få resultat.

Koden skapar en webbadress för PageSpeed Insights, anropar API: et och visar sedan olika resultat i en sammanfattande tabell som är snabbare att visa än en vanlig Lighthouse-rapport:

Den asynkrona funktionen startCheck() anropas när formuläret skickas in. Den avbryter händelsen skicka och döljer tidigare resultat:

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

Därefter så konstrueras apiURL från formulärdata och fälten inaktiveras:

  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 används för att anropa PageSpeed-webbadressen, hämta svaret och analysera JSON-strängen till ett användbart JavaScript-objekt. Ett try/catch-block säkerställer att fel fångas upp:

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

Resultatobjektet skickas sedan till en showResult()-funktion. Denna extraherar egenskaper och placerar dem i resultattabellen eller något annat HTML-element som har data-point-attributet inställt på en PageSpeed API-egenskap, exempelvis.

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

Slutet på försökssatsen:

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

Slutligen så hanterar ett catch-block fel och formulärfälten aktiveras på nytt så att ytterligare tester kan utföras:

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

Ytterligare utvecklingsalternativ

Exempelkoden ovan hämtar ett resultat från PageSpeed Insights API när du begär det. Rapporten är mer konfigurerbar än Lighthouse, men utförandet förblir dock en manuell process.

Om du tänker utveckla en egen instrumentpanel så kan det vara praktiskt att skapa en liten applikation som anropar PageSpeed Insights API. Det ska sedan lagra det resulterande JSON-resultatet i en ny databaspost mot den testade webbadressen och det aktuella datumet/tiden. De flesta databaser har stöd för JSON, även om MongoDB är idealisk för uppgiften. Ett cron-job kan anropa din applikation på en tidsbestämd basis – kanske en gång om dagen under de tidiga morgontimmarna.

En applikation på serversidan kan sedan implementera sitt eget REST API för dina rapporteringskrav. Det kan exempelvis återge förändringarna i specifika prestandamått mellan två datum. Denna applikation kan anropas av JavaScript på klientsidan för att visa tabeller eller diagram som illustrerar prestandaförbättringar över tiden.

Om du vill skapa komplexa rapporter med stora mängder data så är det lämpligast att förberäkna siffrorna en gång om dagen vid den tidpunkt då nya PageSpeed-data är tillgängliga. Du vill trots allt inte visa hur prestandan förbättras i en rapport som tar minuter att generera!

Sammanfattning

Chromes Lighthouse-verktyg är fantastiskt, men det är en pina att ofta utvärdera många sidor. Med PageSpeed Insights API så kan du bedöma webbplatsens prestanda med hjälp av programtekniker. Fördelarna är att:

• Prestandatester kan automatiseras. Då glömmer du inte att köra ett test.
• Resultaten samlas in på Google’s servrar så lokala enhets- och nätverkshastighetsfaktorer har mindre inflytande.
• Mätvärden inkluderar information som vanligtvis inte är tillgänglig i Lighthouse.
• Viktiga mätvärden kan registreras och övervakas över tid för att säkerställa att sidans prestanda har förbättrats med varje uppdatering.
• Information om prestanda, tillgänglighet och SEO kan visas i förenklade rapporter så att den är tillgänglig i en överblick för utvecklare, chefer och kunder.

Craig Buckler

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

• Hemsida
• LinkedIn
• Twitter
• YouTube