Dybdedyk i LCP, FID og CLS

Velkommen til en dybere gennemgang af Core Web Vitals! Disse målinger er afgørende for at forstå og forbedre brugeroplevelsen på dit website.

I denne lektion analyserer vi Largest Contentful Paint (LCP), First Input Delay (FID) og Cumulative Layout Shift (CLS). Du lærer, hvad de hver især måler, hvorfor de er vigtige, og hvilke praktiske teknikker du kan bruge til at optimere dem.

Largest Contentful Paint (LCP) måler, hvor lang tid det tager, før det største synlige indholdselement i visningsområdet bliver renderet. Tænk på det som, hvor hurtigt en bruger ser hovedindholdet på din side.

• En god LCP-score er 2,5 sekunder eller mindre.
• Alt over 4 sekunder betragtes som dårligt.

LCP er en vigtig indikator for sidens oplevede indlæsningshastighed.

Ikke alle elementer bidrager til LCP. Typisk er det det største billede eller den største tekstblok, der er synlig, når siden indlæses første gang, som er LCP-elementet. Almindelige LCP-elementer omfatter:

• <img>-elementer
• <video>-elementer (med deres posterbillede)
• Elementer med et baggrundsbillede, der indlæses via url()
• Tekstelementer på blokniveau, der indeholder tekstnoder (f.eks. <h1> og <p>)

At kende dit LCP-element er det første skridt mod at optimere det!

En vigtig faktor for LCP er, hvor hurtigt din browser kan hente og rendere kritiske ressourcer, især billeder og skrifttyper. Her er en almindelig strategi:

• Forudindlæs kritiske billeder: Brug <link rel="preload"> til at fortælle browseren, at den skal hente ressourcer med høj prioritet tidligere.
• Optimer billeder: Komprimer dem, brug moderne formater (WebP, AVIF), og brug responsive billeder.
• Minimer ressourcer, der blokerer rendering: Reducer eller udskyd CSS og JavaScript, som forhindrer siden i at blive renderet hurtigt.

Lad os se et eksempel på forudindlæsning af et hero-billede:

First Input Delay (FID) måler tiden fra det øjeblik, en bruger interagerer med en side første gang (f.eks. klikker på en knap eller trykker på et link), til browseren faktisk kan begynde at behandle denne interaktion.

Det handler om reaktionsevne, og hvor hurtigt din side reagerer på brugerinput. Målingen omfatter ikke kørselstiden for hændelseshåndteringen, men kun forsinkelsen, før den kan begynde.

• En god FID-score er 100 millisekunder eller mindre.
• Alt over 300 millisekunder anses for dårligt.

En høj FID betyder ofte, at browserens hovedtråd er optaget af andet arbejde, typisk afvikling af JavaScript, og derfor ikke kan reagere på brugerinput med det samme.

Almindelige årsager er:

• Lange JavaScript-opgaver: Tunge scripts, der kører i længere tid og blokerer hovedtråden.
• Store JavaScript-bundter: Mere kode betyder længere tid til parsing, kompilering og afvikling.
• Scripts fra tredjeparter: Annoncer, analyseværktøjer eller andre eksterne scripts kan optage en betydelig del af hovedtrådens tid.

For at forbedre FID skal du reducere den tid, hvor hovedtråden er blokeret. Sådan gør du:

• Opdel lange opgaver: Opdel store JavaScript-operationer i mindre, asynkrone dele.
• Udskyd eller kør ikke-kritisk JS asynkront: Brug attributterne defer eller async til scripts, der ikke er nødvendige for den indledende rendering.
• Reducer JavaScript-mængden: Minificér, udfør tree-shaking på, og opdel dine JavaScript-bundter i kodeopdelinger.
• Brug Web Workers: Flyt beregningstunge opgaver til en baggrundstråd, så hovedtråden holdes fri.

Cumulative Layout Shift (CLS) måler en sides visuelle stabilitet. Den kvantificerer, hvor mange uventede layoutforskydninger der sker, mens siden er aktiv.

En uventet forskydning sker, når et synligt element ændrer sin startposition fra ét renderet billede til det næste. Det kan være meget frustrerende for brugerne!

• En god CLS-score er 0,1 eller mindre.
• Alt over 0,25 anses for dårligt.

Layoutforskydninger sker ofte, når indhold indlæses eller ændres dynamisk uden at reservere plads. De vigtigste årsager er:

• Billeder eller videoer uden dimensioner: Browseren ved ikke, hvor meget plads der skal reserveres, før mediet er indlæst.
• Dynamisk indsat indhold: Annoncer, bannere eller widgets, der vises, efter siden er begyndt at blive renderet.
• Webskrifttyper, der forårsager FOIT/FOUT: Skrifttyper, der indlæses sent, kan få teksten til at ombrydes eller forsvinde og blive vist igen.
• Handlinger, der venter på et netværkssvar: Indhold, der flytter sig, efter et API-kald er gennemført.

Forebyggelse af CLS handler om at reservere plads og sikre, at elementer ikke flytter sig uventet. Her er nogle teknikker:

• Angiv billed- og videodimensioner: Brug altid attributterne width og height eller CSS-egenskaben aspect-ratio.
• Reservér plads til annoncer og indlejret indhold: Brug CSS-egenskaben min-height eller et pladsholderelement.
• Undgå at indsætte indhold over eksisterende indhold: Især efter den indledende rendering af siden.
• Forudindlæs skrifttyper, og brug font-display: Brug font-display: optional eller swap til at styre indlæsningen af skrifttyper.

Her er et eksempel på, hvordan angivelse af billeddimensioner forhindrer CLS:

Du har nu fordybet dig grundigt i Core Web Vitals!

• LCP (Largest Contentful Paint): Måler den oplevede indlæsningshastighed med fokus på det største indholdselement. Optimér ved at forudindlæse, optimere billeder og reducere serverens svartid.
• FID (First Input Delay): Måler interaktivitet med fokus på forsinkelsen, før browseren reagerer på brugerinput. Optimér ved at minimere og opdele JavaScript-opgaver.
• CLS (Cumulative Layout Shift): Måler visuel stabilitet. Optimér ved at reservere plads til dynamisk indhold, angive billeddimensioner og styre indlæsningen af skrifttyper.

Ved at forstå og forbedre disse målinger bidrager du til en meget bedre brugeroplevelse!