Core Web Vitals guide
Core Web Vitals är Googles sätt att mäta upplevelsen på din webb. Här är hur du jobbar med LCP, INP och CLS.
Core Web Vitals är tre mätvärden som Google använder för att bedöma hur snabb och stabil din webbplats är: LCP (laddning av största elementet), INP (interaktivitet) och CLS (visuell stabilitet). Bra värden ger bättre ranking och högre konvertering. Mät med fältdata, inte bara labbtest.
1) Mät rätt först
- Field data (CrUX) visar verklig prestanda.
- Lighthouse är labbdata, bra för debug.
- Följ upp på mall-sidor, inte bara startsidan.
2) LCP – största innehållet
- Optimera hero-bilder (format, dimensioner).
- Fetchpriority på LCP-bilden.
- Critical CSS för första vyn.
3) INP – interaktivitet
- Minska JS och tredjepartsskript.
- Defer/async rätt.
- Undvik långa main-thread tasks.
4) CLS – layoutstabilitet
- Width/height på alla bilder och video.
- Reservera plats för banners och formulär.
- Undvik att injecta element ovanför content.
| Signal | Typisk orsak | Första åtgärd |
|---|---|---|
| LCP | För stor hero, långsam server eller blockerande CSS. | Kapa bildvikt, förladda det viktigaste och minska kritiska resurser. |
| INP | Mycket JavaScript eller tung tredjepartskod. | Defera icke-kritiska script och dela upp tunga interaktioner. |
| CLS | Element som saknar plats eller laddas in sent. | Reservera yta för media, banners och komponenter innan de renderas. |
Vanliga misstag
- Att optimera bara i Lighthouse.
- För stora hero-bilder utan dimensioner.
- För mycket tredjeparts-js.
Vanliga frågor
Vad är skillnaden mellan LCP, INP och CLS?
LCP mäter när det största innehållet visas, INP hur snabbt sidan svarar på interaktioner och CLS hur mycket layouten hoppar under laddning.
Vad påverkar LCP mest?
Stora bilder, långsam serverrespons och render-blocking CSS är vanliga orsaker till dålig LCP.
Vad påverkar INP mest?
För mycket JavaScript, tunga tredjeparts-script och långa tasks på main thread är vanliga orsaker till dålig INP.
Hur förbättrar man CLS snabbt?
Sätt width och height på bilder, reservera plats för komponenter och undvik att lägga in nya element ovanför innehållet efter första renderingen.
Vi optimerar Core Web Vitals
Få bättre laddning, stabilitet och upplevelse – utan att kompromissa med design.