Core Web Vitals

Core Web Vitals består af en række specifikke faktorer, som Google anser for vigtige i en websides samlede brugeroplevelse. Her er hvad de betyder for dit website og hvordan du forbedrer dem.

Core Web Vitals

Hvad er Core Web Vitals?

Core Web Vitals er et begreb introduceret af Google, der har til formål, at give en samlet vejledning af kvalitetssignaler, der er vigtige for, at et website kan levere en god brugeroplevelse.

Core Web Vitals består af 3 specifikke målinger af hastighed og brugerinteraktion:

  • Largest contentful paint (LCP)
  • First Input Delay (FID)
  • Comulative Layout Shift (CLS)

Interaction to Next Paint (INP) vil erstatte First Input Delay i marts måned 2024.

Der er tale om såkaldte delmængder af faktorer, som Google bruger til, at vurdere en sides samlede brugeroplevelse (UX) på.

Core Web Vitals

Data om dine Core Web Vitals er også tilgængelig i din Google Search Console-konto under vigtige netstatistikker:

Core Web Vitals i Google Search Console

Denne Core Web Vitals rapport kan hjælpe dig med, at fikse problemer med brugeroplevelsen på dit website.

Lad os tage et nærmere kig på vigtigheden af disse parametre og hvad Google kan fortælle os om opdateringen.

Hvorfor er Core Web Vitals vigtig?

I 2021 lancerede Google deres Page Experience update – i dag også kendt som Core Web Vitals og en official ranking faktor. Denne opdatering vil derfor påvirke din rangering på flere områder:

Core Web Vitals et Google ranking signal

Mere konkret, så har Google bekræftet, at Core Web Vitals bliver en ranking faktor i løbet af juni måned. Det er derfor afgørende, at du får dine sider optimeret til disse faktorer, såfremt du ikke har været på forkant med denne opdatering.

Google har fornyligt også afsløret, at opdateringen både vil påvirke søgeresultaterne på mobil og desktop. Ved udrulningen i midten af juni påvirkes kun mobile søgeresultater men desktop vil hurtigt følge trop ifølge Google. Denne udrulning forventes at være færdig i løbet af august måned.

Opdatering: Google har den 4. november bekræftet, at Core Web Vitals vil rulle ud som en ranking faktor på desktop i løbet af februar 2022. Udrulningen forventes at være færdig ved udgangen af marts måned og det vil være de samme 3 ranking faktorer, der gør sig gældende for både desktop og mobile søgeresultater:

Page Experience update samme faktorer på desktop og mobil

Dette er dermed en udvidelse til de eksisterende signaler, som Google betragter som vigtige indenfor UX. Andre Web Vitals inkluderer:

  • Mobilvenlighed
  • Sikker browsing (undgå malware)
  • Påtrængende pop ups (intrusive interstitials)
  • HTTPS

Og her vil Core Web Vitals altså blive langt vigtigere i fremtiden. Ja meget muligt den vigtigste måling af din siders brugeroplevelse i løbet af 2024.

En god brugeroplevelse er dog ikke ensbetydende med en høje placeringer i søgeresultaterne. Du er også nød til, at levere godt indhold og relevant indhold samt optimere dine sider til søgemaskinernes øvrige faktorer.

Lad os kigge nærmere på de 3 Core Web Vitals, som det hele handler om og hvordan du forbedrer dine sider til dem.

Largest Contentful Paint (LCP)

LCP er et begreb for, hvor lang tid det tager en side, at indlæse fra en brugers synspunkt. Med andre ord tiden fra at klikke på et link, til at størstedelen af indholdet bliver synligt på skærmen.

Denne måling adskiller sig fra andre hastighedsmålinger. Et godt eksempel er målingen TTFB, der betyder Time to First Byte. Denne måling kigger kun på, hvor lang tid det tager at hente den første byte fra serveren. Ikke hvor hurtigt brugeren reelt ser indholdet på sin skærm.

