Hastighedsoptimering handler selvfølgelig om at gøre din hjemmeside hurtigere. Men hvad vil det egentlig sige? Det er vigtigt, at du forstår, at det handler om mere end “min hjemmeside loader hurtigere end x-antal sekunder.”
Der er helt grundlæggende forskel på, hvor hurtigt din hjemmeside bliver oplevet af brugeren og så hvor hurtigt alt indholdet bliver hentet ned. Begge dele kan du optimere på, men det er et vigtigt skel. For det er den oplevede hastighed, din bruger reagerer på. Så ved at prioritere hårdt i, hvordan indholdet bliver indlæst, så kan du faktisk skabe indtrykket af en endnu hurtigere hjemmeside.
Men hastighedsoptimering starter med, at du kender dit udgangspunkt, derfor får du her gode råd til, hvordan du tester hastigheden på din WordPress hjemmeside.
Få gode råd i Google PageSpeed Insights
Google PageSpeed Insights er et fedt værktøj. Der bliver givet nogle meget klare bud på, hvordan du kan optimere din hjemmeside. Og så er deres bud nok en ok indikator på, hvad der hjælper dig ude i søgemaskinerne.
I stedet for at fokusere udelukkende på, hvornår en side er indlæst helt, så måler PageSpeed Insights på nogle langt mere interessante faktorer som:
- Time to First Byte
(hvor lang tid er din server om at servere filerne for din bruger) - First Contentful Paint
(tidspunktet hvor det første tekst eller billede vises på din side) - First Meaningful Paint
(tidspunktet hvor dit primære indhold kan vises) - Time to Interactive
(tidspunktet hvor dine brugere kan interagere fuldt ud med din side)
Det er vigtige faktorer for en god brugeroplevelse. Og så giver PageSpeed Insights dig nogle ret deltajerede og konkrete input til, hvordan du kan forbedre hastigheden.
Index data fra rigtige besøg
Noget af det mest spændende i PageSpeed Insights er data fra rigtige besøg. Det giver dig en indikation af, hvor du performer i forhold til andre websites.
Det kræver en vis mængde af trafik til din side, før Google har data nok til at levere feltdata. Men når du får indsigterne, så er de guld værd.
Her er det data fra https://altomledelse.dk på mobiler.
Input til at optimere indlæsningshastigheden på din hjemmeside
En rigtig fin feature i Google PageSpeed Insights er deres forslag til optimering. Og meget pædagogisk er de angivet med potentiel besparelse i sekunder. Det er simpelthen til at forstå.
Her er det data fra en større dansk side. Selvom der ser ud til at være mange punkter at arbejde med, så er det min erfaring at siden her stadig er i den gode ende af skalaen.
Optimer de mest kritiske elementer
Har du en ældre side, eller er tingene bare bygget lidt skørt op, så kan det blive en lidt slidsom kamp at komme op på 100 / 100. For nogle af anbefalingerne giver måske slet ikke så meget værdi, som du forledes til at tro.
Eksempelvis er WebP Googles eget billedformat. Og selvom det er lynhurtigt, så kan det ikke altid betale sig. Det kan være mange billeder at skifte ud. Og måske er det kun få KB, du sparer pr. side. Så husk at du stadig skal vurdere den potentielle effekt op imod omkostningerne.
Test indlæsningstiden med Pingdom Website Speed Test
Pingdom er et ret enkelt værktøj, der giver dig en indikation af, hvordan din hjemmeside klarer sig. Du får en grade. Og det er selvsagt målet, at den er høj og i det grønne felt.
Det er klart et af de mest tilgængelige værktøjer, når du skal hastighedsoptimere. Det kan du altså bruge, selvom du ikke selv er ekspert i hastighedsoptimering.
Her kan du se et eksempel, hvor der er arbejdet med hastighedsoptimering af https://heineaeen.dk. På trods af en billedtung forside og en pagebuilder, der loader lidt mange scripts ind (yikes!), så er siden kommet ned på en indlæsningstid på 806ms.
Den hurtigere oversigt er fin nok. Det jeg virkelig godt kan lide ved Pingdom er, at du får et godt breakdown af, hvilken type af indhold, der fylder meget på din side. Så kan du se, om det er CSS, JavaScript, billeder eller noget helt andet, der er den store synder.
Vil du dykke lidt dybere, så kan du hurtigt få et indtryk af, hvor skoen trykker, når du bruger Pingdoms vandfald. Her kan du se, hvor lang tid de enkelte elementer er om at blive hentet ned. Det givet et indblik, om noget fylder for meget, blokerer for kritiske elementer eller simpelthen bare er exceptionelt langsomme om at blive trukket ned fra serveren.
Få detaljerede indsigter med Webpagetest.org
Webpagetest.org er klassens gamle dreng. Den har eksisteret længe, og selvom designet måske ikke ligefrem sprudler af 2020, så er det spækket med vigtige informationer.
Du kan se en lille film, hvor du kan se, hvordan din side bliver indlæst. Det kan være en meget givende måde at analysere dine problemer på.
En virkelig fin ting er, at den besøger din side tre gange. Det giver dig en vigtig viden: Forskellen på hvordan nye besøgende oplever din side kontra dem, der har været forbi før. Det er vigtigt, fordi tidligere besøgende kan have en masse gemt i deres browsercache, som får din side til at opleves hurtigere. Men du vil gerne være hurtigt for de nye besøgende også.
Det er særligt deres vandfald, der giver dig vigtige informationer om, hvad der loader hvornår. Og så får du en visuel indikation af, hvordan elementerne i vandfaldet bliver indlæst i forhold til hinanden.
Husk at din hjemmeside er andet end forsiden
Når du støder på hastighedstest og læser forskellige cases, så er det ofte kun forsiden, der er blevet målt på. Det kan give god mening, fordi forsiden kan være en lidt tungere side end de fleste. Fordi en forside typisk har flere billeder.
Derfor er min anbefaling, at du måler hastigheden på forskellige indholdstyper, så du både har en måling for din forside, en produktside, et blogindlæg, en kategoriside. Der kan være aktiveret elementer og funktionalitet på enkelte indholdstyper, der får din indlæsningstid til at eksplodere. Og det opdager du ikke ved at analysere forsiden.
Se eksempelvis forskellen i antal request på de her to sider:
Husk at du kan optimere mere end værktøjerne kan måle.
Du kan selvfølgelig ikke med dine egne øjne registrere hastigheden i millisekunder og med præcision som de store værktøjer. Men føles en hjemmeside langsom, så kan du godt regne med, at der er noget om snakken.
Men det er ikke hele pointen her. Det er også fordi, der simpelthen er optimeringstiltag, som de forskellige værktøjer ikke helt kan måle effekten af endnu – men som giver en meget hurtigere oplevelse for din bruger.
Et eksempel er prefetch af omkringliggende sider på din hjemmeside. Det betyder helt konkret, at du i baggrunden begynder at indlæse indholdet af sider, det er sandsynligt din besøgende vil klikke sig videre til. Det er snedigt, og det får den næste indlæste side til at indlæse møghurtigt. Men effekten er svær at måle med de gængse værktøjer. Der skal du pludselig sidde og aflæse grafer i browserens developer tool. Men uanset hvad, så vil det for brugeren opleves hurtigere.
Psstt… prøv Quicklink for WordPress, hvis du vil lege med prefetch af indhold. Det er svedigt nok.