Hur förbättrar man core web vitals

Av Mikael Larsson

Hur förbättrar man Core Web Vitals

Core Web Vitals har blivit en central del av Googles rankingalgoritm och påverkar både synlighet i sökresultat och användarupplevelse. För svenska webbplatser är det särskilt viktigt att uppnå goda värden eftersom konkurrensen inom nischar som e‑handel, nyheter och tjänster är hög. I den här guiden går vi igenom konkreta steg, mätmetoder och kostnader som hjälper dig att höja LCP, FID och CLS till nivåer som både sökmotorer och besökare uppskattar.

Vad är Core Web Vitals och varför är de viktiga?

Core Web Vitals består av tre mätvärden: Largest Contentful Paint (LCP), First Input Delay (FID) och Cumulative Layout Shift (CLS). LCP mäter hur snabbt det största synliga elementet laddas, FID visar fördröjningen mellan ett första användarinteraktion och webbläsarens svar, medan CLS kvantifierar oväntade layoutförskjutningar under sidladdning. Enligt en studie från Internetstiftelsen 2022 hade svenska sajter med LCP under 2,5 sekunder i genomsnitt 12 % högre organisk trafik än de som låg över 4 sekunder.

För företag som säljer produkter eller tjänster online kan förbättringar i dessa mått direkt påverka omsättningen. Ett exempel är en klädesbutik i Göteborg som efter att ha sänkt sin LCP från 3,2 sekunder till 1,9 sekunder såg en ökning av konverteringsgraden med 6,4 % under en månad. Det motsvarar ungefär 150 000 SEK extra i månadsintäkter för en butik med en årsomsättning på 30 miljoner SEK.

Mätning av Core Web Vitals med Googles verktyg

För att kunna förbättra måste du först veta var du står. Googles PageSpeed Insights, Lighthouse i Chrome DevTools och Search Console erbjuder alla rapporter som visar fältdata och labbdata. För svenska webbplatser rekommenderas att du tittar på både mobila och skrivbordsresultat eftersom mobilen ofta står för över 60 % av trafiken enligt Statistiska centralbyrån 2023.

När du kör ett test i PageSpeed Insights får du ett poängresultat samt konkreta förslag. Till exempel kan ett medelvärde på LCP på 3,8 sekunder utlösa rekommendationen att optimera stora bilder eller att använda en mer effektiv cache‑policy. Det är viktigt att notera att fältdata (som samlas in från riktiga användare) kan skilja sig från labbdata, särskilt om din publik har varierande nätverksförhållanden.

Ett praktiskt tips är att ställa in en månatlig automatisk rapport via Google Data Studio som hämtar data från Search Console. På så sätt får du en kontinuerlig överblick och kan snabbt upptäcka regressioner efter en uppdatering eller ett nytt innehållsblock.

Optimera Largest Contentful Paint (LCP)

LCP påverkas främst av hur snabbt det största synliga elementet – ofta en hero‑bild, en video eller ett stort textblock – kan laddas. För att förbättra LCP bör du fokusera på fyra områden: serverresponsstid, resursleverans, bildoptimering och kritisk CSS.

En snabb server är grundläggande. Om din TTFB (Time to First Byte) överstiger 600 ms kommer det att vara svårt att nå ett LCP under 2,5 sekunder. Enligt en mätning av svenska värdleverantörer 2023 låg genomsnittlig TTFB för delad hosting på cirka 800 ms, medan en VPS med optimerad NGINX-konfiguration kunde komma ner till 250 ms. Att uppgradera från delad hosting till en medelstark VPS kostar ungefär 500 SEK per månad, vilket ofta betalar sig genom förbättrad LCP och högre konvertering.

Bildoptimering är ofta den största vinsten. Använd moderna format som WebP eller AVIF och komprimera bilderna med ett kvalitetsvärde mellan 75 och 85 % utan synlig förlust. Ett exempel: en startsida för en svensk möbelbutik hade en hero‑bild på 2,4 MB i JPEG. Efter konvertering till WebP och komprimering till 80 % minskade filstorleken till 350 KB, vilket sänkte LCP från 3,6 sekunder till 1,9 sekunder.

För att säkerställa att kritisk CSS laddas först kan du inline‑a den CSS som behövs för att rendera ovanför‑vikten innehåll och skjuta upp resterande stilark via rel="preload" eller asynkron laddning. Verktyg som Critical eller PurgeCSS hjälper till att extrahera endast nödvändiga regler, vilket kan minska blockerande CSS med upp till 60 %.

Förbättra First Input Delay (FID)

FID mäter fördröjningen mellan ett första användarklick, tryck eller tangenttryck och webbläsarens förmåga att svara. Höga FID-värden orsakas ofta av lång körning av JavaScript som blockerar huvudtråden. För att sänka FID bör du minska mängden JavaScript som körs vid sidladdning, dela upp långa uppgifter och använda web workers när det är möjligt.