Largest Contentful Paint er med andre ord en indikation af, hvor hurtigt brugeren kan opleve størestedelen af indholdet og begynde at interagere med det og funktioner.

Du kan se din sides LCP score igennem Google PageSpeed Insights.

Largest Contentful Paint

Med værktøjet kan du også se, hvordan din side har ydet over tid, baseret på data fra Googles Chrome browser. Dette er faktisk den samme data, som også bliver brugt i Search Console under vigtige netstatistikker.

LCP data i Google Search Console

Her får du præsenteret en tabel med sider der vurderes fra god til dårlig, så du kan se hvilke sider der er acceptable ud fra Googles guidelines.

Googles Largest Contentful Paint (LCP) guidelines

Forskellen er blot, at her kan du se LCP-data på tværs af hele dit website, fremfor kun en enkelt side i PageSpeed Insights.

Ideelt set bør alle dine sider ramme en LCP på omkring 2,5 sekund. Dette kan dog være en stor udfordring, hvis du har tunge funktioner eller ligesom os, bruger mange visuelle aktiver. Dette også på trods af komprimering.

Derfor er du ofte nød til, at gøre brug af flere teknologier for at forbedre din LCP-score. Andre gange er du måske nødt til at skære ned på antallet af billede eller optimere din HTML. Arbejdet vil dog uden tvivl belønne sig i fremtiden.

Her er flere tips til at forbedre din LCP-score:

1. Opgrader din hosting

En af de primære grunde til en dårlig LCP-score er en sløv responstid fra din server. Du kan måle din servers responstid ved at se på “Time to First Byte (TTFB)”. En god TTFP bør være under 200 ms og du kan hurtigt måle dette igennem WebPageTest. Ved at vælge en hurtigere webserver og samtidig aktivere caching på siden, vil du opnå de bedste resultater på dette område.

Ydelseseffekt: Høj

2. Brug et CDN

Et Content Delivery Network (CDN) hjælper dig med at reducere tiden imellem brugeranmodninger og serverens svar. Denne tid er latenstiden. Frem og tilbage mellem browseranmodningen og serverresponsen er rundturstiden (RTT). Et CDN løser denne udfordring takket være et globalt netværk af servere. Hver gang en bruger anmoder om en side, modtager de ressourcerne fra den nærmeste server. Der findes mange forskellige CDN-udbydere på markedet, så som Cloudflare, KeyCDN, Google Cloud CDN, Amazon CloudFront m.fl.

Ydelseseffekt: Medium

3. Udskyd JavaScript

Render-blokerende ressourcer som JavaScript-filer er en af hovedårsagerne til en dårlig LCP-score. Hver gang du tilføjer et 3. part script, så sløver det din websides responstid. Overvej derfor om et script kan udskydes (defer) eller helt undlades fordi ikke bruges.

Ydelseseffekt: Høj

4. Fjern unødige elementer

Har du meget tunge elementer så som billeder der sløver din side, så overvej at fjerne det eller erstatte det med et lettere element. Under Largest Contentful Paint element i Google PageSpeed Insights kan du se, om du har et element der reducerer din websides LCP.

Ydelseseffekt: Medium

5. Udskyd ikke-kritisk CSS og inline kritisk CSS

Ligesom med JavaScript-filer, så skal du også udskyde ikke-kritisk CSS – alle de filer, der ikke er relevante for gengivelse af siden. De indlæses så når browseren har gengivet det mest relevante indhold på siden. Samtidig med at du udsætter CSS-filerne, bør du også inline kritisk CSS – ressourcerne over skillelinjen, der skal indlæses så hurtigt som muligt. Det betyder, at du skal identificere den kritiske CSS (eller Critical Path CSS) og inline dem i din HTML-kode. Start med at udtrække og inline din Critical Path CSS ved hjælp af et generatorværktøj så som dette. Indlæs derefter resten af klasserne asynkront. Du kan læse mere om procesen på Web.dev.

