Hvad er Core Web Vitals egentlig? og hvad kan du gøre for at optimere det?

Hvad består Core Web Vitals af?

Core Web Vitals består af tre målinger:

1. LCP (Largest Contentful Paint)
   Måler indlæsningsoplevelsen, nærmere bestemt hvor hurtigt det største synlige indholdselement bliver vist. Målet for “god” er 2,5 sekunder eller mindre.
2. INP (Interaction to Next Paint)
   Måler respons ved interaktioner, altså hvor hurtigt siden reagerer, når brugeren klikker, trykker eller skriver, og hvornår resultatet bliver vist på skærmen. Målet for “god” er under 200 ms.
3. CLS (Cumulative Layout Shift)
   Måler visuel stabilitet, altså hvor meget indhold flytter sig uventet under indlæsningen. Målet for “god” er 0,1 eller mindre.

Bemærk: Mange ældre guides nævner FID. I dag er det INP, og FID er udfaset som Core Web Vital.

Sådan måler Google Core Web Vitals

Hvis du vil vinde på Core Web Vitals, skal du kende forskel på feltdata og labdata.

Feltdata

Feltdata er rigtige brugeres oplevelse. Det er den data du ser i Search Console Core Web Vitals rapporten.
Google vurderer målingerne ved 75 percentil, hvilket i praksis betyder, at du skal have en god oplevelse for langt størstedelen af dine brugere, også dem på langsommere net og svagere enheder.

Labdata

Labdata er simulerede tests, typisk Lighthouse eller PageSpeed Insights. Labdata er stærkt til fejlsøgning, fordi du kan reproducere problemer og se præcis hvad der blokerer. Men labdata kan ikke alene fortælle dig hvordan google reelt opfatter din Core Web Vitals i Search Console, fordi rigtige brugere varierer i enheder, netværk, cache og adfærd.

Hvorfor Search Console grupperer sider

Search Console viser ofte problemer som grupper af URL’er, fordi problemer tit ligger i skabeloner, tema, plugins eller fælles scripts. Det er en fordel, for det betyder, at én rettelse kan forbedre mange sider, hvis du rammer årsagen rigtigt.

Hvorfor Core Web Vitals betyder noget for SEO

Core Web Vitals indgår i Googles vurdering af sideoplevelse, og de kan påvirke synlighed, især når indholdet ellers er tæt på konkurrenternes. Men Core Web Vitals er ikke en magisk genvej. Relevans, indholdskvalitet og autoritet betyder stadig meget.

Den praktiske sandhed er enkel: Når din side er langsom eller ustabil, falder engagement og konverteringer, og det kan indirekte ramme SEO, fordi brugerne smutter hurtigere og interagerer mindre.

LCP: sådan gør du det vigtigste indhold hurtigt

LCP handler om, hvornår den største synlige blok på siden bliver malet. På mange sites er det et hero billede, et banner, en stor overskrift, et produktbillede eller en topsektion med baggrundsbillede.

Find LCP elementet først

I PageSpeed Insights og Lighthouse kan du se hvilket element der er LCP. Når du ved hvad LCP er, bliver det langt lettere at optimere, fordi du stopper med at gætte.

De typiske årsager til dårlig LCP

1) Lang serverrespons og høj TTFB
Hvis HTML kommer sent, starter alt sent. Her ser jeg typisk problemer med:

• manglende eller forkert cache
• tung database eller langsom PHP
• for mange plugins der laver arbejde på hver request
• hosting der ikke kan følge med
• manglende objektcache hvor det giver mening

2) Render blokering fra CSS og JavaScript
Selv med hurtig server kan LCP blive dårlig, hvis CSS eller scripts blokerer rendering. Klassiske syndere:

• for store CSS filer der loader før alt andet
• JavaScript der køres tidligt og blokerer main thread
• tredjeparts scripts som starter før første visning

3) Forkert billedprioritet
Det vigtigste billede skal ikke behandles som sekundært. Typiske fejl:

• hero billedet lazy loades
• for stor filstørrelse
• forkert størrelse i forhold til layout og viewport
• ingen preload på det vigtigste billede, når det giver mening

4) Fonts der forsinker visning
Webfonts kan påvirke LCP, især hvis LCP elementet er tekst. Her hjælper det ofte med:

