Hur åtgärdar jag dåliga Core Web Vitals-resultat?

Ta först reda på vilket mätvärde som underkänns, på vilken enhet och för vilken grupp av sidor. Rapporten Core Web Vitals i Search Console visar alla tre utifrån verkliga besök i Chrome. Åtgärda sedan orsaken bakom mätvärdet: för LCP handlar det om hur snabbt huvudbilden eller huvudtexten levereras, för INP om långa JavaScript-uppgifter som fördröjer svaren, och för CLS om innehåll som dyker upp utan att utrymme har reserverats för det. Fältdata täcker de senaste 28 dagarna, så utvärdera åtgärden först efter en månad.

Steg 1: ta reda på vad som underkänns

1. Öppna rapporten Core Web Vitals i Search Console och välj Mobil eller Dator. De två bedöms separat.
2. Öppna ett av de listade problemen, till exempel ett LCP-problem på mobil, för att se den berörda URL-gruppen och exempel-URL:er. Hela gruppen får en gemensam status som avgörs av det sämsta mätvärdet.
3. Kör en exempel-URL i PageSpeed Insights för att se fältdata för sidan bredvid ett labbtest som hjälper dig att felsöka.

Labbverktyg som Lighthouse kan inte mäta INP, eftersom ingen interagerar med sidan. De rapporterar i stället Total Blocking Time. För INP är mätning på verkliga användare den pålitliga vägledningen.

Så åtgärdar du en långsam LCP

web.dev:s guide för LCP-optimering delar upp LCP i fyra delar: serverns svarstid, fördröjningen innan huvudresursen börjar laddas, nedladdningstiden och fördröjningen innan den renderas. Börja med den största delen:

• Gör LCP-bilden synlig i den inledande HTML-koden i stället för att lägga in den med JavaScript eller CSS, och ge den fetchpriority="high".
• Lazy-ladda aldrig LCP-bilden.
• Servera den mindre: rätt dimensioner, ett modernt format, komprimering och ett CDN nära besökarna.
• Ta bort renderingsblockerande resurser: mindre stilmallar, inga synkrona skript i <head> och serverrendering av huvudinnehållet.
• Gör serversvaret snabbare: minska antalet omdirigeringar och låt sidorna cachas i kanten av nätverket.

Så åtgärdar du ett dåligt INP

Guiden för INP-optimering delar upp varje interaktion i indatafördröjning, bearbetningstid och presentationsfördröjning:

• Indatafördröjning: minska mängden JavaScript som körs medan sidan laddas, så att huvudtråden är ledig när någon trycker.
• Bearbetningstid: dela upp långa händelsehanterare i mindre uppgifter och lämna över till huvudtråden. Gör den synliga uppdateringen först och skjut upp resten.
• Presentationsfördröjning: håll DOM:en liten, undvik att tvinga fram layoutberäkning genom att läsa stilar direkt efter att du har ändrat dem, och använd content-visibility för långa sidor.

Så åtgärdar du ett högt CLS

Guiden för CLS-optimering listar de vanligaste orsakerna och hur de åtgärdas:

• Bilder och videor utan dimensioner: lägg till attributen width och height, eller en CSS-regel med aspect-ratio.
• Annonser, inbäddningar och iframes: reservera deras utrymme i layouten innan de laddas.
• Innehåll som läggs in ovanför befintligt innehåll: använd en platshållare i rätt storlek, eller lägg in nytt innehåll under det som besökaren läser.
• Webbtypsnitt: förladda de viktigaste så att texten inte flödar om sent.
• Animationer: animera transform i stället för egenskaper som top eller left.

Sidor som kan använda webbläsarens bfcache (back/forward cache) undviker också layoutskift när besökare återvänder till dem.

Steg 3: bekräfta åtgärden

Driftsätt ändringen, öppna sedan problemet i rapporten Core Web Vitals och starta valideringen. Google övervakar gruppen i 28 dagar. Valideringen utlöser ingen ny genomsökning och gör inte processen snabbare, den följer bara om problemet har försvunnit. Eftersom fältdata rullar över 28 dagar bör du räkna med att rapporten förbättras gradvis. Vad varje mätvärde betyder förklaras i Vad betyder LCP, INP och CLS?.

Så hjälper AutoPSEO

AutoPSEO:s Core Web Vitals-rapport visar i diagram ungefär sex månaders veckovisa data från Chrome UX Report för din webbplats eller för en enskild URL, på mobil, dator eller surfplatta. Då ser du veckan då en åtgärd fick effekt, eller veckan då en release gjorde det sämre, utan att behöva vänta tills nästa 28-dagarsfönster har passerat.