Ydelseseffekt: Medium

6. komprimer CSS og JS filer

En anden effektiv måde til at optimere største indholdsfulde maling på er at komprimere (minify) CSS- og JavaScript-filer. Komprimering handler om at optimere din kode, ved at gøre den mere kompakt. Det betyder f.eks. at fjerne linjeskift, mellemrum og kommentarer fra koden. Når størrelsen på dine CSS- og JavaScript-filer reduceres, så kan du få dem til at indlæse hurtigere.

Ydelseseffekt: Lav

7. Brug preload til kritiske aktiver

Det er vigtigt at aktiver over browserens skærelinje yder optimalt. Disse aktiver kan involvere skrifttyper, billeder, videoer, CSS og JavaScript-filer. For at få disse aktiver til at indlæse hurtigere, kan du bede browseren om at forudindlæse dem med rel=”preload”. I dette tilfælde kan du gøre det på dit Largest Contentful Paint-billede, for at forbedre din LCP-score.

Ydelseseffekt: Lav

8. Optimer dine billeder

Optimering af billeder er en anden måde til at rette op på en dårlig LCP-score. Nogle af måderne du kan benytte er komprimering og undgå meget store billedeformater. Har du en slider i toppen af din side, så overvej at skifte den ud med et statisk billede. Du kan også benytte responsive billeder og konvertere dine billeder til JPEG 2000, JPEG XR eller WebP-formatet som anbefales af Google.

Ydelseseffekt: Høj

9. Komprimer tekstfiler

Ved at komprimere dine tekstfiler så som HTML, CSS og JavaScript-filer, vil du også forbedre din LCP-score. Komprimering betyder at pakke dine filer i et mindre og lettere format, så de er hurtige at indlæse. Dermed bliver overførslen imellem browser og server hurtigere. Her kan du bruge teknologier så som GZIP eller Brotli. Brotli yder generelt bedre og anbefales derfor.

Ydelseseffekt: Høj

Lad os gå videre til næste Core Web Vital.

First Input Delay (FID)

First Input Delay (FID) måler det tidspunkt, hvor en bruger første gang interagerer med dit website, til det tidspunkt, hvor browseren reagerer på denne interaktion. En interaktion kan f.eks. være når brugeren:

  • Klikker på en knap
  • Klikker på et link i menuen
  • Indtaster sin emailadresse i et formularfelt
  • Ændrer filtreringen af produkter
  • Klikke på en fold-ud boks der viser mere indhold

Google vurderer at FID er vigtig, fordi det tager højde for, hvordan virkelige brugere interagerer med websteder. Ligesom med LCP, så vurderes FID ud fra kriterier for, hvad der bidrager til en acceptabel score.

Googles First Input Delay (FID) guidelines

På trods af at måleenheden er hastighed, så skal FID ikke forveksles med en traditionel hastighedsmåling. FID måler som sagt hvor lang tid der tager en bruger, at udføre den første handling på siden.

Hvis du måler FID på et blogindlæg der består af udelukkende tekst, så kan det være begrænset, hvor meget interaktion brugeren kan have med siden, bortset fra at scrolle ned på siden.

Her vil FID have mindre betydning, modsat f.eks. en login- eller tilmeldingsside, hvor din FID-score er meget mere påvirkelig.

Tilmeldingsformular

På en side med en tilmeldingsformular er det vigtigt, at brugeren hurtigt kan komme til at indtaste sin emailadresse. FID kan med andre ord variere meget, afhængig af, hvilken type side der er tale om.

Her er flere tips til, hvordan du kan forbedre din FID-score.

1. Udskyd JavaScript

Med hensyn til JavaScript-udførelsen, så skal du udskyde (defer) JavaScript-filer hvor muligt. Dermed bliver disse aktiver først indlæst, når browseren har gengivet de mest relevante indhold. Med andre ord det indhold, der er nødvendigt for at brugeren kan interagere med siden. Resultatet vil blive en bedre indlæsningstid samt FID-score.