• font display swap
• preload af den vigtigste font
• subset hvor det er relevant

Hurtige LCP forbedringer der ofte flytter meget

• Sørg for at cache virker rigtigt på HTML niveau
• Fjern det der blokerer rendering i toppen af siden
• Optimer hero billedet: størrelse, format, prioritet
• Hold toppen enkel: færre elementer, færre scripts, færre wrappers

INP: sådan får du en side der reagerer hurtigt

INP er i dag den vigtigste måling for “føles tung” problemer. Den måler interaktioner og tiden til næste synlige opdatering. INP erstattede FID som Core Web Vital i marts 2024.

Hvad skaber dårlig INP?

1) Long tasks på main thread
Hvis browserens hovedtråd er optaget, kan den ikke reagere. INP bliver ofte dårlig når der er:

• for meget JavaScript på siden
• tunge bundles fra tema eller page builder
• tracking og annoncer der kører tidligt
• store beregninger, som burde opdeles

2) For mange DOM elementer og dyr rendering
INP kan også blive dårlig, hvis en interaktion udløser tung style beregning, layout og paint. Det ser man ofte på:

• lange lister og feeds
• opskriftsider, katalogsider, store produktlister
• komponenter med mange nested wrappers
• animationer der trigger layout frem for compositor

3) Tredjeparts scripts
Tredjepart er næsten altid en INP risiko, fordi det lægger ekstra arbejde i main thread. Selv når noget er “ude af viewport”, er det ikke gratis, hvis scripts stadig kører, lytter og timer.

Sådan fejlsøger du INP i Chrome DevTools

• Brug Performance optagelse og find long tasks
• Kig efter scripts der kører ved interaktion
• Identificer hvilke handler funktioner der tager tid
• Flyt tungt arbejde væk fra kritiske interaktioner

INP rettelser der virker i praksis

• Udsæt ikke kritiske scripts, men udskyd alt det der ikke er nødvendigt for første visning
• Splitting af tunge scripts, så du kun loader det du bruger
• Reducer tredjepart, eller sørg for at det starter senere
• Forenkle DOM i de sektioner hvor brugeren interagerer mest

CLS: sådan fjerner du layout der hopper

CLS er et område hvor man ofte kan hente hurtige point, men mange løser det forkert. CLS handler om uventede layoutskift, mens siden indlæses, og mens dynamisk indhold kommer ind.

De mest almindelige CLS årsager

1) Billeder og embeds uden dimensioner
Når browseren ikke kender størrelsen, reserverer den ikke plads, og alt flytter sig når elementet loader. Løsningen er typisk:

• width og height på img
• eller fast aspect ratio via CSS
• samme gælder video, iframes og embeds

2) Cookie banners og topbarer
Hvis de skubber indhold ned, giver det CLS. Ofte er overlay bedre, eller en reserveret plads fra start.

3) Fonts der bytter
Når fallback font og webfont har forskellige mål, kan tekst ændre størrelse og skubbe layout. Her hjælper font display swap, og eventuelt en mere kompatibel fallback.

4) Annoncer og dynamiske bokse
Annoncer er en klassisk CLS kilde, fordi størrelser varierer. Den robuste løsning er at reservere plads, så layoutet ikke skubber.

Værktøjer til Core Web Vitals måling og fejlsøgning

Jeg bruger typisk disse værktøjer, fordi de dækker både feltdata og fejlfindingsniveauet:

• Google Search Console til feltdata og grupper af problemer
• PageSpeed Insights til kombination af feltdata og labdata, og til at se hvilke anbefalinger der påvirker hvad
• Lighthouse til reproduktion og konkrete audits
• Chrome DevTools Performance til at finde long tasks, layout thrashing og rendering flaskehalse

En metode der gør det nemt at prioritere

Hvis du vil optimere hurtigt og rigtigt, så kør denne rækkefølge:

1. Start i Search Console: find den sidetype der påvirker mest trafik og værdi
2. Se hvilken måling der fejler: LCP, INP eller CLS
3. Vælg én repræsentativ side og reproducer i PageSpeed Insights
4. Find årsagen, ikke symptomet
5. Ret i skabelon, tema, plugins eller fælles scripts, så ændringen rammer hele gruppen
6. Mål igen, og hold øje med feltdata over tid