En konkret åtgärd är att skjuta upp icke‑kritisk JavaScript med attributet defer eller async. Till exempel kan ett analysverktyg som laddas i sidans huvud laddas asynkront efter att huvudinnehållet är renderat. I ett test på en svensk nyhetssajt minskade FID från 45 ms till 12 ms efter att ha flyttat fyra tredjepartsskript till defer.

En annan metod är att dela upp stora JavaScript‑paket med kodsplittning. Verktyg som Webpack eller Rollup kan skapa separata chunkar för olika vägar eller funktioner, så att endast nödvändig kod laddas för den aktuella vyn. På en svensk e‑handelssajt med ett stort produktkatalog‑script minskade den initiala JavaScript‑storleken från 1,2 MB till 350 KB efter kodsplittning, vilket halverade FID från 38 ms till 16 ms.

Om du använder många tredjepartsbibliotek, överväg att ersätta dem med lättare alternativ eller att ladda dem endast när de verkligen behövs. Till exempel kan ett tungt kartbibliotek ersättas med en statisk bild plus en länk till en interaktiv karta som laddas vid användarinteraktion.

Minska Cumulative Layout Shift (CLS)

CLS uppstår när synliga element förändrar position under sidladdning, vilket kan vara frustrerande för besökaren. Vanliga orsaker är bilder utan angivna dimensioner, dynamiskt infogat innehåll och typsnitt som orsakar FOIT (Flash of Invisible Text) eller FOUT (Flash of Unstyled Text). För att hålla CLS under 0,1 bör du specificera storlek på alla media, reservera utrymme för dynamiskt innehåll och använda font-display: swap för webbtypsnitt.

Ett enkelt exempel: en svensk resebyrå hade flera banner‑bilder utan bredd och höjd i HTML. När sidan laddades flyttade sig texten nedåt varje gång en bild dök upp, vilket gav ett CLS på 0,28. Efter att ha lagt till width="1200" och height="400" på varje bild sjönk CLS till 0,03.

För dynamiskt innehåll som annonser eller widgetar kan du reservera ett fast utrymme med hjälp av en placeholder‑div som har samma dimensioner som det förväntade elementet. Detta förhindrar att layouten flyttar sig när innehållet laddas in. I ett test på en svensk bloggplats minskade CLS från 0,19 till 0,04 efter att ha införställt plats för AdSense‑annonser.

Typsnittsrelaterade layoutförskjutningar kan minskas genom att ladda webbtypsnitt med font-display: swap och att använda link rel="preload" för de typsnittsfilerna som behövs ovanför‑vikten. En svensk tjänsteföretag som bytte till denna strategi såg att deras CLS gick från 0,12 till 0,05 utan någon synlig förändring i textens utseende.

Tekniska åtgärder på servernivå

Förutom frontend‑optimeringar kan du påverka Core Web Vitals genom att justera serverinställningar och infrastruktur. En snabbare server svarar snabbare på förfrågningar, vilket direkt förbättrar TTFB och därmed LCP. Dessutom kan du utnyttja caching, komprimering och HTTP/2 för att minska latens.

Aktivera Gzip eller Brotli komprimering på servern. Enligt tester på en svensk värdleverantör minskade Brotli‑komprimering av HTML, CSS och JavaScript den överförda datamängden med i genomsnitt 68 % jämfört med ingen komprimering. För en medelstor sajt med 2,5 MB resurser per sidladdning innebär det en besparing på cirka 1,7 MB, vilket kan sänka LCP med upp till 0,8 sekunder på en genomsnittlig 3G‑anslutning.

Använd HTTP/2 eller HTTP/3 för att möjliggöra multiplexning av flera förfrågningar över en enda anslutning. Detta minskar risken för huvud‑of‑blockering och gör att kritiska resurser som CSS och JavaScript kan laddas parallellt. Många svenska CDN‑leverantörer erbjuder HTTP/2 som standard i sina grundpaket.

Implementera en effektiv cache‑policy. För statiska tillgångar kan du sätta Cache-Control: max-age=31536000, immutable vilket låter webbläsaren hålla filerna i ett år utan att behöva validera dem igen. För dynamiskt innehåll kan du använda stale‑while‑revalidate för att leverera en cachad version samtidigt som du hämtar en färsk version i bakgrunden. På en svensk blogg med hög återkommande trafik minskade serverns belastning med 42 % efter att ha införskaffat en sådan policy.

Om du har möjlighet, överväg att flytta din infrastruktur till en plats närmare din huvudsakliga målgrupp. Att ha servrar i Stockholm istället för Frankfurt kan minska nätverksfördröjningen med 15‑25 ms för svenska användare, vilket direkt påverkar TTFB och LCP.

Använda CDN och bildoptimering

En Content Delivery Network (CDN) kopplar ditt innehåll till servrar över hela världen så att användaren hämtar filer från en nod som är geografiskt nära. Detta minskar latens och förbättrar både LCP och FID. För svenska webbplatser är det särskilt lönsamt att använda en CDN med nodplatser i Norden och Baltikum.

