Core Web Vitals for webshops: LCP, INP og CLS forklaret

Hvad LCP, INP og CLS måler, grænserne for god og dårlig ved 75. percentil, labdata vs. feltdata og de typiske rettelser i Shopify- og WooCommerce-webshops.

FixReports’ redaktion12 min. læsetid

Core Web Vitals er tre målinger fra Google, der beskriver, hvordan rigtige besøgende oplever en side: Largest Contentful Paint (LCP) for indlæsning, Interaction to Next Paint (INP) for reaktionsevne og Cumulative Layout Shift (CLS) for visuel stabilitet. En side består, når mindst 75 % af besøgene ligger i det »gode« interval: LCP inden for 2,5 sekunder, INP inden for 200 millisekunder og CLS på 0,1 eller mindre, målt hver for sig på mobil og desktop. I webshops skyldes dårlige resultater som regel store eller lazy-loadede hero- og produktbilleder, scripts fra apps og tracking, webfonte samt bannere eller anmeldelseswidgets, der skubber indholdet ned, efter at siden er vist.

Det vigtigste i korte træk

Hvad er grænseværdierne for Core Web Vitals?

En side opfylder Core Web Vitals, når 75. percentil af dens sideindlæsninger ligger i det gode interval for alle tre målinger.

MålingHvad den målerGodSkal forbedresDårlig
LCPTiden, indtil det største billede, den største video eller den største tekstblok i viewporten er renderet2,5 s eller mindreOver 2,5 s op til 4,0 sOver 4,0 s
INPTiden fra et klik, et tryk eller et tastetryk, til næste frame er tegnet200 ms eller mindreOver 200 ms op til 500 msOver 500 ms
CLSHvor meget synligt indhold flytter sig uventet0,1 eller mindreOver 0,1 op til 0,25Over 0,25

Grænseværdierne stammer fra web.dev’s vejledninger om LCP (åbner i en ny fane), INP (åbner i en ny fane) og CLS (åbner i en ny fane), som de så ud i oktober 2026.

At der måles ved 75. percentil, betyder, at resultatet afspejler de fleste besøgende, ikke kun de hurtigste, og Google opdeler mobil og desktop (åbner i en ny fane). PageSpeed Insights godkender en side, når alle tre målinger er gode; uden nok INP-data vurderer værktøjet kun LCP og CLS (PageSpeed Insights-dokumentationen (åbner i en ny fane)). Google oplyser, at stabile Core Web Vitals ikke ændres mere end én gang om året.

I en webshop er LCP-elementet ofte hero-banneret eller det primære produktbillede, og derfor betyder håndteringen af billeder så meget.

Hvorfor afløste INP FID i marts 2024?

INP afløste FID, fordi FID kun målte den første interaktion og kun en del af dens forsinkelse, mens INP ser på interaktioner gennem hele besøget.

Google annoncerede i maj 2023, at INP ville blive en Core Web Vital, og skiftet trådte i kraft den 12. marts 2024 (åbner i en ny fane). FID rapporterede kun den første interaktion og kun dens inputforsinkelse, ikke den tid, der gik med at køre event handlers eller tegne resultatet. INP registrerer klik, tryk og tastetryk under hele besøget og rapporterer den længste interaktion, idet ekstreme afvigere ignoreres; scroll og hover tæller ikke med. Brugere af API’erne til CrUX og PageSpeed Insights havde frist til 9. september 2024 til at skifte (web.dev (åbner i en ny fane)).

Hver interaktion består af tre dele: inputforsinkelse (ventetid på travle scripts), behandlingstid (kørsel af handlers) og præsentationsforsinkelse (tegning af næste frame) (web.dev (åbner i en ny fane)).

I en webshop er de interaktioner variantvælgeren, knapperne til antal, »Læg i kurv«, kurvskuffen, filtre og menuer. En side kunne bestå FID på et hurtigt første tryk og alligevel føles langsom, når nogen senere åbner filtrene.

Hvad er forskellen på labdata og feltdata?

Labdata kommer fra én test under faste forhold, mens feltdata indsamles fra rigtige besøgende over tid, og Google anbefaler at bruge feltdata til at afgøre, hvad du skal rette først (web.dev (åbner i en ny fane)).