Det er sådan du undgår at bruge tid på kosmetiske ændringer, der ikke flytter reelle tal.

Core Web Vitals i WordPress og WooCommerce

WordPress kan være meget hurtigt, men performance falder ofte af tre grunde: for tungt tema, for mange plugins, og for meget tredjepart.

Typiske WordPress problemer der rammer LCP

• temaer der loader store CSS og JS pakker på alle sider
• page builders der laver mange wrappers og dyr rendering
• billeder der ikke prioriteres rigtigt, især i topsektioner
• fonts der ikke er optimeret
• cache der ikke serverer HTML konsekvent

Typiske WordPress problemer der rammer INP

• for meget JavaScript fra tema og plugins
• tracking, chat, cookie løsninger der kører tidligt
• WooCommerce scripts der indlæses på sider hvor de ikke bruges
• tunge produktlister med mange variationer og elementer

Typiske WordPress problemer der rammer CLS

• billeder uden width og height
• badges, labels og dynamiske elementer der kommer ind sent
• cookie banners der skubber layout
• annonce områder uden reserveret plads

Vil du gøre det seriøst, så handler WordPress performance ofte om at kontrollere hvad der loades hvor, og at holde toppen af siden let og forudsigelig.

Gratis hastighedstest og Core Web Vitals analyse

Hvis du vil have en konkret plan baseret på din egen side, kan du bruge min hastighedstest. Jeg tester med fokus på feltdata, Core Web Vitals og den tekniske årsag bag tallene, så du får en prioriteret liste over det der reelt flytter LCP, INP og CLS.

Jeg tester altid med fokus på mobil, fordi Google måler bredt på rigtige brugere, og fordi mobilen typisk afslører flaskehalse før desktop.

Konkrete tips til WordPress og WooCommerce

WordPress: konkrete ændringer der flytter LCP, INP og CLS

WordPress kan blive hurtig, når du styrer tre ting: hvad der loades, hvornår det loades, og hvor meget arbejde der sker på hver sidevisning. Nedenfor er de tiltag, der oftest giver størst effekt, fordi de rammer skabeloner og dermed mange sider på én gang.

1) Stop med at loade alt på alle sider

Det mest oversete performance problem i WordPress er scripts og styles, der bliver indlæst globalt, selvom de kun bruges på få sidetyper.

• Gennemgå hvilke scripts der loader på forsiden, indlæg, kategorier, produktsider og checkout
• Fjern eller udskyd det, der ikke er nødvendigt for første visning
• Begræns især tracking, chat, popup, cookie løsning og sliders

Teknisk tip (eksempel): fjern assets på sider hvor de ikke bruges.

add_action('wp_enqueue_scripts', function () {
    // Eksempel: fjern et plugin script fra alle sider undtagen kontakt
    if (!is_page('kontakt')) {
        wp_dequeue_script('plugin-handle-script');
        wp_deregister_script('plugin-handle-script');
    }

    // Eksempel: fjern et plugin stylesheet fra alle sider undtagen produktsider
    if (!is_product()) {
        wp_dequeue_style('plugin-handle-style');
        wp_deregister_style('plugin-handle-style');
    }
}, 100);

Hvorfor det virker:

• LCP forbedres når render blokering og netværkskø bliver mindre
• INP forbedres når main thread får mindre JavaScript at arbejde med

2) Sørg for at topsektionen er let

LCP elementet ligger ofte i toppen. Hvis topsektionen er bygget af mange blokke, mange wrappers og mange effekter, bliver rendering tungere.

• Hold hero sektionen simpel
• Undgå store sliders og tunge animationer over fold
• Brug et rigtigt billede element til hero frem for baggrundsbillede, når det giver mening, fordi det giver bedre kontrol over prioritet og dimensioner

3) Billedstrategi der matcher LCP

Den hurtigste gevinst er næsten altid hero billedet og de første 1 til 2 billeder i viewport.

• Ingen lazy load på hero billedet
• Korrekt størrelse, ikke et 3000 px billede til et 900 px layout
• Sæt width og height på billeder, så CLS ikke stiger
• Brug moderne formater og komprimering med kvalitet der passer til motivet

