Missvisande mätresultat av Single Page Application-lösningar

Prestanda för användaren

En del av prestanda är användarens upplevelse av en hemsidas hastighet. Oavsett om det är en Multi-Page Application (MPA) eller Single Page Application (SPA) så kan de upplevas lika snabba i praktiken för en användare. Skillnaden märks dock om internetuppkopplingen försämras.

“Är man exempelvis i en tunnel och får dålig täckning, då kommer det att märkas med en MPA-lösning. Det kanske tar 5 sekunder att se en ny sida och ibland hoppar grejer ner och så klickar man på något annat än tänkt. Det här missar ju folk ofta. De testar en SPA- och en MPA-lösning på sitt fibernätverk med en Macbook Pro för 30 000 kr. Det är klart att den är snabb då och det är detta som är prestanda för användaren, upplevelsen av hemsidans hastighet.” berättar Albert.

Prestanda för Google-rankning

Den andra delen av prestanda handlar om sökmotoroptimering (SEO). Där har bland annat Google gått ut med att hastighet är en komponent av deras ranking-algoritm, men de har inte sagt hur stor andel det är av den totala rankingpoängen.

“Många får för sig att ju snabbare sajt du har, desto längre upp i Google sökresultat kommer du. Man vet inte ifall hastigheten är 1% av dina rankingpoäng eller ifall en godkänd prestanda är detsamma. Är snabbare nödvändigtvis bättre? Om det tar en tredjedels sekund när jag klickar på en länk tills den nya sidan visas jämfört med en tiondels sekund, är den tre gånger bättre då? En användare kommer inte märka någon skillnad, man klickar och upplevelsen är att det händer direkt.” säger Albert.

När vi byggde SnusMe:s e-handel så var den så pass optimerad att man fick lägga in en fade out/in-effekt. Innan effekten lades till hann man knappt uppfatta sidbytet när man klickade mellan länkar, eftersom hemsidan hade en så oerhört hög prestanda. Denna anpassning var även viktig ur ett tillgänglighetsperspektiv, då personer med exempelvis nedsatt syn skulle kunna missa dessa snabba sidbyten.

“Då har vi prestanda för användare vs. prestanda för Google-rankning. Vi människor uppfattar tider ner till ungefär en tredjedels sekund, snabbare än så gör ingen praktisk skillnad då det upplevs som omedelbart. Om en sida tar många sekunder att ladda blir det störande och vissa kanske väljer att lämna sajten. För Google-rankning är det oklart hur mycket prestanda påverkar, men Google har själva sagt att bra prestanda för användaren är viktigt.” berättar Albert.

Feldiagnostiserade problem med Lighthouse

Det finns två välkända verktyg att mäta prestanda, Lighthouse och Core Web Vitals. Analyserar man en hemsida med PageSpeed Insight så får man först resultatet från Core Web Vitals och sedan får man en Lighthouse-diagnos. Lighthouse är ett verktyg för utvecklare som man även kan få upp i webbläsaren. Verktyget simulerar en användares besök på sidan och ger sedan förbättringsförslag.

“Lighthouse mäter inte den faktiska prestandan på ett rättvist sätt. Det blir jättemycket feldiagnostiserade problem och mäter man samma sida flera gånger så får man inte samma resultat varje gång. Dessa förslag som Lighthouse ger stämmer inte alltid, eller så behöver man inte nödvändigtvis fixa dem.” säger Albert.

Många sajter använder sig av olika scripts som tar lång tid att ladda in, men som inte har någon praktisk betydelse för användarupplevelsen då dessa inte alltid syns. Antalet och storleken av olika scripts varierar från hemsida till hemsida, men dessa kan exempelvis vara spårningsverktyg såsom Google Tag Manager och Google Analytics, eller chat-bottar och annonsverktyg. För vår kund SnusMe är det ungefär 89 kb scripts som behövs för att sajten ska synas. Detta är inte mycket, men med Google Tag Manager och Google Analytics blir det tre gånger så mycket scripts som ska läsas in.

“Ofta är det fem gånger mer Javascript som laddas in på andra sajter som inte syns för användaren och det drar ner Lighthouse-poängen jättemycket. Detta är dock inte något problem, eftersom prestandan för användaren inte påverkas. Många drar ofta slutsatsen att sajten är långsam för att den har dåliga poäng, men då har man inte gjort en analys av vad testresultatet faktiskt betyder. Lighthouse-poäng är inget man bara kan jämföra med.” förklarar Albert.

