SparkCore
Förbättra Core Web Vitals med lättare media
LCP och CLS hänger ofta ihop med tunga bilder. Mindre filer och fasta mått hjälper direkt.
Kort sagt
- Bra är: LCP 2,5 sekunder eller snabbare, INP 200 millisekunder eller snabbare, CLS 0,1 eller lägre.
- Bilder påverkar framför allt LCP och CLS, INP hänger mer ihop med JavaScript.
- Lazy-ladda aldrig din första stora bild och ge varje bild width och height.
Snabba vinster
- Komprimera hero-bilder och produktfoton
- Använd moderna format
- Undvik för stora uppladdningar
Vad är Core Web Vitals och vilka poäng är bra?
Core Web Vitals mäter hur en sida känns för besökare. LCP mäter hur snabbt det största synliga elementet visas. INP mäter hur snabbt sidan reagerar på klick och tryck. CLS mäter hur mycket layouten hoppar under laddningen. En bra poäng är LCP på 2,5 sekunder eller mindre, INP på 200 millisekunder eller mindre och CLS på 0,1 eller lägre. Mät helst med riktig besöksdata, inte bara med ett labbtest.
- LCP: 2,5 sekunder eller mindre
- INP: 200 millisekunder eller mindre
- CLS: 0,1 eller lägre
Hur förbättrar du LCP på WordPress?
På många sidor är LCP-elementet en stor bild, som en hero-bild eller ett produktfoto. Gör därför den filen så liten som möjligt och leverera den i ett modernt format. Lazy-ladda den inte: den är direkt i bild och ska börja laddas på en gång. En snabb server och sidcache förkortar väntetiden för den första byten, och även det räknas för LCP. Ladda dessutom inte upp en bild som är mycket större än platsen där den visas.
- Komprimera hero-bilden och produktfotona
- Använd WebP eller AVIF med en reservlösning
- Använd inte lazy loading på den första bilden
Hur undviker du layoutförskjutning (CLS) med bilder?
Layoutförskjutning uppstår när webbläsaren inte känner till storleken på en bild. Texten hoppar då nedåt så fort bilden kommer in. Ge därför varje bild en width och en height. Webbläsaren reserverar då rätt utrymme innan laddningen. WordPress lägger oftast själv till dessa attribut på bilder från mediabiblioteket. Kontrollera dock dina egna block, temadelar och kod. Reservera utrymme även för banners, annonser och typsnitt som laddas senare.
Vad kan du göra åt INP och var hjälper cachning?
INP beror framför allt på JavaScript. Tunga skript från teman, plugin och spårare håller huvudtråden sysselsatt. Ta bort det du inte använder och skjut upp laddningen av resten. Bilder spelar en liten roll här. Cachning hjälper framför allt för LCP. En cachad sida är klar snabbare, och ett CDN för filerna närmare besökaren. Mät om efter varje ändring och justera en sak i taget, annars vet du inte vad som fungerade.
Vanliga frågor
Oftast LCP, eftersom det största elementet ofta är en bild. Komprimera den filen, välj ett modernt format och lazy-ladda den inte. Därefter är det CLS tur: ge varje bild width och height.
Nej. Lazy loading är avsett för bilder under vikningen. WordPress sätter automatiskt loading lazy på bilder. Den första stora bilden, ofta LCP-elementet, laddar du i stället direkt, annars blir din LCP långsammare.
Bilder är bara en del av historien. Långsam hosting, tunga skript, ocachade sidor och en layout som hoppar spelar också in. Titta i din rapport per mätvärde vilket element eller skript som är orsaken.