4) Fonts uden blokering og uden layout hop

Fonts kan både ramme LCP og CLS.

• Brug font display swap
• Preload kun den font der faktisk bruges i toppen
• Vælg fallback fonts der ligger tæt på din webfont, så tekst ikke ændrer mål ved swap

5) Cache der virker på HTML niveau

Hvis HTML og de vigtigste ressourcer kommer sent, kan du optimere alt andet uden at flytte LCP nok.

• Full page cache, så WordPress ikke bygger siden for hver besøgende
• Sørg for cache bypass regler kun gælder hvor det er nødvendigt
• Tjek at cache ikke brydes af små ting som query parametre, unødvendige cookies eller forskellige headers

6) Reducer main thread arbejde tidligt

INP bliver sjældent god, hvis der kører mange scripts tidligt.

• Flyt ikke kritisk logik væk, men udskyd alt det der ikke er nødvendigt for første visning
• Begræns tredjepart, og start det senere
• Undgå at flere systemer laver det samme, fx to tracking setups, to lazy load løsninger, to cookie scripts

7) Ryd op i småting der bliver store i mængden

Det giver ikke altid store tal alene, men det reducerer støj og gør resten lettere.

• fjern emoji script hvis du ikke bruger det
• undgå dashicons for besøgende hvis du ikke har behov
• fjern embeds hvis du ikke bruger dem

WooCommerce: Core Web Vitals tips der særligt påvirker INP og LCP

WooCommerce er ofte der, hvor performance falder, fordi der er flere scripts, flere dynamiske elementer og flere steder, hvor brugerens klik skal give respons med det samme.

1) Indlæs WooCommerce scripts kun hvor de giver mening

Det giver sjældent værdi at loade cart, checkout og fragments på rene indholdssider.

• Begræns scripts til shop, produkt, kurv og checkout
• Vær ekstra kritisk på blog og guides, hvor WooCommerce sjældent er en del af oplevelsen

2) Cart fragments og mini cart

Cart fragments kan være en INP killer, især hvis den opdaterer ofte eller triggers ved scroll, klik eller hver sidevisning.

• Brug mini cart der ikke refresher unødigt
• Undgå at fragments kører på sider hvor du ikke viser kurvstatus
• Hvis du har et tema der bruger fragments aggressivt, kan det være værd at ændre implementeringen, ikke kun optimere scripts

Teknisk (eksempel): fjern wc-cart-fragments på sider hvor den ikke behøves.

add_action('wp_enqueue_scripts', function () {
    if (function_exists('is_woocommerce') && !is_cart() && !is_checkout() && !is_shop() && !is_product() && !is_product_category() && !is_product_tag()) {
        wp_dequeue_script('wc-cart-fragments');
        wp_deregister_script('wc-cart-fragments');
    }
}, 100);

Bemærk: hvis dit tema viser mini cart i header på alle sider, skal du vælge en strategi der stadig holder kurvindikator korrekt, uden at fragments bliver tung.

3) Checkout: skær alt fra der ikke er nødvendigt

Checkout er ofte den vigtigste side, og den er tit den tungeste.

• Fjern tracking der ikke er nødvendig for gennemførsel
• Fjern widgets, chat og popups på checkout
• Hold antallet af felter nede, og undgå scripts der validerer alt konstant på hvert tastetryk
• Brug kun de betalingsmetoder der faktisk skal være der, og indlæs deres scripts sent, så langt det er muligt uden at bryde flow

4) Produktsider med varianter og billedgallerier

Variant skift kan trigge tunge DOM opdateringer.

• Begræns tunge gallerier i toppen
• Undgå at hele produktsektionen rerender ved små ændringer
• Sørg for at de vigtigste billeder har korrekt dimensioner fra start, så CLS ikke stiger når galleri loader

5) Filtrering og produktlister

Filtre, sortering og “load more” kan gøre både INP og CLS dårlig, hvis der sker store layout skift.

• Reserver plads til filterpanel og produktkort, så layout ikke hopper
• Hold produktkort simple, især på mobil
• Undgå at tilføje badges, labels og prisblokke sent uden fast højde

Ofte stillede spørgsmål om Core Web Vitals