Core Web Vitals mer rättvisande än Lighthouse

Besöker man en hemsida med Google Chrome så kommer Chrome i smyg att mäta hur snabbt hemsidan laddar in på din dator. Chrome skickar informationen till Core Web Vitals eller Chrome User Experience Report som för statistik på mätvärden från riktiga personer som besöker en sajt.

“Har man en sajt i ett u-land där man kanske har sämre mobiler och internetuppkoppling, då kommer man få sämre resultat eftersom alla besökare har dåliga mätvärden. En sajt där majoriteten av besökarna är i exempelvis Sverige och de flesta har senaste iPhone, då får du bra resultat. Så det här är mer en reality check på riktiga användare.” berättar Albert.

Core Web Vitals visar statistik för flera olika mätvärden under de senaste 28 dagarna och uppdateras kontinuerligt. Till skillnad från Core Web Vitals som mäts på riktiga användare, så emulerar Lighthouse en gammal telefon, Moto G Power, med slow 4G.

“Det förekommer att Lighthouse säger en sak som är helt uppåt väggarna för att någonting gör att den bara tappar bort sig och mäter fel. Core Web Vitals är lite mer rättvisande eftersom det är mätt på riktiga besökare. Ser man då väldigt dåliga värden här då kanske man ska göra något.” säger Albert.

Largest Contentful Paint missar prestandafördelarna med SPA:er

Largest Contentful Paint (LCP) är ett viktigt prestandamått som används för att bedöma laddningstiden av det största synliga innehållsblocket på en hemsida. LCP mäter hur lång tid det tar från att användaren begär sidan, tills det största synliga innehållselementet (såsom en bild, video eller textblock) är renderat och synligt på skärmen.

“Varje gång jag klickar på en länk i en MPA-lösning, så hämtar den en sida (html-fil) från servern och man får ett mätresultat som kanske tar 2 sekunder med en bra lösning. För en SPA-lösning såsom SnusMe tar det 2 sekunder att hämta första sidan och samtliga nya sidor tar endast en tredjedels sekund att ladda, vilket är den fade out/in-effekten som lagts till. Trots att mätverktygen inte lyckas fånga upp prestandafördelarna som en SPA ger får vi bra resultat. Vi har arbetat hårt för att optimera LCP och är nu lika snabba, eller snabbare, än de flesta MPA:er.” förklarar Albert.

I en SPA hämtas inga nya html-filer efter första sidhämtning vilket innebär att en ny LCP-mätning inte triggas vid varje länkklick. Därför kan LCP vara otillräcklig för att fullt ut mäta prestandan på SPA-lösningar, eftersom den inte fångar upp hur snabbt innehållet uppdateras vid intern navigering.

Nya mätpunkter

Det finns inte heller en standard för hur en SPA ska funka så det är svårt att veta hur man ska mäta på ett rättvist sätt, men detta är något som Google jobbar på. Det ska komma nya mätverktyg i webbläsaren och en som redan har kommit är Interaction To Next Paint. Det finns även flera viktiga mätpunkter som inte har med laddtider att göra, såsom Kumulativ Layout Shift som indikerar att innehållsblock inte har flyttats efter att sidan har laddats.

“Det här är jättekomplext och nu har vi bara skrapat på ytan på de viktiga grejerna som folk ofta missar. Google själva säger att de inte har något bra sätt att mäta prestanda som är rättvisande för en SPA. De mäter som om det vore en MPA-lösning och en riktigt bra SPA-lösning kommer alltid vara mycket snabbare för användaren än en jättebra MPA-lösning. Framförallt om du börjar prata om att man kanske inte alltid har jättebra uppkoppling.” säger Albert.

Vart kan man läsa mer?

Vad är skillnaden mellan en Single Page Application (SPA) och en Multi-Page Application (MPA)?

Vilka är fördelarna med en SPA?

Kan man ha en SPA-lösning oavsett e-handelsplattform?

B2B/B2C
Posterys kliv till AI-native e-handel med Fusion Commerce
B2C
Långsiktiga tekniska val banar väg för Doorlys tillväxt
B2B
Luna förenklar återförsäljarnas e-handel med konceptet Toolshop
B2B
Ninolab möter generationsskiftet med ny webbshop i Fusion Storefront
B2B/B2C
Skräddarsytt CRM gav Newbody 360-vy över hela sin försäljningsresa

Varför mätverktyg såsom PageSpeed Insights ger missvisande resultat av SPA-lösningar