Ydelseseffekt: Høj

2. Udskyd billeder, der ikke er på skærmen

Når browseren skal downloade og gengive ikke-kritiske ressourcer så som billeder under folden, så tager siden længere tid om at indlæse og brugerne kan ikke interagere med siden så hurtigt som forventet.

Du kan f.eks. udskyde billeder, der ikke er på skærmen ved hjælp af lazyloading. Med lazyload vil billeder først blive indlæst når brugeren scroller ned på siden. Billeder over folden bør ekskluderes fra lazyloading, da det ellers kan påvirke din Largest Contentful Point-score negativt. Udover at dette forbedrer din First Input Delay-score, så bidrager det også til indlæsningstiden.

Ydelseseffekt: Høj

3. Fjern ubrugt JavaScript

Du kan også takle udfordringen med JavaScript, ved at fjerne de ubrugte JavaScript-filer, der sløver downloadtiden og forringer interaktiviteten. Ubrugte JavaScript-filer er ikke essentielle for at at gengive websiden og er derfor redundante. I Google PageSpeed Insights kan du finde en liste med ubrugte JavaScript-filer som du bør håndtere på din webside.

Ydelseseffekt: Medium

4. Forsink udførelse af JavaScript indtil brugerinteraktion

Du kan også optimere JavaScript-aktiver og prioritere nødvendige scripts til interaktion, ved at forsinke JavaScript-filerne og deres udførelse indtil brugerinteraktion. Dermed vil JavaScript-filer ikke blive indlæst før brugerinteraktion, så som at klikke på en knap eller scrolle ned på siden. Dette vil addressere PSI-anbefalingen “Reducer udførelsestid for JavaScript”.

Ydelseseffekt: Meget høj

5. Komprimer JavaScript

En anden måde til at håndtere JavaScript eksekvering på er igennem komprimering (minify) af JavaScript-filer. Her fjerner du alle kommentarer, linjeskift og mellemrum i koden. Formålet er hermed, at reducere filstørrelserne og få dem til at indlæse hurtigere.

Ydelseseffekt: Lav

6. Async eller udsæt CSS

En af PSI-anbefalingerne er “Minimer hovedtrådarbejde”. For at løse dette problem og forbedre FID-tiden skal du udskyde eller synkronisere CSS-filerne. Ved at implementere disse handlinger, vil du addressere PageSpeed Insights anbefalingen “Fjern gengivelsesblokerede ressourcer”. Du vil også addressere anbefalingen “Undgå sammenkædning af kritiske anmodninger”.

Ydelseseffekt: Lav

7. Komprimer tekstfiler

Endnu en PSI-anbefaling som påvirker din FID-tid er “Aktiver tekstkomprimering”. De mest almindelige komprimeringsformater er Gzip og Brotli. Brotli er det mest anbefalede format lige nu.

Ydelseseffekt: Høj

8. Opdel lange opgaver

Når hovedtråden er optaget og blokeret, så påvirkes FID-karakteren negativt, og siden kan ikke svare på brugerinput eller interaktion. For at løse dette problem kan du opdele langvarige scripts i mindre stykker, der kan køres på mindre end 50 ms.

Ydelseseffekt: Høj

Interaction to Next Paint (INP)

Interaction to Next Paint (INP) er en web performance-metrik, der måler brugergrænsefladens responsivitet. Det er en indikator for, hvor hurtigt en hjemmeside reagerer på brugerinteraktioner som klik eller tastetryk.

Specifikt måler den, hvor meget tid der går mellem en brugerinteraktion som et klik eller tastetryk og den næste gang, brugeren ser en visuel opdatering på siden. Dette er vigtigt, fordi en hurtig respons på brugerinteraktioner kan forbedre brugeroplevelsen og dermed hjemmesidens SEO-rangering.

