Google sier selv at de ikke har noen god måte å måle ytelse på som gir et riktig bilde av en SPA. De måler som om det var en MPA-løsning, og en virkelig god SPA-løsning vil alltid være mye raskere for brukeren enn en veldig god MPA-løsning. Særlig hvis du begynner å snakke om at man kanskje ikke alltid har særlig god forbindelse.
Google sier selv at de ikke har noen god måte å måle ytelse på som gir et riktig bilde av en SPA. De måler som om det var en MPA-løsning, og en virkelig god SPA-løsning vil alltid være mye raskere for brukeren enn en veldig god MPA-løsning. Særlig hvis du begynner å snakke om at man kanskje ikke alltid har særlig god forbindelse.
Hvorfor måleverktøy som PageSpeed Insights gir misvisende resultater for SPA-løsninger
“Mange forenkler ytelse til bare å være det måleverktøyene sier, men måleverktøyene er ikke bygget slik at de måler virkeligheten på en rettferdig måte. Det finnes flere faktorer som gjør at et nettsted er raskt i praksis, men likevel får dårlige måleresultater. Særlig for Single Page Application.” forklarer Albert Dahlin, CTO i Webbhuset.
Ytelse for brukeren
En del av ytelse er brukerens opplevelse av hastigheten på et nettsted. Enten det er en Multi-Page Application (MPA) eller Single Page Application (SPA), kan de oppleves like raske i praksis for en bruker. Forskjellen merkes derimot hvis internettforbindelsen blir dårligere.
“Er du for eksempel i en tunnel og får dårlig dekning, merkes det med en MPA-løsning. Det tar kanskje 5 sekunder å se en ny side, og noen ganger hopper ting ned, så du klikker på noe annet enn du hadde tenkt. Dette går folk ofte glipp av. De tester en SPA- og en MPA-løsning på fibernettet sitt med en Macbook Pro til 30 000 kr. Selvfølgelig er den rask da, og det er dette som er ytelse for brukeren, opplevelsen av nettstedets hastighet.” forteller Albert.
Ytelse for Google-rangering
Den andre delen av ytelse handler om søkemotoroptimalisering (SEO). Der har blant andre Google gått ut med at hastighet er en komponent i rangeringsalgoritmen deres, men de har ikke sagt hvor stor andel det utgjør av den totale rangeringspoengsummen.
“Mange tror at jo raskere nettsted du har, desto høyere opp i Googles søkeresultater kommer du. Man vet ikke om hastigheten er 1% av rangeringspoengene dine, eller om godkjent ytelse gir det samme. Er raskere nødvendigvis bedre? Hvis det tar en tredjedels sekund fra jeg klikker på en lenke til den nye siden vises, sammenlignet med en tidels sekund, er det da tre ganger bedre? En bruker vil ikke merke noen forskjell. Du klikker, og opplevelsen er at det skjer umiddelbart.” sier Albert.
Da vi bygde SnusMes nettbutikk, var den så optimalisert at vi måtte legge inn en fade out/in-effekt. Før effekten ble lagt til, rakk man knapt å oppfatte sidebyttet når man klikket mellom lenker, fordi nettstedet hadde så ekstremt høy ytelse. Denne tilpasningen var også viktig med tanke på tilgjengelighet, siden for eksempel personer med nedsatt syn kunne gå glipp av de raske sidebyttene.
“Da har vi ytelse for brukere vs. ytelse for Google-rangering. Vi mennesker oppfatter tider ned til omtrent en tredjedels sekund. Raskere enn det gjør ingen praktisk forskjell, fordi det oppleves som umiddelbart. Hvis en side bruker mange sekunder på å laste, blir det forstyrrende, og noen velger kanskje å forlate nettstedet. For Google-rangering er det uklart hvor mye ytelse påvirker, men Google har selv sagt at god ytelse for brukeren er viktig.” forteller Albert.
Feildiagnostiserte problemer med Lighthouse
Det finnes to velkjente verktøy for å måle ytelse, Lighthouse og Core Web Vitals. Analyserer du et nettsted med PageSpeed Insights, får du først resultatet fra Core Web Vitals og deretter en Lighthouse-diagnose. Lighthouse er et verktøy for utviklere som også kan åpnes i nettleseren. Verktøyet simulerer en brukers besøk på siden og gir deretter forslag til forbedringer.
“Lighthouse måler ikke den faktiske ytelsen på en rettferdig måte. Det blir veldig mange feildiagnostiserte problemer, og måler du den samme siden flere ganger, får du ikke det samme resultatet hver gang. Forslagene Lighthouse gir, stemmer ikke alltid, eller så trenger man ikke nødvendigvis å fikse dem.” sier Albert.
Mange nettsteder bruker ulike scripts som tar lang tid å laste inn, men som ikke har noen praktisk betydning for brukeropplevelsen, fordi de ikke alltid er synlige. Antallet og størrelsen på scriptene varierer fra nettsted til nettsted, men det kan for eksempel være sporingsverktøy som Google Tag Manager og Google Analytics, eller chatboter og annonseverktøy. For kunden vår SnusMe trengs det omtrent 89 kb scripts for at nettstedet skal vises. Det er ikke mye, men med Google Tag Manager og Google Analytics blir det tre ganger så mange scripts som skal leses inn.
“Ofte lastes det inn fem ganger mer Javascript på andre nettsteder som ikke er synlig for brukeren, og det trekker Lighthouse-poengene kraftig ned. Det er likevel ikke noe problem, fordi ytelsen for brukeren ikke påvirkes. Mange trekker ofte den konklusjonen at nettstedet er tregt fordi det har dårlige poeng, men da har man ikke analysert hva testresultatet faktisk betyr. Lighthouse-poeng er ikke noe man bare kan sammenligne.” forklarer Albert.
Skjermbilde av Lighthouses diagnose av ytelsesproblemer på snusme.com i måleverktøyet PageSpeed Insights. På bildet ser man blant annet at ytelsen ligger på 54 poeng.
Core Web Vitals gir et riktigere bilde enn Lighthouse
Besøker du et nettsted med Google Chrome, måler Chrome i det stille hvor raskt nettstedet laster på datamaskinen din. Chrome sender informasjonen til Core Web Vitals eller Chrome User Experience Report, som fører statistikk over måleverdier fra virkelige personer som besøker et nettsted.
“Har du et nettsted i et utviklingsland, der folk kanskje har dårligere mobiler og internettforbindelse, får du dårligere resultater fordi alle besøkende har dårlige måleverdier. Et nettsted der flertallet av de besøkende er i for eksempel Sverige og de fleste har den nyeste iPhonen, får gode resultater. Så dette er mer en reality check på virkelige brukere.” forteller Albert.
Core Web Vitals viser statistikk for flere ulike måleverdier de siste 28 dagene og oppdateres fortløpende. I motsetning til Core Web Vitals, som måles på virkelige brukere, emulerer Lighthouse en gammel telefon, Moto G Power, med slow 4G.
“Det hender at Lighthouse sier noe som er helt på jordet, fordi noe får den til å gå seg vill og måle feil. Core Web Vitals gir et litt riktigere bilde, siden det er målt på virkelige besøkende. Ser du svært dårlige verdier her, bør du kanskje gjøre noe.” sier Albert.
Largest Contentful Paint går glipp av ytelsesfordelene med SPA-er
Largest Contentful Paint (LCP) er et viktig ytelsesmål som brukes til å vurdere lastetiden for den største synlige innholdsblokken på et nettsted. LCP måler hvor lang tid det tar fra brukeren ber om siden, til det største synlige innholdselementet (som et bilde, en video eller en tekstblokk) er rendret og synlig på skjermen.
“Hver gang jeg klikker på en lenke i en MPA-løsning, henter den en side (html-fil) fra serveren, og man får et måleresultat på kanskje 2 sekunder med en god løsning. For en SPA-løsning som SnusMe tar det 2 sekunder å hente den første siden, og alle nye sider tar bare en tredjedels sekund å laste, som er fade out/in-effekten som er lagt til. Selv om måleverktøyene ikke klarer å fange opp ytelsesfordelene en SPA gir, får vi gode resultater. Vi har jobbet hardt for å optimalisere LCP og er nå like raske som, eller raskere enn, de fleste MPA-er.” forklarer Albert.
I en SPA hentes ingen nye html-filer etter første sidevisning, noe som betyr at en ny LCP-måling ikke utløses ved hvert lenkeklikk. Derfor kan LCP være utilstrekkelig for å måle ytelsen til SPA-løsninger fullt ut, siden den ikke fanger opp hvor raskt innholdet oppdateres ved intern navigering.
Skjermbilde av en analyse av snusme.com i måleverktøyet PageSpeed Insights. På bildet ser man blant annet at Largest Contentful Paint ligger på 2 sekunder målt på virkelige brukere. I skjermbildet fra Lighthouse var LCP på 4,8 sekunder målt på simulerte data.
Nye målepunkter
Det finnes heller ingen standard for hvordan en SPA skal fungere, så det er vanskelig å vite hvordan man skal måle på en rettferdig måte, men dette er noe Google jobber med. Det skal komme nye måleverktøy i nettleseren, og ett som allerede har kommet, er Interaction To Next Paint. Det finnes også flere viktige målepunkter som ikke har med lastetider å gjøre, som Cumulative Layout Shift, som viser at innholdsblokker ikke har flyttet seg etter at siden er lastet.
“Dette er veldig komplekst, og nå har vi bare skrapt i overflaten på de viktige tingene folk ofte overser. Google sier selv at de ikke har noen god måte å måle ytelse på som gir et riktig bilde av en SPA. De måler som om det var en MPA-løsning, og en virkelig god SPA-løsning vil alltid være mye raskere for brukeren enn en veldig god MPA-løsning. Særlig hvis du begynner å snakke om at man kanskje ikke alltid har særlig god forbindelse.” sier Albert.
FAQ
Her er noen vanlige spørsmål og svar:
Hvor kan man lese mer?
Vi snakker gjerne mer om det siste innen teknologi og netthandel. Ta kontakt hvis du har spørsmål, vil komme innom på en kopp kaffe og snakke Single Page Application, eller book en demo!
Les også Chrome for Developers' egen artikkel How SPA architectures affect Core Web Vitals.
Hva er forskjellen mellom en Single Page Application (SPA) og en Multi-Page Application (MPA)?
SPA: Laster i utgangspunktet én HTML-fil og oppdaterer innholdet dynamisk uten å laste hele siden på nytt. Det gir en raskere og mer interaktiv brukeropplevelse.
MPA: Består av flere HTML-filer, der hver sidevisning krever en ny forespørsel til serveren for å hente en ny HTML-fil. Hver navigering mellom sider betyr en full sidelasting.
Les også artikkelen Hva er Single Page Application?.
Hva er fordelene med en SPA?
Raskere navigering og bedre brukeropplevelse, siden bare deler av siden oppdateres.
Bedre håndtering av cache og mindre belastning på serveren.
Mulighet for offline-modus ved hjelp av service workers.
Kan man ha en SPA-løsning uansett netthandelsplattform?
Ja, en SPA-løsning kan implementeres på i prinsippet hvilken som helst netthandelsplattform. I Webbhuset spesialiserer vi oss på å skreddersy netthandelsløsninger og kan hjelpe deg med å implementere en effektiv SPA-løsning uansett hvilken plattform du bruker.
Vil du vite mer?
Fyll ut skjemaet, så kontakter vi deg snart.
