Værktøjer til at måle hjemmeside hastighed
Udgivet: July 17, 2019
Senest opdateret: February 24, 2021
Find ud af hvad der sløver dit website
For at finde løsningen skal du først finde årsagen til problemet.
Ryan, 1902 Softwares WordPress, ser ofte klienter bruge meget store billeder på deres websites, uvidende om at det kan påvirke sidens hastighed. “Det er en almindelig ting, som folk ikke er klar over sløver deres website. Oftest er det æstetik fremfor hastighed.”
“Et andet almindeligt problem, der opstår for brugere af CMS [content management system], især WordPress, er installering af plugins, der kun er tiltænkt én bestemt side,” tilføjer Ryan.
“Plugins er som standard aktiveret globalt [dvs. for hele websitet], så pluginnets JavaScript og CSS-filer loades på alle sider på websitet, uanset om pluginnet faktisk bruges eller overhovedet er nødvendigt på disse sider eller ej.”
Som resultat påvirker dette ekstra JavaScript og CSS indlæsningshastigheden for sådanne sider, selvom de faktisk ikke har noget at gøre med sidens indhold eller funktionaliteter.
Disse er blot nogle af de mere gængse udfordringer, og nogle gange er det relativt enkle forhold som disse - problemer der stammer fra websitets ejer, redaktør eller marketingfolk uvidende om hvad man gør, og hvad man ikke gør, når det gælder hastighed - der forårsager den sløje indlæsningstid for en side.
Andre gange kan problemet ligge dybere i websitets kode og kræver teknisk vejledning for at blive løst.
Men fællesnævneren for disse udfordringer er, at medmindre du er opmærksom på dem, vil du ikke kunne tage dig af dem dem.
Hvad der forårsager en langsom indlæsningstid er ikke altid indlysende - hvis det var, så ville du have gjort noget ved det nu. Især for mere komplekse problemer der ligger i koden, kan du få brug for udviklere til at kigge på dit website og afgøre, hvad der ikke virker og forårsager problemer.
For “generel diagnose”, giver de fleste hastigheds- og ydelses-testværktøjer imidlertid indsigt i og forslag til hvad der gør, at dit website loades langsomt. Her er nogle, som vi har fundet gavnlige i vores egne projekter:
1. Google’s Test My Site – Dette værktøj måler hastigheden på den mobile side med hensyn til First Contentful Paint, eller det punkt hvor det første indhold loades på din side.
For de bedst performende websites viser dette værktøj også websitets hastighed, eller hastighedsmåling for alle sider på dit website baseret på reelle data indsamlet via Chrome User Experience Report (CrUX).
Test My Site giver basale forslag til forbedring af mobilsiders hastighed såvel som to yderligere funktioner: Industry Benchmark, hvor man kan se, hvordan man ligger i forhold til de bedst performende sites i éns branche, og Impact Calculator, som vi har talt om tidligere, hvor du kan måle hastighedens effekt på din virksomhed, ved at få et skøn over en potentiel øget omsætning med en hurtigere indlæsningstid.
2. Lighthouse – Dette er et testværktøj, der kan køres som en Chrome-udvidelse eller direkte i Chrome DevTools (dvs. dét sæt af webudviklerværktøjer indbygget i Google Chrome-browseren der normalt er tilgængelige, når du højreklikker og inspicerer en webside).
Lighthouse bedømmer en side i forskellige kategorier: Ydeevne, progressive webapp, tilgængelighed, best practices og SEO.
Ydeevnen bedømmes på forskellige parametre: first contentful paint, first meaningful paint, speed index, first CPU idle, time to interactive, og estimated input latency.
Udover selve bedømmelsen orienterer Lighthouse også om mulige årsager til din sides nedsatte hastighed og giver konkrete forslag til forbedring af sidens performance og deraf følgende nedbringelse af indlæsningstid.
3. Page speed insights – Dette giver indsigt i din sides hastighed på både desktop og mobil.
Page speed insights bruger stort set Lighthouse-data til hastighedstest og rapporterer derfor på de samme parametre, som Lighthouse bruger. Det er dog værd at bemærke, at Page speed insights og Lighthouse (tilgået inde fra Chrome DevTools) i nogle tilfælde kan give forskellige resultater. [Dette er vores observation fra vores egne tests, men generelt burde resultaterne ligge inden for samme margen.]
Udover de laboratoriedata der er analyseret af Lighthouse, præsenterer den også reelle data fra brugeroplevelser via CrUX, når de er tilgængelige for websitet.
4. WebPageTest – Dette giver dig mulighed for at simulere, hvordan din side indlæses et bestemt sted og i en bestemt browser, så dette er især ideelt for virksomheder med kunder fra forskellige regioner, for at få bedre overblik over hvordan dine sider indlæses til dine målbrugere.
Bortset fra placeringen lader WebPageTest dig også vælge browseren og mange andre avancerede indstillinger, der kan hjælpe dig med yderligere analyse af dit websites performance.
5. GTmetrix – GTmetrix er en pakke af forskellige funktioner, der fokuserer på at forbedre web-performance, og kommer i både en gratis og en betalt version.
Det analyserer en webside baseret på indikatorer fastlagt af Google og Yahoo, og rapporterer på forskellige parametre som sideindlæsningstid, sidestørrelse og antal anmodninger. GTmetrix lader dig også afspille videoer af sideindlæsninger for et nærmere kig på mulige indlæsningsproblemer eller en trin-for-trin-visning af sideindlæsning i realtid.
Der er også mulighed for at oprette automatisk overvågning af sider og advarsler om forskellige forhold, der tyder på dårlig side-performance, som f.eks. langsom indlæsningstid eller en betydelig stigning i den samlede sidestørrelse.
6. Pingdom – Ligesom GTmetrix tilbyder også Pingdom forskellige funktioner til overvågning af dit websites hastighed og performance.
De har et værktøj til hastighedstest, som lader dig teste indlæsningstiden fra en bestemt lokation, og pro-udgaven indeholder endda en funktion til at overvåge faktiske brugere, der besøger dit website. Dette hjælper dig når du skal identificere reelle flaskehalse som brugere kan opleve, når dit website indlæses.
Som det gælder for alle tiltag vil også hastighedsoptimering være mest effektiv, når først du forstår, hvad du arbejder med - f.eks. din aktuelle hastighed, de resurser og elementer du har (brug for) osv. - og får gravet dig helt ned til hvad årsagen til den langsomme indlæsningstid er.
I den næste artikel, har vi samlet nogle best practice og tips fra vores projektledere her I 1902 Software, til hvordan du kan øge hastigheden på din hjemmeside.