Core Web Vitals är tre mått som Google använder för att bedöma hur snabb och stabil din butik känns för en riktig besökare. För e-handel spelar de dubbel roll: de påverkar både din ranking i sökresultaten och hur många som faktiskt slutför köpet. En trög produktsida tappar besökare innan de ens ser "Lägg i varukorg".

Den korta versionen: Core Web Vitals mäter tre saker — hur snabbt sidan visar sitt viktigaste innehåll (LCP), hur mycket layouten hoppar runt medan den laddar (CLS) och hur snabbt sidan svarar när du klickar eller trycker (INP). Nedan går vi igenom vad var och en betyder, varför just webbshoppar ofta faller på dem, och exakt vad du kan göra åt saken.

Vad Core Web Vitals faktiskt mäter

De tre måtten är enkla att förstå när man översätter dem till vad en kund upplever:

  • LCP (Largest Contentful Paint) — hur lång tid det tar innan sidans största synliga element är på plats. På en produktsida är det oftast produktbilden eller rubriken. Riktvärde: under 2,5 sekunder.
  • CLS (Cumulative Layout Shift) — hur mycket saker på sidan flyttar sig medan den laddar. Du känner igen det när du ska klicka på en knapp och den plötsligt hoppar nedåt. Riktvärde: under 0,1.
  • INP (Interaction to Next Paint) — hur snabbt sidan reagerar när besökaren gör något, till exempel öppnar en filter-meny eller lägger en vara i varukorgen. INP ersatte det gamla FID i mars 2024. Riktvärde: under 200 millisekunder.

Viktigt att veta: Google bedömer dessa på fältdata — alltså mätningar från riktiga besökare (samlade i CrUX-rapporten), inte bara ett labtest. Det betyder att en dyr mobil på dålig 4G räknas lika mycket som din nya bredbandsuppkoppling på kontoret. Och eftersom en stor del av svensk e-handelstrafik är mobil är det just mobilprestandan som avgör.

Varför webbshoppar ofta får dåliga värden

E-handelssidor är av naturen tyngre än en enkel bloggsida. De vanligaste bovarna går igen från butik till butik.

Tunga, ooptimerade produktbilder

Produktbilder är själva kärnan i en webbshop — och samtidigt den vanligaste orsaken till dålig LCP. En bild som laddas upp i 4000 pixlars bredd men visas i 600 pixlar tvingar besökaren att ladda hem flera megabyte i onödan.

Layout som hoppar (CLS)

Klassiska orsaker i en butik:

  • Produktbilder utan angiven höjd och bredd, så texten under hoppar när bilden dyker upp.
  • Banners, cookie-rutor eller kampanjfält som skjuts in högst upp efter att sidan redan visats.
  • Webbfonter som byts ut när de laddat klart och får texten att flytta på sig.

Appar, plugins och taggar som staplar sig

Plattformar som Shopify, WooCommerce och liknande gör det lätt att installera appar — recensioner, chatt, popups, upsell, spårningspixlar. Varje sådan lägger till JavaScript som körs i besökarens webbläsare. Tio appar senare är det just den kod som gör att sidan känns seg när man klickar (dålig INP).

För mycket JavaScript vid start

Många teman laddar allt direkt: bildkaruseller, filter, "nyligen visat", live-sök. Det mesta behövs inte förrän besökaren scrollar eller interagerar, men det blockerar ändå den första visningen.

Konkreta fixar som ger mest effekt

Du behöver inte göra allt på en gång. Börja där e-handel typiskt vinner mest — bilderna och de laddande skripten.

Fixa LCP (snabbare första intryck)

  • Komprimera och skala produktbilder till den storlek de faktiskt visas i. Använd moderna format som WebP eller AVIF.
  • Ladda den stora produktbilden med prioritet (fetchpriority="high") och undvik lazy-loading på just det översta elementet — lazy-loading hör hemma längre ned på sidan.
  • Aktivera CDN så bilder och filer levereras från en server nära besökaren.

Fixa CLS (stabil layout)

  • Sätt alltid width och height (eller CSS aspect-ratio) på produktbilder så att platsen reserveras innan bilden laddat.
  • Reservera plats för banners, cookie-rutan och kampanjfält istället för att skjuta in dem ovanpå innehållet.
  • Använd font-display: swap och förladda din huvudfont så texten inte hoppar.

Fixa INP (snabbare svar på klick)

  • Gå igenom dina appar och plugins. Avinstallera det du inte använder — varje aktiv app är JavaScript som körs hos besökaren.
  • Skjut upp icke-kritiska skript (chatt, recensionswidgets, spårning) så de laddas efter att sidan blivit interaktiv.
  • Ladda tunga funktioner som filter och sök först vid behov istället för direkt vid sidladdning.

Mät på rätt sätt

  • Testa i PageSpeed Insights (visar både fält- och labdata) och i Search Console under "Core Web Vitals" för att se hur riktiga besökare upplever butiken över tid.
  • Testa alltid på mobil, inte bara desktop — det är där problemen syns och där merparten av trafiken finns.
  • Mät på flera sidtyper: startsida, en kategorisida och en produktsida beter sig olika.

Prioritera efter var pengarna finns

Alla sidor är inte lika viktiga. En rimlig ordning för de flesta butiker:

  1. Produktsidorna — här sker köpbesluten och här är LCP mest känslig.
  2. Kategori- och listsidorna — ofta tunga av många bilder och filter.
  3. Kassan — INP är avgörande; ett segt kassaflöde skapar tveksamhet i sista sekunden.

Ett bra arbetssätt är att ta din mest trafikerade produktsida, mäta den, göra bild- och skriptfixarna ovan, och mäta igen. Effekten på LCP brukar synas direkt.

Så vet du var din butik står

Det svåra med Core Web Vitals är inte att förstå måtten — det är att veta vilka av dina hundratals produktsidor som faktiskt drar ner butiken, och varför. EcomStoreAudit granskar precis detta: vi mäter teknik och laddningstider över hela ditt sortiment, hittar de tyngsta bilderna, de skript som bromsar och de sidor som ligger sämst till, och levererar en tydlig rapport plus en rad-för-rad-åtgärdslista i Excel. Vill du se var din butik står idag kan du beställa en analys på ecomstoreaudit.com.