LabdataFeltdata
KildeÉn simuleret sideindlæsning (Lighthouse, Chrome DevTools, lab-afsnittet i PageSpeed Insights)Rigtige besøgende i Chrome (Chrome UX Report) eller din egen måling af rigtige brugere (RUM)
ForholdFast enhed og netværk. Lighthouses standardtest for mobil (åbner i en ny fane) bruger »Slow 4G« (150 ms round trip, 1,6 Mbps download) og en 4x CPU-nedsættelseDe enheder, netværk og steder, dine besøgende nu engang har
INPMåles ikke ved en almindelig sideindlæsning. Total Blocking Time (TBT) er en grov stedfortræderMåles ud fra rigtige interaktioner
Bedst tilFejlsøgning og kontrol af en ændring før udgivelseAt vide, hvad de besøgende rent faktisk får

TBT lægger den del af hver opgave på main thread, der overstiger 50 ms, sammen; web.dev foreslår under 200 ms på gennemsnitlig mobil hardware, men siger, at TBT ikke kan erstatte INP (web.dev (åbner i en ny fane)).

Tre detaljer ved Chrome UX Report (CrUX) er vigtige for webshops:

  • Det er et løbende gennemsnit over 28 dage (åbner i en ny fane), der opdateres dagligt.
  • Det dækker Chrome på desktop og Android for brugere, der opfylder Chromes betingelser for rapportering. Chrome på iOS er udeladt, så en webshop med mest iPhone-kunder kun ser feltdata fra en del af sit publikum (metode (åbner i en ny fane)).
  • Sider og origins vises kun, når de er offentligt synlige og populære nok, så en webshop med lidt trafik har måske kun data på origin-niveau eller slet ingen.

Shopifys dashboard for webperformance (åbner i en ny fane) rapporterer også LCP, INP og CLS fra rigtige brugere ved 75. percentil, men over 30 dage i stedet for 28, så forvent visse forskelle fra CrUX.

Hvad gør LCP langsom på webshoppens sider?

LCP er som regel langsom i webshops, fordi hovedbilledet er for tungt, bliver opdaget sent eller bevidst forsinkes af lazy loading eller en animation.

  • Lazy loading af LCP-billedet. web.dev siger, at du aldrig skal gøre det (web.dev (åbner i en ny fane)). Deres analyse af WordPress-sider viste langsommere LCP ved 75. percentil på sites med native lazy loading, og når billeder over folden ikke blev lazy-loadet, forsvandt forringelsen (web.dev (åbner i en ny fane)).
  • Et billede, der findes sent. Et hero-billede, der er sat som CSS-background-image eller indsat af et slider-script, er ikke med i den HTML, browseren scanner først. Shopify fraråder CSS-baggrunde til hero-indhold og fade-in-effekter på LCP-billedet (Shopify (åbner i en ny fane)).
  • Lav prioritet. Billeder indlæses med lav prioritet, indtil layoutet er færdigt, så Shopify anbefaler fetchpriority="high" på LCP-billedet (Shopify (åbner i en ny fane)). web.dev bemærker, at det bliver mindre nyttigt, hvis det sættes på mere end et eller to billeder (web.dev (åbner i en ny fane)).
  • CSS og scripts, der blokerer renderingen. Store stylesheets og synkrone scripts i <head> forsinker renderingen, selv efter at billedet er kommet (web.dev (åbner i en ny fane)).
  • Filstørrelse og fonte. Brug moderne formater, srcset og sizes samt et CDN. Til webfonte skal du bruge en anden font-display-værdi end auto eller block.
<!-- Main product image: real src in the HTML, eager, high priority -->
<img src="/images/linen-shirt-1200.webp"
     srcset="/images/linen-shirt-600.webp 600w, /images/linen-shirt-1200.webp 1200w"
     sizes="(min-width: 990px) 50vw, 100vw"
     width="1200" height="1500"
     fetchpriority="high"
     alt="Natural linen shirt, front view">

<!-- Gallery images below the first screen: lazy -->
<img src="/images/linen-shirt-back-600.webp" loading="lazy"
     width="600" height="750" alt="Natural linen shirt, back view">

Hvad gør INP langsom på webshoppens sider?

Langsom INP i webshops betyder som regel for meget JavaScript på main thread, meget af det fra apps, tracking-tags og temafunktioner, så tryk må vente.

