E-handelsekspert
Hvad er Core Web Vitals? LCP, INP og CLS forklaret
Core Web Vitals måler indlæsning, respons og visuel stabilitet. Se grænserne for LCP, INP og CLS, og hvordan du bruger målingerne på din webshop.
- Forfatter
- Kasper Stück
- Dato
- Læsetid
- 2 min
- Niveau
- Mellem
Core Web Vitals er tre målinger af den oplevelse, brugerne har på en hjemmeside: hvor hurtigt vigtigt indhold vises, hvor hurtigt siden reagerer, og hvor stabilt layoutet er.
For en webshop er målingerne relevante på blandt andet produkt- og kategorisider. De kan hjælpe med at finde tekniske problemer, men erstatter ikke en vurdering af indhold og brugervenlighed.
De tre målinger
| Måling | Hvad beskriver den? | Grænse for god oplevelse |
|---|---|---|
| LCP: Largest Contentful Paint | Tid til det største relevante indholdselement i det synlige område bliver vist | Højst 2,5 sekunder |
| INP: Interaction to Next Paint | Ventetid fra en interaktion til næste synlige opdatering | Højst 200 millisekunder |
| CLS: Cumulative Layout Shift | Omfanget af uventede forskydninger i layoutet | Højst 0,1 |
Grænserne vurderes ved den 75. percentil: mindst 75 % af de målte sidevisninger skal være inden for den gode grænse for den enkelte måling. Google beskriver grænserne i dokumentationen om Core Web Vitals.
Feltdata og laboratorietest
Feltdata stammer fra faktiske brugerbesøg. En laboratorietest indlæser siden under kontrollerede forhold og kan hjælpe med at finde årsager til et problem.
De to typer data kan afvige. En kort test oplever måske ikke det, som sker efter filtrering, åbning af kurven eller indlæsning af anmeldelser. Brug derfor ikke en høj samlet Lighthouse-score som bevis for, at alle kunder får en god oplevelse.
Hvad bør du undersøge?
Ved langsom LCP er store produktbilleder, sen indlæsning og langsomme svar fra serveren oplagte steder at undersøge. Et vigtigt billede i det synlige område bør ikke forsinkes unødigt af lazy loading.
Ved dårlig INP bør du undersøge, om scripts optager browseren, når kunden bruger filtre, vælger varianter eller lægger i kurven. Synlig respons på handlingen er vigtig, også når en bagvedliggende opgave tager tid.
Ved høj CLS skal du se efter billeder, skrifttyper og dynamiske elementer, som flytter indholdet. Reserver plads til elementer, før de bliver indlæst.
Sådan prioriterer du arbejdet
Test repræsentative produkt- og kategorisider på mobil og computer. Notér problemet og den sandsynlige årsag, ret én afgrænset ting, og kontrollér resultatet efterfølgende.
En responsiv hjemmeside skal både reagere hurtigt og være til at betjene. Brug Shopify-SEO-guiden til at sætte målingerne i sammenhæng med den øvrige teknik. Som ekstern CTO kan jeg hjælpe med at prioritere indsatsen efter kundernes problemer og webshoppens behov.
Relaterede artikler
Hvad er CLS? Undgå indhold, der hopper på webshoppen
CLS måler uventede forskydninger i layoutet. Forstå scoren og se, hvordan billeder, skrifttyper og dynamisk indhold påvirker din webshop.
Responsiv hjemmeside: Responsivt webdesign med eksempler
Hvad betyder responsiv? Se hvordan et responsivt website og en responsiv webshop tilpasser sig mobil, tablet og computer, og test dit design med tjeklisten.
