Der er en bestemt samtale, der går igen. Nogen har kørt deres hjemmeside gennem et hastighedsværktøj, fået 64 ud af 100, og vil gerne vide, hvad der skal til for at komme op på 90.

Det er et rimeligt spørgsmål med et utilfredsstillende svar: tallet er ikke målet. En besøgende har aldrig set din score. Hun har mærket, om siden var der, da hun kom, og det er noget andet, og heldigvis noget, man kan gøre noget ved.

Hvad vi gjorde ved vores eget

I efteråret gik vi vores eget site efter i sømmene. Ikke fordi det var langsomt at se på, men fordi vi havde en mistanke om, hvor problemet lå, og vi ville have vished frem for en fornemmelse.

Mistanken var, at det hverken var JavaScript eller den animation, der ligger i baggrunden på forsiden. Det var billederne.

Vi målte de samme sider før og efter, under nøjagtigt de samme betingelser: simuleret mobil, struben nede, samme maskine, samme rækkefølge, flere kørsler. Det er den eneste måde, et tal af den slags betyder noget, altså som en sammenligning med sig selv frem for som et karakterblad.

Resultatet: Largest Contentful Paint på forsiden faldt fra omkring 3.700 ms til omkring 1.660 ms. Den samlede billedvægt for en telefon med en skarp skærm faldt fra cirka 2.550 KB til cirka 1.450 KB. Scoren fulgte med, fra 88 til 99, men det var ikke den, vi jagtede. Vi jagtede de to sekunder.

Hvorfor billeder næsten altid er svaret

Et typisk site sender det samme billede til alle. Det er fremstillet til en stor skærm, fordi det skulle se skarpt ud på en stor skærm, og så får telefonen den samme fil.

En telefon på 390 px bredde, der får et billede på 2000 px, skalerer det ned, inden det vises. Al den ekstra opløsning er hentet over mobilnettet, dekodet på en processor, der ikke er så hurtig som din bærbare, og derefter smidt væk. Brugeren betalte ventetiden for noget, hun aldrig så.

Løsningen er ikke ny og ikke smart. Det er at lave flere størrelser af hvert billede og lade browseren vælge. Det kedelige ved det er, at det skal gøres for alle billeder, hele tiden, også dem der bliver lagt op om et halvt år. Derfor bygger vi det som noget, der sker automatisk ved upload, i stedet for som noget nogen skal huske.

De tre ting, der giver mest

Send det rigtige billede til den rigtige skærm. Det er hovedretten. På de fleste sider, vi har rørt ved, ligger over halvdelen af den samlede vægt i billeder, og en stor del af den halvdel er overflødig.

Lad være med at udskyde det, der skal ses først. Lazy loading på alle billeder er blevet et standardråd, og det er forkert for det øverste billede på siden. Det er præcis det billede, brugeren venter på. At udskyde det gør den målte ventetid værre, ikke bedre.

Reserver pladsen. Et billede uden angivet højde og bredde får siden til at hoppe, når det lander. Det gør ikke siden langsommere, men det får den til at føles ustabil, og en side, der flytter sig under fingeren, mens man er ved at trykke, opleves som dårligt håndværk. Det er det også.

Skrifttyper, den oversete forsinkelse

Efter billeder er skrifttyper det sted, vi oftest finder tid at hente.

Problemet er sjældent filernes størrelse. Det er, hvornår de bliver opdaget. Browseren skal først hente HTML, så CSS, og først der finder den ud af, at der skal bruges en skrifttype, som ligger et tredje sted. I mellemtiden står teksten enten usynlig eller i en anden skrift, der skifter, når den rigtige lander.

To ting løser det meste. Hent skrifttyperne fra jeres egen server frem for fra en tredjepart, så der ikke skal oprettes en ny forbindelse. Og fortæl browseren om de vigtigste af dem med det samme, i stedet for at lade den opdage dem undervejs.

Der er en sidegevinst: skrifttyper hentet fra jeres eget domæne sender ikke jeres besøgende videre til en anden virksomhed. Det er en hastighedsbeslutning og en privatlivsbeslutning på en gang, og de peger begge samme vej.

Det, andre lægger på dit site

Et site bliver sjældent langsomt på en gang. Det bliver langsomt en plugin ad gangen.

En chatwidget. Et anmeldelsesmodul. En pixel til annoncering. Et kort. Hver for sig er de små, og hver for sig blev de lagt på af en god grund. Tilsammen er de ofte den største enkeltpost, der ikke er billeder, og de er den slags, man ikke opdager, fordi ingen har lagt dem på samme dag.

Gennemgangen er enkel og bør laves en gang om året: hvilke tredjeparter loader der på sitet, hvem lagde dem der, og bruger vi dem stadig? Der plejer at være mindst en, ingen kan huske at have bedt om.

Det, der fylder mindre end folk tror

Caching-plugins får ofte æren, og de gør en forskel, men de løser et andet problem end det, de fleste har. De gør serverens arbejde hurtigere. Hvis din flaskehals er 2,5 MB billeder på vej ned til en telefon, kan serveren være nok så hurtig til at sende dem.

Det samme gælder den evige jagt på at fjerne JavaScript. Det er værd at rydde op i, især i plugins der loader på hver eneste side uden at blive brugt. Men på et site, der er bygget rimeligt, er det sjældent der, sekunderne ligger. Vi målte specifikt efter det på vores eget, netop fordi animationen på forsiden var den oplagte mistænkte. Den kostede stort set ingenting.

Man kan ikke gætte sig til, hvor tiden går. Man kan måle det, og det tager en halv time. Vil du vide, hvilke mål der faktisk bliver vurderet, har vi gennemgået dem i Hvad er Core Web Vitals?

Hvornår det er pengene værd

Hastighed er ikke gratis. Det koster arbejde at sætte op og lidt disciplin at holde ved lige, og der findes sider, hvor gevinsten er beskeden, fordi de i forvejen er lette.

Det er til gengæld pengene værd i tre situationer. Når hovedparten af trafikken kommer fra mobil, hvilket den gør for de fleste. Når folk kommer ind fra en annonce, hvor hvert klik er betalt, og et frafald under indlæsning er penge på gulvet. Og når siden er det første møde med virksomheden, for en side, der er langsom, læses som en virksomhed, der er langsom, uanset om det passer.

Bagefter

Det sidste, og det mest oversete: hastighed er ikke et projekt, det er en tilstand. Et site, der er hurtigt i dag, er langsomt om et år, hvis nogen har lagt tyve produktbilleder op i fuld størrelse i mellemtiden.

Derfor bygger vi det ind i fundamentet, når vi laver et site i WordPress, og derfor holder vi øje med det løbende for de webshops, vi passer gennem Shopify Support. Det er mindre imponerende end en stor optimeringsindsats, og det virker bedre.

Prøv i øvrigt det simpleste af alt: åbn dit eget site på din egen telefon, på mobildata, et sted med dårlig dækning. Det er den test, dine kunder laver hver dag.