Overvåg automatisk hastigheden på websitet med PageSpeed Insights api

Det har stor betydning for din digitale succes, hvor hurtigt dit website er. Jo hurtigere, desto bedre brugeroplevelse og dermed flere konverteringer og salg. Det er der ikke noget nyt i, og Google har i mange år understreget vigtigheden af et hurtigt website. Jeg har derfor lavet en guide til, hvordan du relativt let (og uden for meget manuelt arbejde) kan følge med på de vigtigste målepunkter.

Websitets hastighed bliver endnu mere vigtigt med Google Core Web Vitals opdatering. Her får hastighed og brugeroplevelse endnu større vægt i forhold til, hvor godt I rangerer i søgeresultaterne.

Det er almindeligt at holde øje med hastigheden på websitet – fx med Google eget PageSpeed Insights værktøj. Her får du en score fra 1-100, hvor godt websitet performer. Men det er ofte en manuel opgave, som ikke bliver gjort løbende eller systematisk. Og hvis I ikke kontinuerligt overvåger performance (og gemmer data), kan det være svært at vise værdien af udviklingsarbejdet. En anden fordel ved også at overvåge performance løbende er, at I hurtigt vil se, hvis et nyt kode-deploy skader jeres performance. På den måde bliver it, forretning og online teams bundet tættere sammen, da alle tre er med til at sikre et sundt website.

Sådan kommer du i gang

For at komme i gang med at bruge Google Lighthouse APIen, skal du først oprette en API key. Følg de tre trin nedenfor, så er du hurtigt i gang.

• Opret et projekt i Google Cloud Platform. Hvis du allerede har et projekt, kan du springe dette trin over. Du kan oprette projektet via dette link.
• Når du har oprettet dit projekt, vælger du Create Credentials og vælger API key. Du kan eventuelt begrænse adgangen til API key. Dermed sikrer du dig bedre, at det kun er dig, som må bruge API keyen
• For at du kan bruge PageSpeed Insights apien, skal du først enable den. Det kan du gøre via dette link

Når du har oprettet en API key og enablet PageSpeed Insights api, skal du nu oprette et Google Sheets, hvor du gemmer data i. Fordelen ved at bruge et Google Sheets, er dels at du automatisk kan opdatere data, men også at du nemt kan visualisere data i Google Data Studio.

Tag en kopi af dette Google Sheets, og indsæt nedenstående kode-snippet via script editoren. Husk at tilføje din api key i linje 2 i koden.

Sørg for at oprette en trigger til at køre funktionen updatePages regelmæssigt – fx dagligt eller en gang i ugen. Det giver mening at køre funktionen samtidig med, at der er trafik på websitet, for at give det mest realistiske billede af performance. Tilføj derefter de urler, som skal overvåges, i arket Audit urls.

Du kan bruge nedenstående kode-snippet i Google Sheets (Under menuen Tools i Google Sheets). Her kalder jeg PageSpeeds api ud fra en række definerede url’er. Det giver ikke mening at crawle hele sitet, men blot nogle af de vigtigste sider. Det er også værd at nævne, at Google Sheets har et time-out loft på 300 sekunder for at kalde en funktion. Jo flere urler, som du tilføjer, desto længere tid tager det at kalde apien, så du skal nøjes med nogle af de vigtigste sider. Det kunne fx være forsiden og en produktside.

I koden nedenfor gemmer jeg ikke alle metrics fra PageSpeed Insights api. Du er selvfølgelig velkommen til at tilføje flere metrics, hvis du synes. Du kan læse mere om apien her. Jeg tjekker både desktop og mobil-versonen af de specificerede URLer, og opsamler Performance og Accesibility scoren samt First meaningful Paint, Largest Contentful Paint (både scoren samt det faktiske tal i millisekunder), Time to Interactive i millisekunder samt speed index.

function getPageSpeedInsights(url, strategy) {
var apiKey =""// indsæt din api key her
var fetchUrl = "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url="+url+"&key="+apiKey+"&strategy="+strategy+"&category=performance&category=accessibility"; 

var response = JSON.parse(UrlFetchApp.fetch(fetchUrl));
return response

}

function updatePages(){
var auditUrlsSheet = SpreadsheetApp.getActive().getSheetByName('audit urls');
var reportingSheet = SpreadsheetApp.getActive().getSheetByName('reporting sheet');

for ( var i = 2; i <= auditUrlsSheet.getLastRow(); i++){
var url = auditUrlsSheet.getRange(i,1).getValue();

var response = getPageSpeedInsights(url,"mobile");
reportingSheet.appendRow([
response.analysisUTCTimestamp.substr(0,10),
response.id,
response.lighthouseResult.configSettings.formFactor,
response.lighthouseResult.categories.performance.score,
response.lighthouseResult.categories.accessibility.score,
response.lighthouseResult.audits['first-meaningful-paint'].score,
response.lighthouseResult.audits['largest-contentful-paint'].score,
response.lighthouseResult.audits['first-meaningful-paint'].numericValue,
response.lighthouseResult.audits['largest-contentful-paint'].numericValue,
response.lighthouseResult.audits.interactive.numericValue,
response.lighthouseResult.audits['speed-index'].score
])

var response = getPageSpeedInsights(url,"desktop");

reportingSheet.appendRow([
response.analysisUTCTimestamp.substr(0,10),
response.id,
response.lighthouseResult.configSettings.formFactor,
response.lighthouseResult.categories.performance.score,
response.lighthouseResult.categories.accessibility.score,
response.lighthouseResult.audits['first-meaningful-paint'].score,
response.lighthouseResult.audits['largest-contentful-paint'].score,
response.lighthouseResult.audits['first-meaningful-paint'].numericValue,
response.lighthouseResult.audits['largest-contentful-paint'].numericValue,
response.lighthouseResult.audits.interactive.numericValue,
response.lighthouseResult.audits['speed-index'].score
])

} // for
} // func

Når data kommer ind i Google Sheets, kan du let oprette et dashboard i Google Datastudio. Det er lidt nemmere at følge med der, og du kan eventuelt sammenligne PageSpeed Insights tallene med dine øvrige performance-tal, som tangeringen (vis fx Google Search Console) eller organisk trafik (via Google Analytics).

Hvad er Google Core Web Vitals

Core Web Vitals er en vigtig opdatering til Google søgealgoritme. Det er ret transparent, hvad der fremover betyder noget i forhold til (teknisk) SEO. Det er hastighed og UX. Det er første gang, at Google så tydeligt har gjort det klart, hvad de lægger vægt på. To af de vigtigste nye tal i Core Web Vitals er Largest Contentful Paint (hvor hurtigt loader det største billede/ressource på siden) og Time to interaktive (hvor hurtigt er siden indlæst helt færdigt).

Google er kendt for at sætte skræmmekampagner op i takt med, at der kommer nye opdateringer til søgealgoritmen. Så det bliver spændende at se, hvor stor impact Core Web Vitals reelt har på det danske markede. Umiddelbart er der mange store websites, som på papiret får store problemer. Uanset hvad så giver det mening at komme i gang med optimeringsarbejdet. Hvis du er i tvivl om, hvor du skal starte med optimeringen, er her et bud, der skaber værdi.