Hvis en kunde trykker på »Læg i kurv«, mens scripts til anmeldelser, chat og analyse stadig kører, må trykket vente. En variantvælger, der genrenderer hele produktformularen, øger behandlingstiden. Store megamenuer og kollektionsgitre med mange farveprøver øger præsentationsforsinkelsen.

web.dev anbefaler at dele lange opgaver op og give main thread plads ind imellem (yield), at opdatere skærmen først og udsætte resten og at holde DOM’en mindre (web.dev (åbner i en ny fane)). Shopify tilføjer trin, der er specifikke for webshops: gennemgå hver app, hver pixel og hvert temascript, udskyd det, der ikke er kritisk, indlæs funktioner ved interaktion, og slå anti-flicker-snippets til A/B-test fra, når der ikke kører nogen test (Shopify (åbner i en ny fane)).

Hvad skaber layoutskift på produkt- og kollektionssider?

Layoutskift i webshops kommer for det meste fra indhold, der dukker op eller ændrer størrelse efter den første rendering: billeder uden dimensioner, meddelelses- og cookiebjælker, anmeldelseswidgets, app-blokke og skift af fonte.

web.dev nævner som de almindelige årsager medier med ukendte dimensioner, indhold, der indsættes over eksisterende indhold, widgets fra tredjeparter, der selv ændrer størrelse, og webfonte, der har en anden størrelse end deres reservefont (web.dev (åbner i en ny fane)). I webshops betyder det en bjælke om gratis fragt, der indsættes øverst, stjernebedømmelser, der indlæses efter titlen, beskeder om afbetaling under prisen og karruseller med anbefalinger. Shopify bemærker, at indhold i pop op-vinduer også kan give skift (Shopify (åbner i en ny fane)).

Skift inden for 500 ms efter en brugers input tæller ikke, men skift under scroll gør, og labværktøjer overser dem ofte (web.dev (åbner i en ny fane)). Giv billeder width og height eller en CSS-aspect-ratio, reservér plads til widgets, vis bannere som overlays, reducér skift ved fontbytte med size-adjust, og animér med transform i stedet for top eller left.

/* Reserve space for a reviews summary that loads after the page */
.product-reviews-summary { min-height: 24px; }

/* Keep product cards from jumping while images load */
.product-card img { width: 100%; height: auto; aspect-ratio: 4 / 5; }

Hvordan forbedrer du Core Web Vitals i Shopify?

I Shopify kommer de fleste forbedringer fra at indlæse det første billede med det samme og med høj prioritet, skære ned på app-scripts og tjekke resultatet i adminpanelets rapporter om webperformance.

Tjek dataene i dit adminpanel

En oversigt vises på siden Onlinebutik > Temaer (Online Store > Themes), og fulde rapporter om LCP, INP og CLS findes under Analyse > Rapporter (Analytics > Reports). Dataene kan være forsinket op til 36 timer, og privat tilstand skal være slået fra (Shopify Help Center (åbner i en ny fane)).

Styr indlæsningen af billeder i Liquid

Filteret image_tag lazy-loader billeder i sektioner længere nede på siden, medmindre du angiver preload (reference for image_tag (åbner i en ny fane)): eager for sektion 1 til 3, lazy fra sektion 4. Da section.index er nil i temaeditoren, skal du teste med > 3 i stedet for <= 3:

{%- if section.index == 1 -%}
  {{ section.settings.image | image_url: width: 1600 | image_tag: loading: 'eager', fetchpriority: 'high', widths: '600, 900, 1200, 1600', sizes: '100vw' }}
{%- elsif section.index > 3 -%}
  {{ section.settings.image | image_url: width: 1600 | image_tag: loading: 'lazy', sizes: '100vw' }}
{%- else -%}
  {{ section.settings.image | image_url: width: 1600 | image_tag: sizes: '100vw' }}
{%- endif -%}

I produktgitre foreslår Shopify kun at indlæse de første par kort med det samme (f.eks. forloop.index <= 4) (Shopify (åbner i en ny fane)). Brug preload: true sparsomt; Shopify anbefaler kun at preloade en eller to ressourcer, der opdages sent.

Fjern det, apps efterlader