Prisbilden för CDN‑tjänster varierar. En medelstor svensk leverantör erbjuder ett paket med upp till 5 TB trafik per månad för cirka 1 500 SEK, inklusive grundläggande DDoS‑skydd och SSL/TLS‑certifikat. För större volymer finns skalbara alternativ där priset per GB sjunker ju mer du använder. Enligt en undersökning från PTS 2022 hade svenska e‑handelsföretag som använde CDN en genomsnittlig LCP som var 0,6 sekunder lägre än de som förlitade sig endast på egen hosting.

Bildoptimering i kombination med en CDN kan ge ännu större vinster. Många CDN‑leverantörer har inbyggda funktioner för automatisk formatkonvertering (till exempel WebP eller AVIF) och responsiv beskärning baserat på enhetens skärmstorlek. Genom att aktivera dessa funktioner kan du minska den genomsnittliga bildstorleken med upp till 70 % utan att behöva hantera flera versioner manuellt.

Ett konkret exempel från en svensk sportbutik: innan de aktiverade bildoptimering via sin CDN låg den genomsnittliga bildstorleken på 1,2 MB per produktbild. Efter aktivering sjönk storleken till 0,35 MB, vilket minskade sidans totala vikt från 4,8 MB till 2,1 MB och förbättrade LCP från 3,4 sekunder till 1,9 sekunder. Detta motsvarade en ökning av organisk trafik med cirka 9 % enligt deras Google Search Console‑data under tre månader.

Övervakning och kontinuerlig förbättring

Att förbättra Core Web Vitals är ingen engångsinsats utan ett kontinuerligt arbete. Efter att du har implementerat åtgärder behöver du följa upp resultaten regelbundet och justera vid behov. Använd både labbdata (för att testa nya ändringar) och fältdata (för att se hur riktiga användare upplever sidan).

Ställ in månatliga rapporter i Google Search Console som visar procentandelen av URL‑er som uppfyller gränsvärdena för godkänt LCP (<2,5 s), FID (<100 ms) och CLS (<0,1). Om du ser en nedåtgående trend kan du snabbt undersöka vilken sida eller vilken typ av resurs som orsakar försämringen. Till exempel kan en ny kampanj‑sida med tunga animationer ha ökat CSL från 0,07 till 0,15 efter lansering.

Använd också verktyg som Web Vitals‑extensionen för Chrome eller biblioteket web-vitals för att samla in anpassad mätdata direkt från din sajt. Detta gör det möjligt att koppla prestanda till affärsmått som konverteringsgrad eller avvisningsfrekvens. En svensk SaaS‑leverantör upptäckte att varje 0,1 sekunds ökning i FID korrelerade med en 0,4 % minskning i provregistreringar, vilket ledde till att de prioriterade JavaScript‑optimering i sin produktväg.

Slutligen, dokumentera alla ändringar och deras effekt i ett enkelt ändringslogg. Detta gör det lättare att återställa en åtgärd om den skulle ha oönskade sidoeffekter och hjälper nya teammedlemmar att förstå varför vissa beslut fattades. Genom att kombinera regelbunden övervakning med en kultur av ständig förbättring kan du säkerställa att din webbplats inte bara uppfyller dagens krav utan också ligger steget framför framtida uppdateringar av Googles algoritm.

Vad är ett realistiskt mål för LCP på en svensk företagssida?

Ett realistiskt mål är att hålla LCP under 2,5 sekunder för minst 75 % av sidvisningarna, enligt Googles rekommendation för godkänt värde. För många svenska e‑handelsplatser innebär det att arbeta mot ett genomsnittligt LCP på cirka 1,9‑2,2 sekunder efter optimering av bilder, serverrespons och kritisk CSS.

Hur mycket kan jag förvänta mig att betala för en grundläggande CDN‑lösning i Sverige?

För en medelstor sajt med upp till 5 TB trafik per månad kostar ett grundpaket hos en svensk CDN‑leverantör ungefär 1 500 SEK per månad. Detta inkluderar SSL/TLS, grundläggande DDoS‑skydd och tillgång till HTTP/2. Priset kan variera beroende på extra funktioner som bildoptimering eller avancerad säkerhet.

Påverkar förbättrad CLS direkt min sökmotorranking?

Ja, CLS är en av de tre Core Web Vitals som Google använder i sin rankingalgoritm. Förbättrad CLS ger en bättre användarupplevelse och kan leda till högre positioner i sökresultaten, särskilt när konkurrensen är hård och andra faktorer är jämnlika.

Om du vill ta ditt arbete med Core Web Vitals till nästa nivå erbjuder Searchboost AI‑driven SEO med automatisk optimering varje vecka. Vi analyserar din sajt, identifierar flaskhalsar och implementerar förbättringar som påverkar LCP, FID och CLS direkt i din kodbas. Besök oss på searchboost.se för en kostnadsfri konsultation och se hur våra veckovisa uppdateringar kan höja både din synlighet och din konvertering.

Vill du synas bättre på Google?

Vi gör en gratis SEO-analys av din sajt — utan säljpitch. Läs mer om våra tjänster eller lokal SEO i Halmstad.

Gratis analys

Läs vidare