Fördjupning i LCP, FID och CLS

Välkomna till en djupare genomgång av Core Web Vitals! Dessa mätvärden är avgörande för att förstå och förbättra användarupplevelsen på webbplatsen.

I den här lektionen analyserar vi Largest Contentful Paint (LCP), First Input Delay (FID) och Cumulative Layout Shift (CLS). Ni får lära er vad varje mätvärde mäter, varför de är viktiga och praktiska metoder för att optimera dem.

Largest Contentful Paint (LCP) mäter hur lång tid det tar innan det största synliga innehållselementet i visningsområdet renderas. Tänk på det som hur snabbt användaren ser sidans huvudinnehåll.

• Ett bra LCP-resultat är 2,5 sekunder eller mindre.
• Allt över 4 sekunder betraktas som dåligt.

LCP är en viktig indikator på sidans upplevda laddningshastighet.

Alla element bidrar inte till LCP. Vanligtvis är det den största bilden eller det största textblocket som syns när sidan laddas första gången som är LCP-elementet. Vanliga LCP-element är:

• <img>-element
• <video>-element (med sin förhandsvisningsbild)
• Element med en bakgrundsbild som laddas via url()
• Text-element på blocknivå som innehåller textnoder (till exempel <h1> och <p>)

Att känna till ert LCP-element är det första steget mot att optimera det!

En viktig faktor för LCP är hur snabbt webbläsaren kan hämta och rendera kritiska resurser, särskilt bilder och typsnitt. Här är en vanlig strategi:

• Förladda kritiska bilder: Använd <link rel="preload"> för att tala om för webbläsaren att hämta resurser med hög prioritet tidigare.
• Optimera bilder: Komprimera dem, använd moderna format (WebP, AVIF) och responsiva bilder.
• Minimera renderingsblockerande resurser: Minska eller senarelägg CSS och JavaScript som hindrar sidan från att renderas snabbt.

Nu tittar vi på ett exempel där en hero-bild förladdas:

First Input Delay (FID) mäter tiden från det att en användare interagerar med en sida för första gången (till exempel klickar på en knapp eller trycker på en länk) tills webbläsaren faktiskt kan börja bearbeta interaktionen.

Det handlar om responsivitet och hur snabbt sidan reagerar på användarens inmatning. Måttet mäter inte hur lång tid det tar att köra händelsehanteraren, utan bara fördröjningen innan körningen kan börja.

• Ett bra FID-värde är 100 millisekunder eller mindre.
• Allt över 300 millisekunder anses vara dåligt.

Ett högt FID-värde innebär ofta att webbläsarens huvudtråd är upptagen med annat arbete, vanligtvis med att köra JavaScript, och därför inte kan reagera på användarinmatning direkt.

Vanliga orsaker är:

• Långa JavaScript-uppgifter: Omfattande skript som körs under en längre tid och blockerar huvudtråden.
• Stora JavaScript-paket: Mer kod innebär längre tid för parsning, kompilering och körning.
• Skript från tredje part: Annonser, analysverktyg och andra externa skript kan förbruka mycket tid på huvudtråden.

För att förbättra FID behöver du minska den tid som huvudtråden är blockerad. Så här gör du:

• Dela upp långa uppgifter: Dela upp omfattande JavaScript-operationer i mindre asynkrona delar.
• Skjut upp eller kör icke-kritisk JS asynkront: Använd attributen defer eller async för skript som inte behövs för den initiala rendering-en.
• Minska mängden JavaScript: Minifiera, tree-shaka och dela upp dina JavaScript-paket i separata koddelar.
• Använd Web Workers: Flytta beräkningsintensiva uppgifter till en bakgrundstråd så att huvudtråden hålls fri.

Cumulative Layout Shift (CLS) mäter en sidas visuella stabilitet. Det kvantifierar hur stora oväntade layoutförskjutningar som sker under sidans livslängd.

En oväntad förskjutning inträffar när ett synligt elements startposition ändras från en renderad bildruta till nästa. Det kan vara mycket frustrerande för användare!

• Ett bra CLS-värde är 0,1 eller mindre.
• Allt över 0,25 anses vara dåligt.

Layoutförskjutningar inträffar ofta när innehåll läses in eller ändras dynamiskt utan att utrymme reserveras. Viktiga orsaker är:

• Bilder eller videor utan dimensioner: Webbläsaren vet inte hur mycket utrymme som ska reserveras förrän mediet har lästs in.
• Dynamiskt infogat innehåll: Annonser, banners eller widgetar som visas efter att sidan har börjat renderas.
• Webbfonter som orsakar FOIT/FOUT: Sent inlästa fonter kan göra att texten flödar om eller försvinner och visas igen.
• Åtgärder som väntar på ett nätverkssvar: Innehåll som flyttas efter att ett API-anrop har slutförts.

Att förebygga CLS handlar om att reservera utrymme och se till att element inte flyttas oväntat. Här är några tekniker:

• Ange bilders och videors dimensioner: Använd alltid attributen width och height, eller CSS-egenskapen aspect-ratio.
• Reservera utrymme för annonser och inbäddat innehåll: Använd CSS-egenskapen min-height eller ett platshållarelement.
• Undvik att infoga innehåll ovanför befintligt innehåll: Särskilt efter den initiala rendering-en av sidan.
• Förläs fonter och använd font-display: Använd font-display: optional eller swap för att styra hur fonter läses in.

Här är ett exempel på hur angivna bilddimensioner förhindrar CLS:

Du har nu fördjupat dig i Core Web Vitals!

• LCP (Largest Contentful Paint): Mäter den upplevda laddningshastigheten med fokus på det största innehållselementet. Optimera genom att förladda, optimera bilder och minska serverns svarstid.
• FID (First Input Delay): Mäter interaktivitet med fokus på fördröjningen innan webbläsaren reagerar på användarinmatning. Optimera genom att minimera och dela upp JavaScript-uppgifter.
• CLS (Cumulative Layout Shift): Mäter visuell stabilitet. Optimera genom att reservera utrymme för dynamiskt innehåll, ange bilddimensioner och styra hur fonter läses in.

Genom att förstå och förbättra dessa mätvärden bidrar du till en betydligt bättre användarupplevelse!