SparkCore
Forbedr Core Web Vitals med lettere medier
LCP og CLS hænger ofte på tunge billeder. Mindre filer og faste dimensioner hjælper med det samme.
Kort fortalt
- Godt betyder: LCP på 2,5 sekunder eller hurtigere, INP på 200 millisekunder eller hurtigere, CLS på 0,1 eller lavere.
- Billeder påvirker mest LCP og CLS, mens INP afhænger mere af JavaScript.
- Lazy load aldrig dit første store billede, og giv hvert billede width og height.
Hurtige gevinster
- Komprimer hero-billeder og produktfotos
- Brug moderne formater
- Undgå overdimensionerede uploads
Hvad er Core Web Vitals, og hvilke scorer er gode?
Core Web Vitals måler, hvordan en side føles for besøgende. LCP måler, hvor hurtigt det største synlige element vises. INP måler, hvor hurtigt siden reagerer på klik og tryk. CLS måler, hvor meget layoutet forskyder sig under indlæsningen. En god score er LCP på 2,5 sekunder eller mindre, INP på 200 millisekunder eller mindre og CLS på 0,1 eller lavere. Mål helst med rigtige besøgsdata, ikke kun med en labtest.
- LCP: 2,5 sekunder eller mindre
- INP: 200 millisekunder eller mindre
- CLS: 0,1 eller lavere
Hvordan forbedrer du LCP på WordPress?
På mange sider er LCP-elementet et stort billede, som et hero-billede eller et produktfoto. Gør derfor den fil så lille som muligt, og lever den i et moderne format. Indlæs den ikke lazy: den står med det samme i billedet og skal starte med det samme. En hurtig server og sidecache forkorter ventetiden på den første byte, og også det tæller med i LCP. Upload desuden ikke et billede, der er meget større end det sted, hvor det står.
- Komprimer hero-billedet og produktfotos
- Brug WebP eller AVIF med en fallback
- Sæt ikke lazy loading på det første billede
Hvordan undgår du layoutforskydning (CLS) med billeder?
Layoutforskydning opstår, når browseren ikke kender et billedes størrelse. Teksten springer så nedad, så snart billedet kommer ind. Giv derfor hvert billede en width og en height. Browseren reserverer så den rigtige plads før indlæsningen. WordPress tilføjer normalt selv disse attributter til billeder fra mediebiblioteket. Kontroller dog dine egne blokke, temadele og kode. Reserver også plads til bannere, annoncer og skrifttyper, der indlæses senere.
Hvad kan du gøre ved INP, og hvor hjælper caching?
INP afhænger især af JavaScript. Tunge scripts fra temaer, plugins og trackere holder hovedtråden beskæftiget. Fjern det, du ikke bruger, og udskyd indlæsningen af resten. Billeder spiller en lille rolle her. Caching hjælper især ved LCP. En cachet side er hurtigere klar, og et CDN bringer filer tættere på den besøgende. Mål igen efter hver ændring, og ret kun én ting ad gangen, ellers ved du ikke, hvad der virkede.
Ofte stillede spørgsmål
Som regel LCP, fordi det største element ofte er et billede. Komprimer den fil, vælg et moderne format, og indlæs den ikke lazy. Derefter er det CLS' tur: giv hvert billede width og height.
Nej. Lazy loading er beregnet til billeder under folden. WordPress sætter loading lazy automatisk på billeder. Det første store billede, ofte LCP-elementet, indlæser du netop med det samme, ellers bliver din LCP langsommere.
Billeder er kun en del af historien. Langsom hosting, tunge scripts, ucachede sider og et layout, der forskyder sig, vejer også med. Se i din rapport pr. metrik, hvilket element eller script der er årsagen.