INP bliver en af ​​Googles Core Web Vitals-metrics i marts 2024. På det tidspunkt vil den erstatte First Input Delay.

At blive en Core Web Vitals-metrik betyder, at dårlig interaktion med Next Paint kan påvirke dine Google-placeringer. Det er derfor en god idé, at du er på forkant med udviklingen og allerede nu arbejder på at opfylde betingelserne.

Her er flere tips til at forbedre din INP-score

1. Reducer Input Delay-komponenten

For at reducere Input Delay-komponenten af INP, skal du reducere og opdele baggrunds-CPU-aktivitet på hovedtråden.

Dette kan indebære at se på Total Blocking Time-metrikken for at se, om der er baggrundsaktivitet, der ville blokere brugerinteraktioner, og derefter tage skridt til at minimere denne aktivitet.

Ydelseseffekt: Høj

2. Reducer behandlingskomponenten

Optimering af behandlingskomponenten vil i høj grad afhænge af din specifikke app. Du skal undersøge, hvor browseren bruger det meste af sin tid, og optimere disse dele.

Dette kan indebære at undgå unødvendige rerenders af dine komponenter, reducere relayouts, eller opdatere brugergrænsefladen før du starter den tunge CPU-opgave.

Ydelseseffekt: Høj

3. Undgå native alert, confirm og prompt-dialoger

JavaScript-metoder som alert er en nem måde at vise en besked til en bruger eller bede dem om at bekræfte en handling.

De kører dog synkront og blokerer hovedtråden på siden, hvilket betyder, at al den tid, de er synlige, tæller mod den samlede interaktionsforsinkelse. Derfor er det bedst at undgå disse metoder, når det er muligt.

Ydelseseffekt: Høj

4. Reducer præsentationsforsinkelsen

Mængden af præsentationsforsinkelse vil afhænge af kompleksiteten af siden og hvor meget af siden der opdateres. Hvis rendering af sidens indhold er langsom, kan du overveje kun at vise vigtigt “above the fold”-indhold først for at levere den næste frame hurtigere.

Ydelseseffekt: Medium

Hvordan er Interaction to Next Paint forskellig fra First Input Delay?

Der er to forskelle mellem FID og INP: FID måler kun den indledende behandlingsforsinkelse, mens INP måler den fulde mængde tid mellem brugerinput og brugergrænsefladeopdateringen. FID tæller også kun den første brugerinteraktion på en side, mens INP ser på (omtrent) den værste forsinkelse.

First Input Delay måler, hvor lang tid det tager for browseren at begynde at behandle brugerinput. Den faktiske tid, der bruges på at reagere på begivenheden eller opdatere brugergrænsefladen, er ikke inkluderet.

Som navnet antyder, tager FID kun hensyn til den første gang brugeren interagerer med siden. Især for sider, der forbliver åbne i lang tid, som single-page apps, er denne første interaktion måske ikke repræsentativ for den samlede brugeroplevelse.

Interaction to Next Paint måler generelt den værste inputforsinkelse på siden. Dog, hvis der er mange brugeroplevelser, vil outliers blive ignoreret, og Google vil måle det 98. percentil af interaktionsforsinkelsen. Så hvis INP på en side er 250 millisekunder, havde 2% af brugerinteraktionerne en latenstid større end 250 millisekunder.

Lad os kigge på den sidste Core Web Vital.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) er en måling for, hvor visuel stabil en side er, i takt med at den indlæses. Hvis du derfor har elementer som bevæger sig rundt i takt i takt med siden indlæses, så har en en højere og dårligere CLS.

Commulative Layout Shift eksempel

Ideelt set bør dine sideelementer derfor være statiske, fremfor at de dynamisk flyttes rundt på siden. Dermed behøves brugere ikke at lære igen, hvor links, felter og billeder er placeret, når siden er fuldt indlæst. Eller hvis brugeren kommer til at klikke på noget ved en fejltagelse.

