Google siger selv, at de ikke har nogen god måde at måle ydeevne på, som giver et retvisende billede af en SPA. De måler, som om det var en MPA-løsning, og en rigtig god SPA-løsning vil altid være meget hurtigere for brugeren end en rigtig god MPA-løsning. Især hvis man begynder at tale om, at man måske ikke altid har en særlig god forbindelse.
Google siger selv, at de ikke har nogen god måde at måle ydeevne på, som giver et retvisende billede af en SPA. De måler, som om det var en MPA-løsning, og en rigtig god SPA-løsning vil altid være meget hurtigere for brugeren end en rigtig god MPA-løsning. Især hvis man begynder at tale om, at man måske ikke altid har en særlig god forbindelse.
Hvorfor måleværktøjer som PageSpeed Insights giver misvisende resultater for SPA-løsninger
“Mange forenkler ydeevne til kun at være det, måleværktøjerne siger, men måleværktøjerne er ikke bygget, så de måler virkeligheden på en retfærdig måde. Der er flere faktorer, der gør, at et website er hurtigt i praksis, men alligevel får dårlige måleresultater. Især for Single Page Application.” forklarer Albert Dahlin, CTO hos Webbhuset.
Ydeevne for brugeren
En del af ydeevne er brugerens oplevelse af et websites hastighed. Uanset om det er en Multi-Page Application (MPA) eller Single Page Application (SPA), kan de opleves lige hurtige i praksis for en bruger. Forskellen mærkes dog, hvis internetforbindelsen bliver dårligere.
“Er man for eksempel i en tunnel og får dårlig dækning, så kan det mærkes med en MPA-løsning. Det tager måske 5 sekunder at se en ny side, og nogle gange hopper ting ned, så man klikker på noget andet end tiltænkt. Det overser folk ofte. De tester en SPA- og en MPA-løsning på deres fiberforbindelse med en Macbook Pro til 30 000 kr. Selvfølgelig er den hurtig så, og det er det, der er ydeevne for brugeren: oplevelsen af websitets hastighed.” fortæller Albert.
Ydeevne for Google-placering
Den anden del af ydeevne handler om søgemaskineoptimering (SEO). Her har blandt andre Google meldt ud, at hastighed er en komponent i deres rankingalgoritme, men de har ikke sagt, hvor stor en andel det udgør af den samlede rankingscore.
“Mange tror, at jo hurtigere et website man har, desto højere kommer man op i Googles søgeresultater. Man ved ikke, om hastigheden udgør 1% af ens rankingpoint, eller om en godkendt ydeevne giver det samme. Er hurtigere nødvendigvis bedre? Hvis der går en tredjedel sekund, fra jeg klikker på et link, til den nye side vises, sammenlignet med en tiendedel sekund, er det så tre gange bedre? En bruger vil ikke mærke nogen forskel. Man klikker, og oplevelsen er, at det sker med det samme.” siger Albert.
Da vi byggede SnusMes webshop, var den så optimeret, at vi var nødt til at tilføje en fade out/in-effekt. Før effekten blev tilføjet, nåede man knap at opfatte sideskiftet, når man klikkede mellem links, fordi websitet havde så ekstremt høj ydeevne. Tilpasningen var også vigtig af hensyn til tilgængelighed, da personer med for eksempel nedsat syn kunne gå glip af de hurtige sideskift.
“Så har vi ydeevne for brugere vs. ydeevne for Google-placering. Vi mennesker opfatter tider ned til omkring en tredjedel sekund. Hurtigere end det gør ingen praktisk forskel, da det opleves som øjeblikkeligt. Hvis en side tager mange sekunder at indlæse, bliver det forstyrrende, og nogle vælger måske at forlade websitet. For Google-placering er det uklart, hvor meget ydeevne påvirker, men Google har selv sagt, at god ydeevne for brugeren er vigtig.” fortæller Albert.
Fejldiagnosticerede problemer med Lighthouse
Der findes to velkendte værktøjer til at måle ydeevne, Lighthouse og Core Web Vitals. Analyserer man et website med PageSpeed Insights, får man først resultatet fra Core Web Vitals og derefter en Lighthouse-diagnose. Lighthouse er et værktøj til udviklere, som man også kan åbne i browseren. Værktøjet simulerer en brugers besøg på siden og giver derefter forslag til forbedringer.
“Lighthouse måler ikke den faktiske ydeevne på en retfærdig måde. Der bliver rigtig mange fejldiagnosticerede problemer, og måler man den samme side flere gange, får man ikke det samme resultat hver gang. De forslag, Lighthouse giver, passer ikke altid, eller også er det ikke nødvendigvis nødvendigt at rette dem.” siger Albert.
Mange websites bruger forskellige scripts, der tager lang tid at indlæse, men som ikke har nogen praktisk betydning for brugeroplevelsen, fordi de ikke altid er synlige. Antallet og størrelsen af scripts varierer fra website til website, men det kan for eksempel være sporingsværktøjer som Google Tag Manager og Google Analytics eller chatbots og annonceringsværktøjer. For vores kunde SnusMe kræves der omkring 89 kb scripts, for at websitet kan vises. Det er ikke meget, men med Google Tag Manager og Google Analytics bliver det tre gange så mange scripts, der skal indlæses.
“Ofte indlæses der fem gange mere Javascript på andre websites, som ikke er synligt for brugeren, og det trækker Lighthouse-scoren voldsomt ned. Det er dog ikke noget problem, fordi ydeevnen for brugeren ikke påvirkes. Mange konkluderer ofte, at websitet er langsomt, fordi det har en dårlig score, men så har man ikke analyseret, hvad testresultatet faktisk betyder. Lighthouse-scoren er ikke noget, man bare kan sammenligne med.” forklarer Albert.
Skærmbillede af Lighthouses diagnose af ydeevneproblemer på snusme.com i måleværktøjet PageSpeed Insights. På billedet ser man blandt andet, at ydeevnen ligger på 54 point.
Core Web Vitals er mere retvisende end Lighthouse
Besøger man et website med Google Chrome, måler Chrome i al stilhed, hvor hurtigt websitet indlæses på ens computer. Chrome sender informationen til Core Web Vitals eller Chrome User Experience Report, der fører statistik over måleværdier fra rigtige personer, der besøger et website.
“Har man et website i et udviklingsland, hvor folk måske har dårligere mobiler og internetforbindelse, så får man dårligere resultater, fordi alle besøgende har dårlige måleværdier. Et website, hvor flertallet af de besøgende er i for eksempel Sverige, og de fleste har den nyeste iPhone, får gode resultater. Så det her er mere et reality check på rigtige brugere.” fortæller Albert.
Core Web Vitals viser statistik for flere forskellige måleværdier for de seneste 28 dage og opdateres løbende. I modsætning til Core Web Vitals, der måles på rigtige brugere, emulerer Lighthouse en gammel telefon, Moto G Power, med slow 4G.
“Det sker, at Lighthouse siger noget, der er helt ude i hampen, fordi noget får den til at fare vild og måle forkert. Core Web Vitals er lidt mere retvisende, fordi det er målt på rigtige besøgende. Ser man meget dårlige værdier her, bør man måske gøre noget.” siger Albert.
Largest Contentful Paint overser ydeevnefordelene ved SPA'er
Largest Contentful Paint (LCP) er et vigtigt ydeevnemål, der bruges til at vurdere indlæsningstiden for den største synlige indholdsblok på et website. LCP måler, hvor lang tid der går, fra brugeren anmoder om siden, til det største synlige indholdselement (såsom et billede, en video eller en tekstblok) er renderet og synligt på skærmen.
“Hver gang jeg klikker på et link i en MPA-løsning, henter den en side (html-fil) fra serveren, og man får et måleresultat på måske 2 sekunder med en god løsning. For en SPA-løsning som SnusMe tager det 2 sekunder at hente den første side, og alle nye sider tager kun en tredjedel sekund at indlæse, hvilket er den fade out/in-effekt, der er tilføjet. Selvom måleværktøjerne ikke formar at fange de ydeevnefordele, en SPA giver, får vi gode resultater. Vi har arbejdet hårdt på at optimere LCP og er nu lige så hurtige som eller hurtigere end de fleste MPA'er.” forklarer Albert.
I en SPA hentes der ingen nye html-filer efter første sidevisning, hvilket betyder, at en ny LCP-måling ikke udløses ved hvert klik på et link. Derfor kan LCP være utilstrækkelig til fuldt ud at måle ydeevnen på SPA-løsninger, fordi den ikke fanger, hvor hurtigt indholdet opdateres ved intern navigation.
Skærmbillede af en analyse af snusme.com i måleværktøjet PageSpeed Insights. På billedet ser man blandt andet, at Largest Contentful Paint ligger på 2 sekunder målt på rigtige brugere. I skærmbilledet fra Lighthouse var LCP på 4,8 sekunder målt på simulerede data.
Nye målepunkter
Der findes heller ingen standard for, hvordan en SPA skal fungere, så det er svært at vide, hvordan man skal måle på en retfærdig måde, men det er noget, Google arbejder på. Der kommer nye måleværktøjer i browseren, og et, der allerede er kommet, er Interaction To Next Paint. Der findes også flere vigtige målepunkter, der ikke har med indlæsningstider at gøre, såsom Cumulative Layout Shift, der viser, at indholdsblokke ikke har flyttet sig, efter at siden er indlæst.
“Det her er meget komplekst, og vi har kun kradset i overfladen af de vigtige ting, som folk ofte overser. Google siger selv, at de ikke har nogen god måde at måle ydeevne på, som giver et retvisende billede af en SPA. De måler, som om det var en MPA-løsning, og en rigtig god SPA-løsning vil altid være meget hurtigere for brugeren end en rigtig god MPA-løsning. Især hvis man begynder at tale om, at man måske ikke altid har en særlig god forbindelse.” siger Albert.
FAQ
Her er nogle almindelige spørgsmål og svar:
Hvor kan man læse mere?
Vi taler gerne mere om det nyeste inden for teknologi og e‑handel. Kontakt os, hvis du har spørgsmål, vil kigge forbi til en kop kaffe og tale Single Page Application, eller book en demo!
Læs også Chrome for Developers' egen artikel How SPA architectures affect Core Web Vitals.
Hvad er forskellen på en Single Page Application (SPA) og en Multi-Page Application (MPA)?
SPA: Indlæser først én HTML-fil og opdaterer indholdet dynamisk uden at genindlæse hele siden. Det giver en hurtigere og mere interaktiv brugeroplevelse.
MPA: Består af flere HTML-filer, hvor hver sidevisning kræver en ny forespørgsel til serveren for at hente en ny HTML-fil. Hver navigation mellem sider betyder en fuld sideindlæsning.
Læs også artiklen Hvad er Single Page Application?.
Hvad er fordelene ved en SPA?
Hurtigere navigation og bedre brugeroplevelse, fordi kun dele af siden opdateres.
Bedre håndtering af cache og mindre belastning af serveren.
Mulighed for offline-tilstand ved hjælp af service workers.
Kan man have en SPA-løsning uanset e‑handelsplatform?
Ja, en SPA-løsning kan implementeres på stort set en hvilken som helst e‑handelsplatform. Hos Webbhuset er vi specialiseret i at skræddersy e‑handelsløsninger og kan hjælpe dig med at implementere en effektiv SPA-løsning, uanset hvilken platform du bruger.
Vil du vide mere?
Udfyld formularen, så kontakter vi dig snarest.
