Et websites ydeevne handler om mere end, hvor hurtigt en side indlæses. Selv hvis dit indhold vises inden for få sekunder, kan langsomme reaktioner på knapper eller uventede layoutskift frustrere besøgende og påvirke deres oplevelse. Så hvordan finder du ud af, om dit website fungerer godt? Core Web Vitals er Googles centrale præstationsmålinger, der måler indlæsningshastighed, interaktivitet og visuel stabilitet. I denne guide lærer du om de tre Core Web Vitals-målinger, deres anbefalede grænseværdier og de værktøjer, du kan bruge til at måle og forbedre dit websites ydeevne.
Hvad er Core Web Vitals?
Core Web Vitals er et sæt præstationsmålinger, som Google har indført for at måle vigtige aspekter af brugeroplevelsen på et website. Målingerne fokuserer på tre hovedfaktorer: indlæsningsydeevne, interaktivitet og visuel stabilitet. Med andre ord hjælper de websiteejere med at forstå, hvor hurtigt en side indlæses, hvor gnidningsfrit brugerne kan interagere med den, og om indholdet forbliver stabilt under indlæsningen.
Et websites ydeevne handler ikke kun om, hvor hurtigt en side åbner. Et website kan indlæse sit indhold på kort tid, men hvis brugerne skal vente, før de kan klikke på en knap, eller hvis sidens layout ændrer sig uventet, kan den samlede oplevelse stadig være dårlig. Core Web Vitals hjælper med at identificere disse problemer og giver målbare mål for at forbedre websitets ydeevne.
Google bruger i øjeblikket tre Core Web Vitals-målinger: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) og Cumulative Layout Shift (CLS). Hver måling måler en forskellig del af brugeroplevelsen, så en forbedring af én af dem betyder ikke nødvendigvis, at de to andre også bliver bedre.
Hvorfor er Core Web Vitals vigtige?
Et website bør give sine besøgende en gnidningsfri og pålidelig oplevelse. Når en side er for længe om at indlæse, kan brugerne forlade den, før de får adgang til de oplysninger, de har brug for. På samme måde kan besøgende blive frustrerede og have svært ved at gennemføre deres opgaver, hvis knapper reagerer langsomt, eller hvis elementer på siden flytter sig uventet.
Core Web Vitals hjælper websiteejere med at identificere disse problemer ved hjælp af målbare præstationsdata i stedet for udelukkende at basere sig på personlige indtryk. En udvikler kan for eksempel teste et website på en kraftig computer og konstatere, at det indlæses hurtigt. Besøgende, der bruger ældre mobilenheder eller langsommere internetforbindelser, kan dog opleve betydeligt længere indlæsningstider.
Disse forskelle gør det vigtigt at overvåge ydeevnen. Ved at analysere Core Web Vitals-data kan udviklere identificere, hvilke dele af et website der skal forbedres, og afgøre, om deres optimeringsindsats giver de forventede resultater.
Core Web Vitals er også relevante for søgemaskineoptimering (SEO). Google bruger signaler om sideoplevelse i sine rangeringssystemer, men gode Core Web Vitals-resultater garanterer ikke højere placeringer. Relevant indhold og mange andre faktorer er fortsat vigtige. Derfor bør forbedring af disse målinger ses som en del af en bredere strategi for at opbygge et nyttigt, tilgængeligt og pålideligt website.
Hvad er de tre Core Web Vitals-målinger?
Hver Core Web Vitals-måling fokuserer på et bestemt aspekt af et websites ydeevne. Når du forstår, hvordan de fungerer, bliver det nemmere at identificere præstationsproblemer og vælge de rette optimeringsteknikker.
Hvad er Largest Contentful Paint (LCP)?
Largest Contentful Paint (LCP) måler, hvor lang tid det tager, før det største billede eller den største tekstblok i det oprindelige synlige område vises. Målingen hjælper med at vurdere, hvornår sidens hovedindhold bliver synligt for brugeren.
Forestil dig for eksempel, at en besøgende åbner en blogartikel. Sidens baggrund og navigationsmenu vises måske næsten med det samme, men hovedoverskriften eller det fremhævede billede kan tage flere sekunder om at indlæse. I den situation kan den besøgende have indtryk af, at siden stadig indlæses, selvom nogle af dens elementer allerede er synlige. En god LCP-værdi bør være 2,5 sekunder eller mindre. Ligger værdien mellem 2,5 og 4 sekunder, skal siden forbedres. En LCP-værdi på over 4 sekunder betragtes som dårlig.
Flere faktorer kan påvirke LCP, herunder langsomme serversvartider, store billeder, renderblokerende CSS og JavaScript samt forsinkelser i at finde hovedindholdet.
For at forbedre LCP kan websiteejere tage følgende skridt:
- Optimer billeder: Reducer billedernes filstørrelse, og brug moderne formater som WebP eller AVIF, når det er hensigtsmæssigt.
- Forbedr serversvartiderne: Brug effektive hostingressourcer, caching og et content delivery network (CDN), når det passer til websitet.
- Prioritér hovedindholdet: Sørg for, at browseren kan finde vigtige billeder direkte i HTML-koden, og prioritér deres indlæsning, når det er nødvendigt.
- Reducer renderblokerende ressourcer: Optimer CSS- og JavaScript-filer, der forhindrer browseren i at vise hovedindholdet.
- Undgå lazy loading af LCP-billedet: Hvis et billede sandsynligvis er LCP-elementet, kan en forsinket indlæsning få siden til at virke langsommere.
Disse teknikker kan reducere den tid, brugerne venter på, at hovedindholdet vises. Den mest effektive løsning afhænger dog af årsagen til forsinkelsen, så det er vigtigt at måle siden, før du foretager ændringer.
Hvad er Interaction to Next Paint (INP)?
Interaction to Next Paint (INP) måler, hvor responsivt et website føles, når brugerne interagerer med det. Målingen vurderer forsinkelsen mellem en brugerinteraktion, som f.eks. et klik på en knap eller et tastetryk, og den næste visuelle opdatering, som browseren viser.
Tag for eksempel en webshop, hvor en besøgende klikker på knappen Læg i kurv. Hvis browseren er mærkbart længe om at opdatere kurven, tror den besøgende måske, at knappen ikke virkede, og klikker igen. Det kan skabe forvirring og endda føre til dobbelte handlinger.
INP hjælper med at identificere denne type problemer ved at måle sidens responsivitet gennem hele brugerens besøg. I modsætning til First Input Delay (FID), som kun målte forsinkelsen, før browseren begyndte at behandle den første interaktion, tager INP højde for den samlede interaktionsoplevelse i hele sidens levetid. En god INP-værdi er 200 millisekunder eller mindre. Værdier over 200 og op til 500 millisekunder skal forbedres, mens værdier over 500 millisekunder betragtes som dårlige.
JavaScript er en almindelig årsag til dårlig INP, fordi browseren kan være nødt til at udføre scripts, før den kan reagere på brugerens input og vise en opdatering. Langvarige opgaver kan forhindre browseren i at behandle interaktioner hurtigt.
For at forbedre INP kan udviklere bruge flere teknikker:
- Reducer unødvendig JavaScript: Fjern ubrugt kode, og undgå at indlæse scripts, der ikke er nødvendige for den aktuelle side.
- Opdel lange opgaver: Del store JavaScript-opgaver op i mindre opgaver, så browseren får flere muligheder for at behandle brugerinteraktioner.
- Optimer event handlers: Hold funktioner, der er knyttet til interaktioner, så enkle og effektive som muligt.
- Undgå unødvendige DOM-opdateringer: Hvis for mange elementer opdateres på én gang, kan det øge renderingstiden og forsinke den næste visuelle opdatering.
- Reducer tredjepartsscripts: Analyseværktøjer, annoncescripts og indlejrede tjenester kan bruge behandlingsressourcer og påvirke responsiviteten.
At forbedre INP kræver mere end blot at reducere den samlede størrelse af JavaScript-filerne. Udviklere skal også forstå, hvornår scripts udføres, og hvor meget arbejde browseren skal udføre efter en interaktion.
Hvad er Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) måler en websides visuelle stabilitet. Målingen fokuserer på uventede ændringer i placeringen af synlige elementer, mens siden vises.
Forestil dig for eksempel, at en besøgende læser en artikel og pludselig ser teksten rykke nedad, fordi en annonce er dukket op over den. Hvis den besøgende var ved at klikke på et link, kan den uventede bevægelse få vedkommende til at klikke på et andet element. Sådanne layoutændringer kan gøre et website svært at bruge, især på mobilenheder, hvor det synlige område er begrænset. En god CLS-værdi er 0,1 eller mindre. Værdier over 0,1 og op til 0,25 skal forbedres, mens værdier over 0,25 betragtes som dårlige.
Flere almindelige problemer kan forårsage uventede layoutskift. Billeder uden angivne dimensioner, dynamisk indsatte annoncer, indhold der indlæses sent, og webskrifttyper, der ændrer tekstens udseende, kan alle påvirke den visuelle stabilitet.
Følgende teknikker kan hjælpe med at forbedre CLS:
- Angiv billeddimensioner: Angiv billedernes bredde og højde, eller brug CSS-billedformater (aspect ratio) til at reservere den nødvendige plads, før et billede indlæses.
- Reserver plads til annoncer: Afsæt tilstrækkelig plads til annoncecontainere, så det omgivende indhold ikke flytter sig, når annoncerne vises.
- Undgå at indsætte indhold over eksisterende indhold: Hvis nye elementer skal vises, så placer dem et sted, hvor de ikke uventet flytter det indhold, brugerne allerede ser på.
- Optimer indlæsningen af skrifttyper: Brug passende strategier for indlæsning af skrifttyper og reserveskrifttyper for at reducere uventede ændringer i tekstens layout.
- Brug egnede CSS-animationer: Foretræk så vidt muligt animationer baseret på egenskaber som transform og opacity frem for egenskaber, der forårsager layoutændringer.
Det er vigtigt at forstå, at ikke alle layoutskift er skadelige. En ændring, der sker som direkte reaktion på en brugerinteraktion, kan være forventet. CLS fokuserer på uventet visuel ustabilitet og bruger en beregningsmetode baseret på layoutskiftenes påvirkning og afstand.
Hvad er de anbefalede grænseværdier for Core Web Vitals?
Google har fastsat specifikke grænseværdier, der hjælper websiteejere med at afgøre, om deres sider giver en god brugeroplevelse. Grænseværdierne inddeler ydeevnen i tre kategorier: god, skal forbedres og dårlig.
Disse grænseværdier hjælper udviklere med at vurdere hver måling for sig. En enkelt test er dog ikke nok til at afgøre, om et website konsekvent giver en god oplevelse.
Google anbefaler at vurdere Core Web Vitals ved 75. percentil af sidebesøgene, hvor resultaterne for mobil og desktop vurderes hver for sig. Det betyder, at mindst 75 % af de målte besøg skal leve op til grænseværdien for god for hver måling.
Antag for eksempel, at et website har en LCP-værdi på 2 sekunder ved 75. percentil. Det betyder, at 75 % af de målte sidebesøg har en LCP på 2 sekunder eller mindre, hvilket opfylder den anbefalede grænseværdi.
Et website bør sigte mod at opfylde grænseværdierne for god for alle tre målinger i stedet for kun at fokusere på sit stærkeste resultat.
Hvilke værktøjer kan måle Core Web Vitals?
Core Web Vitals kan måles med flere værktøjer fra Google. Disse værktøjer hjælper udviklere med at forstå, hvordan et website præsterer, og med at identificere områder, der skal forbedres.
PageSpeed Insights
PageSpeed Insights er et af de mest nyttige værktøjer til at tjekke Core Web Vitals. Det leverer både data fra rigtige brugere, når de er tilgængelige, og laboratoriedata indsamlet gennem en simuleret test. Det giver også forslag til, hvordan sidens ydeevne kan forbedres.
Google Search Console
Google Search Console indeholder en Core Web Vitals-rapport, der viser, hvilke grupper af sider der giver en god brugeroplevelse, og hvilke der skal forbedres. Rapporten bruger data fra den virkelige verden til at hjælpe websiteejere med at identificere præstationsproblemer på tværs af flere sider.
Chrome DevTools og Lighthouse
Chrome DevTools og Lighthouse hjælper udviklere med at teste sidens ydeevne i et kontrolleret miljø. De kan identificere problemer med JavaScript-udførelse, billedindlæsning, layoutskift og andre faktorer, der påvirker Core Web Vitals.
Hvad er forskellen på feltdata og laboratoriedata?
Core Web Vitals kan vurderes ud fra to typer data: feltdata og laboratoriedata. Når du forstår forskellen, bliver det lettere at fortolke testresultater og vælge den rette tilgang til at forbedre websitets ydeevne.
Feltdata
Feltdata indsamles fra rigtige brugere, mens de browser på et website. De afspejler de faktiske browserforhold, herunder forskellige enheder, netværksforbindelser og brugerinteraktioner.
Disse data er særligt nyttige til at forstå, om et website opfylder Googles anbefalede grænseværdier for Core Web Vitals under virkelige forhold.
Laboratoriedata
Laboratoriedata indsamles i et kontrolleret testmiljø med værktøjer som Lighthouse. De hjælper udviklere med at genskabe præstationsproblemer og undersøge deres mulige årsager.
I modsætning til feltdata repræsenterer laboratoriedata ikke alle brugeroplevelser i den virkelige verden. Derfor kan et website få forskellige resultater i laboratorietests og i målinger fra rigtige brugere.
Sådan forbedrer du Core Web Vitals
For at forbedre Core Web Vitals skal du identificere de problemer, der påvirker indlæsningshastighed, interaktivitet og visuel stabilitet. Den rette løsning afhænger af, hvilken måling der klarer sig dårligt.
Forbedr Largest Contentful Paint (LCP)
For at forbedre LCP bør udviklere fokusere på at indlæse det største synlige indholdselement så hurtigt som muligt. Typiske forbedringer omfatter optimering af billeder, valg af en pålidelig webhostingtjeneste, kortere serversvartider, aktivering af caching og at undgå unødvendige forsinkelser i indlæsningen af vigtige ressourcer.
Forbedr Interaction to Next Paint (INP)
INP kan forbedres ved at reducere langvarige JavaScript-opgaver og minimere unødvendigt arbejde på hovedtråden. Udviklere bør også optimere event handlers og undgå, at browseren skal udføre for meget arbejde, efter at en bruger klikker, trykker eller skriver.
Forbedr Cumulative Layout Shift (CLS)
For at reducere CLS bør udviklere reservere plads til billeder, videoer, annoncer og andre elementer, før de indlæses. Undgå at indsætte nyt indhold uventet over eksisterende indhold, og brug så vidt muligt ensartede dimensioner for visuelle elementer.
Afslutning
Core Web Vitals hjælper udviklere med at forstå, hvordan brugerne oplever et website med hensyn til indlæsningsydeevne, interaktivitet og visuel stabilitet. Ved at måle LCP, INP og CLS kan websiteejere identificere præstationsproblemer og prioritere forbedringer, der gør deres sider nemmere at bruge.
Regelmæssig overvågning, data fra rigtige brugere og målrettet optimering kan hjælpe websites med at opretholde gode Core Web Vitals-resultater over tid
Ofte stillede spørgsmål
1. Hvad er forskellen på feltdata og laboratoriedata?
Feltdata kommer fra rigtige brugere, der besøger et website, mens laboratoriedata indsamles i et kontrolleret testmiljø. Feltdata afspejler faktiske brugeroplevelser, hvorimod laboratoriedata hjælper udviklere med at genskabe og diagnosticere præstationsproblemer.
2. Hvordan kan jeg forbedre mine Core Web Vitals-resultater?
Du kan forbedre Core Web Vitals ved at optimere billeder, reducere unødvendig JavaScript, forbedre serversvartiderne, aktivere caching og forhindre uventede layoutskift.