Ligesom med LCP og FID, så har CLS også en række guidelines fra Google:

Googles Commulative Layout Shift (CLS) guidelines

Og I Search Console kan du se, om der er sider, som ikke lever op til dette.

CLS data i Google Search Console

Afsluttende kommer her nogle tips til, hvordan du kan forbedre din CLS-score.

1. Angiv højde og bredde på alle medieelementer

En af de simpleste måder til at fikse din CLS-score, er ved at inkluder width og height attributter på dine medieelementer, så som billeder og videoer. Dermed ved browseren nøjagtigt, hvor meget plads et element, så som et billede eller en video optager på siden og kan reservere denne plads, indtil siden er fuldt ud indlæst.

En anden måde til at løse denne udfordring på, er ved at drage fordel af CSS-billedformatfelterne og lade browseren indstille standardforholdet for billeder. Kort sagt, så skal du inkludere bredde eller højdeattributten og indstille størrelsesforholdet ved hjælp af CSS. Browseren vil så finde ud af den manglende attribut og får billeddimensionerne, før siden gengives.

Ydelseseffekt: Høj

2. Forudindlæs skrifttyper

Ved at forudindlæse dine skrifttyper (fonts), beder du browseren om at indlæse dem som en prioriteret ressource. Som et resultat vil browseren sandsynligvis inkludere skrifttyperne i den første meningsfulde maling – det er når sidens primære indhold er fuldt indlæst og vist. Ved forudindlæsning af skrifttyper adresserer du “Sikre, at teksten forbliver synlig under webfont-indlæsning” i Google PageSpeed Insights.

Ydelseseffekt: Lav

3. Fiks annoncer, indlejringer og iframes uden dimensioner

Ligesom med billeder kan indlæsning af indlejringer (embeds) uden dimensioner medføre problemer. Sørg derfor altid for at angive størrelser på disse. Og hvis du bruger annoncer på din side, så sørg for at “reservere” plads til hver annonce.

Ydelseseffekt: Høj

4. Håndter dynamisk indhold

Dynamisk indhold så som bannere kan også påvirke din CLS-score. Derfor bør du indgå at vise nyt indhold, medmindre det udløses af brugerinteraktion. CLS tæller nemlig kun layoutskift, der opstår, når brugeren ikke interagerer med siden. Ved at håndtere dynamisk indhold, så addresseret du PageSpeed-anbefalingen “Undgå store layoutskift” og “Undgår enorme netværksnyttelast”.

Ydelseseffekt: Høj

5. Prioriter CSS-transform-egenskaben fremfor animationer

En anden måde til at sikre visuel stabilitet er, at tage hånd om animationer. Istedet bør du bruge CSS-egenskaben: transform, som ikke indløser nogen layoutændringer.

Ydelseseffekt: Lav

6. Tilføj nye UI-elementer under folden

Dermed presser de ikke sidens primære indhold ned på siden, hvilket brugeren forventer at se som det første.

Ydelseseffekt: Medium

At forbedre dine Core Web Vitals er ikke altid et quick fix. Den nødvendige optimering for at opfylde Googles guidelines, afhængig i høj grad af kompleksiteten af dit website.

Optimer til Core Web Vitals i dag

Du ved nu hvad Core Web Vitals er og hvordan de påvirker ydelsen på dit website. Du ved også hvad der skal til, for at forbedre din score og hvilke der har den største ydelseseffekt.

Ved at implementere ovenstående forbedringer, vil du ikke bare forbedre brugeroplevelsen på dine websider. Du kan også blive belønnet af Google i form af et boost i deres søgeresultater.

User Experience

User Experience

Lær mere

Godt gået! Du har nu læst guiden "Core Web Vitals" og er sikkert blevet meget klogere. Du er klar til at kaste dig over den næste lektion.

Flere emner

SEO værktøjer

SEO værktøjer

Søgeord

Søgeord

Indhold

Indhold