Slå ubrugte app-indlejringer fra under Onlinebutik > Rediger tema > App-indlejringer (Online Store > Edit theme > App embeds) (Shopify Help Center (åbner i en ny fane)). Når du afinstallerer en app, fjernes dens app-blokke, men apps, der har redigeret temafilerne direkte, kan efterlade »spøgelseskode« (ghost code), som ifølge Shopify kan give problemer med kvalitet og performance (Shopify (åbner i en ny fane)). Shopify oplyser også, at script tags holder op med at køre den 1. marts 2027. Til fonte anbefaler Shopify sit eget CDN eller systemfonte frem for eksterne fonttjenester (Shopify (åbner i en ny fane)).

Hvordan forbedrer du Core Web Vitals i WooCommerce?

I WooCommerce skal du sikre dig, at plugins ikke tilsidesætter WordPress’ prioritering af billeder, cache alt undtagen kurv og kasse og fjerne scripts, der indlæses overalt uden grund.

  • Behold cores håndtering af billeder. Siden WordPress 6.3 (udgivet 8. august 2023) tilføjer core fetchpriority="high" til det sandsynlige LCP-billede (som standard mindst 50.000 kvadratpixel) og springer lazy loading over for de første tre indholdsbilleder (Make WordPress Core (åbner i en ny fane)). Hvis et optimeringsplugin tilføjer sin egen lazy loading, så tjek, at det udelader hero-billedet og det primære produktbillede.
  • Cache sider, ikke kurve. WooCommerces vejledning anbefaler sidecache på serveren eller via et plugin samt et CDN, mens kurv- og kassesiderne holdes ude af cachen (WooCommerce developer docs (åbner i en ny fane)).
  • Tjek cart fragments. Siden WooCommerce 7.8 indlæses scriptet til cart fragments kun der, hvor der er en Cart-widget, men nogle temaer har hardkodet den widget. Mini-Cart-blokken bruger ikke cart fragments (WooCommerce developer blog (åbner i en ny fane)).
  • Find tunge plugins. WooCommerce foreslår Query Monitor til at finde langsomme plugins og at udskyde JavaScript, der ikke er kritisk.

Hvis dit layout viser mere end tre billeder over folden, kan du hæve WordPress’ grænse:

// functions.php: skip lazy loading for the first 4 content images (default is 3)
add_filter( 'wp_omit_loading_attr_threshold', function () {
    return 4;
} );

Hvor lang tid går der, før rettelserne kan ses?

Labtests viser effekten af en rettelse med det samme, men feltdata skal bruge op til omkring fire uger på at afspejle den fuldt ud, fordi CrUX tager gennemsnittet af de foregående 28 dage.

Kør labtesten flere gange før og efter en ændring, fordi de enkelte kørsler varierer, og følg derefter felttallene i PageSpeed Insights, rapporten om Core Web Vitals i Search Console eller Shopifys rapporter. En gratis scanning giver et første indtryk på omkring et minut. Vores Performancerapport kører en drosslet labtest på mobil (slow 4G, 4x CPU) og tilføjer feltdata fra Chrome UX Report, herunder INP, når Google har nok data om din webshop.

Ofte stillede spørgsmål

Påvirker Core Web Vitals placeringen i Google?

Google oplyser, at Core Web Vitals bruges af Googles rangeringssystemer, men at gode resultater ikke garanterer topplaceringer, og at Google stadig viser det mest relevante indhold, selv når sideoplevelsen er dårlig (Google Search Central (åbner i en ny fane)).

Hvorfor viser PageSpeed Insights ingen feltdata for min webshop?

CrUX omfatter kun sider og origins, der er offentligt synlige og har nok kvalificerede besøgende i Chrome. En webshop med lidt trafik har måske kun data på origin-niveau eller slet ingen, så støt dig til labtests og din platforms egne rapporter.

Skal jeg have en Lighthouse-score på 90 eller mere for at bestå?

Nej. Lighthouses performancescore er et labresultat, mens vurderingen af Core Web Vitals bruger feltdata ved 75. percentil, så en side kan bestå med en beskeden Lighthouse-score og dumpe med en høj.

Skal jeg lazy-loade alle produktbilleder?

Nej. Lazy-load billeder under den første skærm, men indlæs hero-billedet og det primære produktbillede med det samme, med fetchpriority="high" på et af dem.

Hvorfor er mine resultater på mobil dårligere end på desktop?

Google måler mobil og desktop hver for sig, og telefoner har langsommere processorer og netværk. Lighthouses mobiltest simulerer det med en Slow 4G-profil og en 4x CPU-nedsættelse.

Kilder

Alle guides