Vad är Core Web Vitals och varför spelar de roll?
Google mäter användarupplevelsen på din sajt genom tre nyckeltal: LCP, INP och CLS. Dessa värden påverkar både din ranking och hur besökare uppfattar din sajt. En långsam sida tappar besökare. En sida som hoppar runt frustrerar användare. En sida som inte svarar på klick känns trasig.
Det fina är att alla tre går att förbättra med konkreta tekniska åtgärder. Du behöver inte gissa. Du behöver inte hoppas. Du kan mäta, åtgärda och se resultat.
Låt oss gå igenom varje mätvärde och exakt vad du kan göra för att förbättra det.
LCP: Få din huvudsakliga innehåll att ladda snabbt
Largest Contentful Paint mäter hur lång tid det tar innan det största synliga elementet på sidan har renderats. Oftast handlar det om en hero-bild, en stor rubrik eller ett videocover. Google vill se ett LCP under 2,5 sekunder.
Identifiera ditt LCP-element
Första steget är att ta reda på vilket element som faktiskt mäts. Öppna Chrome DevTools, gå till fliken Performance och kör en inspelning medan sidan laddar. Leta efter LCP-markeringen i tidslinjen. Ofta är det inte det element du tror.
På e-handelssajter är det vanligtvis produktbilden. På bloggar är det ofta featured image. På startsidor kan det vara en hero-video eller en stor bakgrundsbild.
Konkreta åtgärder för bättre LCP
Optimera bilder aggressivt. Använd WebP eller AVIF istället för PNG och JPEG. En typisk hero-bild på 500 KB kan krympas till 80 KB utan synlig kvalitetsförlust. Använd responsiva bilder med srcset så att mobila användare inte laddar ner desktop-versioner.
Förladda ditt LCP-element. Lägg till en preload-länk i head-sektionen för den bild eller resurs som utgör ditt LCP. Det signalerar till webbläsaren att denna resurs är kritisk.
Flytta kritisk CSS inline. Om din CSS-fil blockerar renderingen kommer LCP att fördröjas. Extrahera den CSS som behövs för above-the-fold-innehåll och lägg den direkt i HTML-dokumentet.
Undvik lazy loading på LCP-elementet. Lazy loading är bra för bilder längre ner på sidan, men om du lazy loadar din hero-bild saboterar du ditt LCP.
Se över din serverresponstid. Ett snabbt LCP kräver en snabb TTFB (Time to First Byte). Om din server tar 800 ms att svara har du redan förlorat en tredjedel av din budget. Överväg caching, CDN eller en snabbare hostinglösning.
INP: Gör din sajt responsiv för interaktion
Interaction to Next Paint ersatte FID i mars 2024. Medan FID bara mätte den första interaktionen, mäter INP alla interaktioner under hela besöket. Det värsta värdet används. Google vill se ett INP under 200 millisekunder.
Varför INP är svårare att fixa
INP handlar om JavaScript-exekvering. När en användare klickar på en knapp måste webbläsaren köra din JavaScript, uppdatera DOM och måla om skärmen. Om din JavaScript är tung eller blockerar huvudtråden blir sajtens svarstid lidande.
Konkreta åtgärder för bättre INP
Identifiera tunga event handlers. Använd Chrome DevTools Performance-panel för att spela in interaktioner. Leta efter långa tasks (över 50 ms) som triggas av klick eller tangentbordsinput.
Bryt upp långa JavaScript-tasks. Om du har en funktion som tar 300 ms att köra, dela upp den i mindre bitar med yield to main thread. Använd scheduler.yield() eller setTimeout för att ge webbläsaren möjlighet att svara på användarinput mellan arbetsblocken.
Skjut upp icke-kritisk JavaScript. Allt som inte behövs för den omedelbara interaktionen kan laddas senare. Analytics, chatwidgets och tredjepartsskript kan vänta.
Minimera DOM-storlek. En DOM med 5000 noder är svårare att uppdatera än en med 500. Varje interaktion som ändrar DOM blir långsammare ju större trädet är.
Använd content-visibility för off-screen-element. Det låter webbläsaren hoppa över rendering av element som inte syns, vilket frigör resurser för interaktioner.
Vara försiktig med hydration i JavaScript-ramverk. Om du använder React, Vue eller liknande, kan hydration-processen blockera interaktioner. Överväg progressive hydration eller streaming server rendering.
CLS: Stoppa layoutskiftningar som irriterar användare
Cumulative Layout Shift mäter hur mycket sidan hoppar runt medan den laddar. Du har säkert upplevt det själv: du ska klicka på en länk och plötsligt flyttar sig hela sidan så att du klickar fel. Google vill se ett CLS under 0,1.
Varför layoutskiftningar uppstår
Skiftningar sker när element läggs till eller ändrar storlek efter att sidan börjat rendera. Bilder utan dimensioner, annonser som laddar in, typsnitt som byter ut fallback-teckensnitt, dynamiskt innehåll som injiceras.
Konkreta åtgärder för bättre CLS
Ange alltid dimensioner på bilder och video. Lägg till width och height-attribut i HTML. Använd aspect-ratio i CSS för responsiva element. Det låter webbläsaren reservera rätt utrymme innan resursen laddats.
Reservera plats för annonser och embeds. Om du har en annonsplats som är 300x250 pixlar, skapa en container med exakt de måtten. Annonsen får då inte orsaka något skift när den laddar.
Undvik att infoga innehåll ovanför befintligt innehåll. Om du måste lägga till element dynamiskt, gör det längst ner på sidan eller använd transforms istället för att flytta andra element.
Hantera typsnittsladdning korrekt. Använd font-display: swap men var medveten om att det kan orsaka skiftningar om fallback-typsnittet har annorlunda mått. Överväg font-display: optional eller förladda dina typsnitt.
Var försiktig med animationer. Animationer som ändrar storlek eller position kan orsaka CLS om de inte använder transform eller opacity. Undvik att animera width, height, top, left och liknande.
Testa på riktiga enheter. CLS kan variera beroende på enhet och nätverkshastighet. Labdata i Lighthouse visar inte alltid samma problem som verkliga användare upplever. Använd fältdata från Chrome UX Report.
Så prioriterar du åtgärderna
Börja med att mäta. Kör PageSpeed Insights på dina viktigaste sidor. Titta på fältdata, inte bara labdata. Fältdata visar vad riktiga användare upplever.
Priotera sidor med hög trafik. En förbättring på din startsida eller mest besökta produktsidor ger störst effekt.
Ta det värsta mätvärdet först. Om ditt LCP är 4,5 sekunder och ditt CLS är 0,05, fokusera på LCP. En sida som laddar långsamt kommer aldrig att rankas bra oavsett hur stabil layouten är.
Mät efter varje förändring. Core Web Vitals påverkas av många faktorer. En åtgärd som förbättrar LCP kan ibland försämra INP om du inte är försiktig. Verifiera alltid att dina ändringar faktiskt hjälper.
Din nästa åtgärd
Öppna PageSpeed Insights nu. Kör din startsida. Identifiera vilket av de tre värdena som är sämst. Välj en konkret åtgärd från listan ovan och implementera den idag.
Core Web Vitals är inte raketforskning. Det är metodiskt arbete som ger mätbara resultat. Varje tiondels sekund du sparar, varje skiftning du eliminerar, gör din sajt bättre för användarna och mer attraktiv för Google.