Du tester din hjemmeside i PageSpeed Insights og får en række farvede tal tilbage.
Grønt er godt. Rødt er skidt.
Og midt imellem står der ting som:
LCP, CLS og INP.
Det lyder lidt som forkortelser fra en teknisk afdeling, der helst ikke vil forstyrres. Men de tre tal beskriver faktisk noget ret jordnært:
- Hvor hurtigt hjemmesidens vigtigste indhold bliver synligt
- Hvor hurtigt siden reagerer, når man bruger den
- Om indholdet hopper rundt, mens siden indlæses
Det er det, Google kalder Core Web Vitals.
De måler forskellige dele af den oplevelse, rigtige besøgende har på en hjemmeside: indlæsning, reaktionstid og visuel stabilitet.
Og selv om de tekniske navne kan virke lidt tunge, er betydningerne bag tallene som regel nemme nok at genkende.
Hvorfor betyder hjemmesidens hastighed noget?
Vi har alle prøvet at åbne en hjemmeside, der føles langsom.
Måske står man og venter på, at det store billede kommer frem. Måske klikker man på menuen, men der sker ikke noget. Eller måske flytter en knap sig, lige som man prøver at trykke på den.
Det er sjældent noget, man tænker ret længe over.
Man bliver bare irriteret.
Og hvis der findes et nemt alternativ, er det fristende at gå tilbage til Google og prøve næste resultat.
Derfor handler Core Web Vitals først og fremmest om brugeroplevelse. Google bruger også Core Web Vitals som en del af sine systemer til at vurdere sideoplevelsen, men en god score garanterer ikke gode placeringer. Relevant og brugbart indhold er stadig afgørende.
Så lad være med kun at optimere for Googles skyld.
Gør det for de mennesker, der rent faktisk skal bruge hjemmesiden.
LCP: Hvornår kan jeg se det vigtigste?
LCP står for Largest Contentful Paint.
På almindeligt dansk kan vi kalde det:
Hvor lang tid går der, før det største og vigtigste synlige element er indlæst?
På mange hjemmesider vil det være:
- et stort topbillede
- en overskrift
- et banner
- et produktbillede
- en stor tekstblok
Google anbefaler, at LCP sker inden for 2,5 sekunder for at blive vurderet som god. Over 4 sekunder bliver oplevelsen betragtet som dårlig, mens området imellem kræver forbedring.
Et typisk LCP-problem
Forestil dig en forside med et meget stort billede øverst.
Billedet er uploadet direkte fra kameraet og fylder måske flere megabyte. Først skal browserenBrowseren er den som man ser hjemmesiden igennem. Eksempler på browsere er Chrome, Edge, Firefox og Safari. Mere hente billedet, derefter skal det behandles, og til sidst kan det vises.
Imens ser den besøgende måske en næsten tom side.
Hjemmesiden er teknisk set ved at blive indlæst, men for brugeren føles det bare, som om der ikke sker noget.
Hvad kan forbedre LCP?
Du kan blandt andet se på:
- om billeder er større end nødvendigt
- om billeder bruger et moderne og komprimeret format
- om serveren er langsom til at svare
- om hjemmesiden indlæser mange skrifttyper, scripts og stylesheets
- om det vigtigste indhold bliver forsinket af mindre vigtige elementer
- om cachingCache/caching er når filer er gemt enten direkte på en brugers computer eller på serveren, så når en side hentes, så ind... Mere er sat korrekt op
Det store topbillede er ofte et godt sted at starte.
Et billede behøver sjældent være 5.000 pixels bredt, hvis det bliver vist i en almindelig browserbredde.
Men det er ikke altid selve billedet, der er problemet. En langsom serverWebserveren / Webhotellet er det sted, hvor filer og database til hjemmesiden ligger. Mere, et tungt temaEt tema er en gruppe filer, der styre det overordnede udseende på din hjemmeside. I dag bygges mange hjemmesider dog med... Mere eller mange pluginsPlugin er udvidelser. F.eks. er WooCommerce og mange bookingssystemer plugins, men det kan også være sikkerhedsudvidelse... Mere kan også forsinke det vigtigste indhold.
CLS: Hvorfor hopper siden rundt?
CLS står for Cumulative Layout Shift.
Det måler, hvor meget elementerne på siden uventet flytter sig, mens den bliver indlæst.
En CLS-score på 0,1 eller derunder regnes som god. Over 0,25 regnes som dårlig.
Det kan for eksempel være, når:
- et billede pludselig skubber teksten ned
- en annonce kommer frem og flytter indholdet
- en skrifttype ændrer tekstens størrelse
- en bjælke dukker op øverst på siden
- en knap flytter sig, lige før du klikker
CLS er altså forkortelsen for den oplevelse, hvor du vil trykke på én ting – og ender med at trykke på noget helt andet.
Det er ikke kun irriterende. I nogle situationer kan det også være et reelt problem.
Forestil dig, at knappen Bekræft køb flytter sig, og der pludselig ligger en anden knap under din finger.
Det er ikke en særlig tryg købsoplevelse.
Hvad kan forbedre CLS?
Start med at kontrollere:
- om billeder og videoer har faste højder og bredder
- om der reserveres plads til bannere, formularer og indlejret indhold
- om cookie- og kampagnebjælker skubber hele siden
- om skrifttyper får teksten til at ændre størrelse
- om indhold indsættes øverst på siden, efter den er begyndt at indlæse
BrowserenBrowseren er den som man ser hjemmesiden igennem. Eksempler på browsere er Chrome, Edge, Firefox og Safari. Mere skal helst vide på forhånd, hvor meget plads et billede eller andet element skal bruge.
Så kan den bygge siden korrekt fra starten i stedet for at flytte rundt på det hele undervejs.
INP: Hvor hurtigt reagerer siden?
INP står for Interaction to Next Paint.
Det måler, hvor hurtigt hjemmesiden reagerer visuelt, når den besøgende interagerer med den.
Det kan være, når man:
- klikker på en knap
- åbner en menu
- vælger et filter
- udfylder et felt
- lægger et produkt i kurven
- åbner en harmonika med mere tekst
En INP på 200 millisekunder eller derunder betragtes som god. Over 500 millisekunder betragtes som dårlig.
200 millisekunder er ikke ret lang tid.
Og det er netop pointen.
Når vi trykker på noget, forventer vi, at siden reagerer næsten med det samme.
Hvis der går for lang tid, kan brugeren nå at tro, at klikket ikke blev registreret. Så trykker man måske igen. Og igen.
Pludselig har man åbnet menuen tre gange eller lagt det samme produkt i kurven flere gange.
Hvad giver en dårlig INP?
Problemet skyldes ofte, at browserenBrowseren er den som man ser hjemmesiden igennem. Eksempler på browsere er Chrome, Edge, Firefox og Safari. Mere har for meget andet arbejde at udføre.
Det kan blandt andet være:
- store eller mange JavaScript-filer
- tunge pluginsPlugin er udvidelser. F.eks. er WooCommerce og mange bookingssystemer plugins, men det kan også være sikkerhedsudvidelse... Mere
- avancerede animationer
- scripts fra eksterne tjenester
- statistik-, chat- og marketingværktøjer
- funktioner, der forsøger at udføre for meget på én gang
Det betyder ikke, at alle scripts eller pluginsPlugin er udvidelser. F.eks. er WooCommerce og mange bookingssystemer plugins, men det kan også være sikkerhedsudvidelse... Mere skal fjernes.
Men hvert ekstra værktøj har en pris.
Et chatsystem, en popup, et statistikværktøj og en formular kan hver især være nyttige. Når de alle sammen indlæses på samme side, kan det begynde at kunne mærkes.
Feltdata og testdata er ikke det samme
Når du tester en side, kan du møde forskellige resultater.
Det ene resultat bygger på en test, der bliver kørt her og nu under bestemte tekniske forhold.
Det andet kan bygge på data fra rigtige Chrome-brugeres besøg på siden.
Derfor kan du godt opleve, at testen ser fin ud, mens de virkelige brugerdata stadig viser problemer – eller omvendt.
Rigtige besøgende bruger nemlig ikke nødvendigvis:
- den samme telefon som dig
- den samme internetforbindelse
- den samme browserBrowseren er den som man ser hjemmesiden igennem. Eksempler på browsere er Chrome, Edge, Firefox og Safari. Mere
- den samme placering
- den samme side på hjemmesiden
Core Web Vitals vurderes ud fra den 75. percentil. Det betyder lidt forenklet, at mindst tre ud af fire besøg skal ligge inden for den gode grænse, før en måling klassificeres som god. Målingerne opdeles også mellem mobil og computer.
Det er altså ikke nok, at hjemmesiden er hurtig på kontorets nye computer og hurtige internetforbindelse.
Den skal også fungere for den besøgende, der står med en ældre telefon og en mere ustabil forbindelse.
Hvor kan du teste din hjemmeside?
Et oplagt sted at begynde er Googles PageSpeed Insights.
Her skriver du adressen på en side og får en analyse af dens hastighed og Core Web Vitals.
Du kan også bruge rapporten om Core Web Vitals i Google Search Console. Her kan du se, om Google har registreret grupper af sider med problemer. Google anbefaler selv Search Console som et af værktøjerne til at overvåge målingerne.
Husk at teste mere end forsiden.
Forsiden kan være hurtig, mens produktsiderne er langsomme. Blogindlæg kan have store billeder. Webshoppen kan bruge langt flere scripts end resten af hjemmesiden.
Test derfor nogle af de sider, der er vigtigst for brugerne:
- forsiden
- en ydelsesside
- et blogindlæg
- en produktside
- kurven og betalingssiden
- en vigtig landingsside
Hvad kan du selv gøre på en WordPress-hjemmeside?
Du behøver ikke være udvikler for at begynde at rydde op.
Komprimér dine billeder
Store billeder er en af de mest almindelige årsager til langsomme hjemmesider.
Skalér billederne ned til den størrelse, de faktisk skal vises i, og komprimér dem, inden eller når de uploades.
Brug gerne moderne billedformater, når din løsning understøtter dem.
Ryd op i plugins
Et pluginPlugin er udvidelser. F.eks. er WooCommerce og mange bookingssystemer plugins, men det kan også være sikkerhedsudvidelse... Mere er ikke nødvendigvis et problem.
Men pluginsPlugin er udvidelser. F.eks. er WooCommerce og mange bookingssystemer plugins, men det kan også være sikkerhedsudvidelse... Mere kan tilføje scripts, stylesheets, databasekald og funktioner til hjemmesiden. Nogle gør det kun på de sider, hvor de bruges. Andre indlæser ting overalt.
Gennemgå derfor pluginlisten en gang imellem.
Er der pluginsPlugin er udvidelser. F.eks. er WooCommerce og mange bookingssystemer plugins, men det kan også være sikkerhedsudvidelse... Mere, som:
- ikke længere bliver brugt?
- løser den samme opgave?
- kun blev installeret til en gammel kampagne?
- ikke længere bliver opdateret?
- kunne erstattes af en enklere løsning?
Slet ikke bare noget tilfældigt på en aktiv hjemmeside. Tag backupOrd for sikkerhedskopi. Et webhotel gemmer ofte backup 10-30 dage retur, men vi anbefaler at man også tager backup til e... Mere først, og test ændringerne ordentligt.
Vælg funktioner med omtanke
En hjemmeside kan godt have animationer, video, chat, statistik, popups og flotte effekter.
Men den behøver måske ikke have det hele på én gang.
Spørg, om funktionen faktisk hjælper den besøgende.
En animation, som får indholdet til at vente, er sjældent en forbedring. Og et værktøj, der næsten aldrig bliver brugt, behøver måske ikke blive indlæst på alle sider.
Undersøg dit webhotel
Du kan optimere billeder og rydde op i pluginsPlugin er udvidelser. F.eks. er WooCommerce og mange bookingssystemer plugins, men det kan også være sikkerhedsudvidelse... Mere længe.
Men hvis serveren er langsom, vil hjemmesiden stadig kunne føles tung.
Et billigt webhotelWebserveren / Webhotellet er det sted, hvor filer og database til hjemmesiden ligger. Mere er ikke nødvendigvis dårligt, og et dyrt webhotelWebserveren / Webhotellet er det sted, hvor filer og database til hjemmesiden ligger. Mere er ikke automatisk hurtigt. Men serverens svartid, opsætning, cachingCache/caching er når filer er gemt enten direkte på en brugers computer eller på serveren, så når en side hentes, så ind... Mere og tilgængelige ressourcer har betydning.
Brug caching – men med respekt
CachingCache/caching er når filer er gemt enten direkte på en brugers computer eller på serveren, så når en side hentes, så ind... Mere betyder kort fortalt, at færdige eller delvist færdige versioner af hjemmesidens indhold gemmes, så det ikke skal bygges helt fra bunden ved hvert besøg.
Det kan gøre en stor forskel.
Men flere cache- og optimeringsplugins oven i hinanden er ikke altid bedre. De kan komme i konflikt eller gøre det svært at finde årsagen, når noget ser forkert ud.
Vælg én gennemtænkt løsning, og test hjemmesiden bagefter.
Skal alle tal være grønne?
Det er rart med grønne tal.
Men målet bør ikke nødvendigvis være at opnå 100 point i enhver test for enhver pris.
Google understreger selv, at gode resultater i Core Web Vitals eller andre værktøjer ikke garanterer en topplacering, og at det ikke altid er den bedste brug af tiden at jagte en perfekt score udelukkende for SEOSEO (Search engine optimization) er en betegnelse for søgemaskine optimering. En god SEO giver gode resultater i eksempe... Mere.
Der kan være funktioner, som er vigtige for forretningen, selv om de koster lidt på hastigheden.
En webshop skal stadig kunne håndtere betaling. En hjemmeside skal stadig kunne måle relevante henvendelser. Og et vigtigt bookingsystem kan godt være værd at vente en anelse på.
Det handler om balance.
Vi ville hellere have en hjemmeside, der scorer 90 og fungerer godt for både kunden og forretningen, end en hjemmeside, der scorer 100, fordi alt det nyttige er blevet fjernet.
Begynd med det, brugerne mærker
Core Web Vitals kan hurtigt blive meget teknisk.
Men du behøver ikke starte med at forstå alle detaljer i en rapport.
Begynd i stedet med tre spørgsmål:
- Kommer det vigtigste indhold hurtigt frem?
- Reagerer siden, når jeg klikker?
- Bliver indholdet liggende, hvor det blev placeret?
Hvis svaret er nej, har du allerede fundet et sted at begynde.
Se derefter på LCP, INP og CLS for at finde ud af, hvilken del af oplevelsen der især giver problemer.
Tallene er ikke selve målet.
De er små advarselslamper, der kan hjælpe dig med at opdage, hvor hjemmesiden føles langsom, tung eller ustabil for de mennesker, der besøger den.
Og det er trods alt dem, hjemmesiden er lavet til.