Hvordan man sænker Core Web Vitals og LCP

Hvad er Core Web Vitals?

Core Web Vitals er tre grundlæggende præstationsmålinger, som Google har defineret til at måle brugeroplevelsen: LCP (Largest Contentful Paint – den tid, det tager for det største indholdselement at blive vist på skærmen), INP (Interaction to Next Paint – reaktionshastigheden på brugerinteraktioner) og CLS (Cumulative Layout Shift – den visuelle forskydning, der opstår, mens siden indlæses). Disse tre målinger baseres på data fra virkelige brugere (field data); det vil sige, de beregnes ikke ud fra laboratorietests (f.eks. en engangsundersøgelse), men ud fra data indsamlet under de faktiske enheds- og netværksforhold, som besøgende oplever.

Disse tre måleparametre repræsenterer forskellige dimensioner af brugeroplevelsen: LCP giver en fornemmelse af, »hvor hurtigt siden indlæses«, INP besvarer spørgsmålet om, »hvor hurtigt siden reagerer på interaktion«, mens CLS måler, »om siden hopper rundt foran mine øjne«. Den samlede brugeroplevelse kan ikke betragtes som fuldt ud »god«, medmindre alle tre er gode.

I denne vejledning fokuseres der især på LCP, da det generelt er den metrik, der er mest mulig at gribe ind over for, og som udgør det mest konkrete forbedringsområde; et stort hero-billede eller en video kan i sig selv forsinke LCP med flere sekunder.

Hvorfor er det vigtigt?

Disse målinger afspejler direkte brugeroplevelsen: En side, der indlæses langsomt, reagerer langsomt på interaktion eller konstant rykker, får brugeren til at forlade siden. Google bruger Core Web Vitals som et af sine rangordningssignaler; især i mobil-søgninger kan disse måleværdier have en mere markant indflydelse, da mobile enheder og netværk generelt er mere begrænsede end desktop-enheder.

Ifølge de aktuelle tærskelværdier skal LCP være under 2,5 sekunder for at blive betragtet som »god«, og dette skal opfyldes for mindst 75 % af de reelle brugere. Et websted, der ligger over denne tærskel, falder ind under kategorien »langsomt« med hensyn til brugeroplevelsen, selvom det teknisk set fungerer, og dette kan have en negativ indvirkning på både konverteringsraten og søgerangeringen.

Årsagen til LCP-forsinkelsen kan variere fra hjemmeside til hjemmeside: På nogle hjemmesider skyldes det et stort, ukomprimeret billede, mens det på andre skyldes en langsom serverrespons (TTFB) eller tredjeparts-scripts (f.eks. annoncenetværk, analyseværktøjer), der blokerer rendering. Derfor er det vigtigt at identificere, hvilket element der er markeret som LCP, inden man går i gang med at optimere.

Hvordan løses det?

• Optimer det billede, der udgør LCP-elementet (typisk hero-billedet): passende størrelse, moderne format (WebP/AVIF), komprimering.
• Tilføj <link rel="preload"> , så browseren kan opdage det tidligt; dette sikrer, at billedet downloades med prioritet og ikke samtidig med andre ressourcer.
• Reducer serverens svartid (TTFB): cachelagring, hurtig hosting, brug af CDN.
• Reducer eller udskyd (defer/async) CSS/JS-filer, der blokerer rendering; browseren kan udsætte tegningen af siden, indtil disse filer er downloadet og kørt.
• Reducer den geografiske forsinkelse ved at distribuere statiske ressourcer via et CDN; at svare fra den server, der er tættest på brugeren, forkorter forsinkelsen.

Eksempel

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

Dårligt eksempel: Indstil LCP-billedet <img src="hero.jpg" loading="lazy"> til lazy loading — dette forhindrer browseren i at downloade billedet med det samme, mens siden indlæses, og forlænger LCP-tiden betydeligt.

Almindelige fejl

• At levere LCP-billedet i en unødvendigt stor størrelse uden komprimering.
• At samle al CSS eller JS i én stor fil og dermed blokere rendering.
• loading="lazy" Ved en fejl at anvende funktionen på LCP-billedet (det første billede, der vises på skærmen) — dette forsinker LCP, fordi browseren udsætter downloadet, indtil den ser billedet.
• At se bort fra serverens svartid og kun optimere frontend.
• Når LCP-målingen i rapporten fra Seoraporu.co overstiger 2,5 sekunder, skal man først identificere, hvilket element der er markeret som LCP, og prioritere det; en målrettet indsats er mere effektiv end en generel »optimer alt«-tilgang.
• Gennemgå regelmæssigt, hvordan tredjeparts-scripts (reklamer, analyse, chat-widget) påvirker rækkefølgen for sideindlæsning; disse kan med tiden akkumuleres og gradvist forringe ydeevnen.
• At ignorere CLS og udelukkende fokusere på LCP kan medføre, at indholdet pludselig forskydes, når siderne indlæses, hvis der er billed- eller reklameområder med udefineret størrelse.