Så förbättrar du din Core Web Vitals

Core Web Vitals är Googles sätt att mäta hur snabb och användarvänlig din webbplats är. Sedan 2021 är de en officiell rankingfaktor. Här förklarar vi vad de betyder och hur du förbättrar dem.

Vad är Core Web Vitals?

Core Web Vitals består av tre mätvärden som tillsammans beskriver användarupplevelsen:

Förbättra LCP (Largest Contentful Paint)

LCP påverkas mest av hur snabbt ditt huvudinnehåll laddas. Vanliga orsaker till dålig LCP:

1. Optimera bilder

• Använd moderna format som WebP eller AVIF
• Komprimera bilder (verktyg: Squoosh, ImageOptim)
• Använd rätt storlek - ladda inte 4000px bilder för 400px visning
• Lägg till loading="lazy" på bilder under folden

<img
  src="bild-800.webp"
  srcset="bild-400.webp 400w, bild-800.webp 800w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Beskrivning"
  width="800"
  height="600"
/>

2. Preload viktiga resurser

Berätta för webbläsaren vilka resurser som är viktigast att ladda först:

<link rel="preload" href="hero-image.webp" as="image" />
<link rel="preload" href="main-font.woff2" as="font" crossorigin />

3. Snabbare server (TTFB)

• Använd caching (Redis, Varnish)
• Överväg en CDN (Cloudflare, Fastly)
• Uppgradera hosting om TTFB > 600ms

Förbättra INP (Interaction to Next Paint)

INP mäter hur snabbt sidan reagerar. Problem uppstår när JavaScript blockerar huvudtråden.

1. Dela upp JavaScript

• Använd code splitting - ladda bara det som behövs
• Defer icke-kritiska scripts med "async" eller "defer"
• Flytta tung beräkning till Web Workers

2. Undvik stora DOM-träd

Fler än 1500 DOM-element gör sidan trög. Använd virtualisering för långa listor.

3. Optimera tredjepartsskript

Analytics, chatbotar och annonser kan förstöra din INP. Ladda dem efter att sidan är interaktiv.

Förbättra CLS (Cumulative Layout Shift)

CLS-problem är ofta enkla att fixa när du vet vad som orsakar dem.

1. Ange alltid bildstorlek

2. Reservera plats för annonser

.ad-container {
  min-height: 250px; /* Samma som annonsens höjd */
}

3. Undvik dynamiskt innehåll ovanför folden

Ladda inte in innehåll som skjuter ner det användaren redan tittar på.

4. Förladdade typsnitt

Font-swap kan orsaka CLS. Använd font-display: optional eller preload:

Verktyg för att mäta Core Web Vitals