Så påverkar bildstorleken Core Web Vitals

Vilka Core Web Vitals påverkas?

Largest Contentful Paint (LCP) mäter när den största synliga bilden eller textblocket ritas upp. Det kan vara ett framträdande foto, men inte automatiskt logotypen eller största filen. Identifiera elementet först. Googles LCP-guide förklarar upptäckt, hämtning och rendering.

Cumulative Layout Shift (CLS) mäter oväntade förflyttningar. Utan reserverad plats kan bilden skjuta innehåll nedåt när den laddas. CLS-guiden rekommenderar bildmått så att webbläsaren kan reservera rätt proportioner.

Interaction to Next Paint (INP) gäller reaktioner på användarens handlingar. Fotokomprimering lagar inte automatiskt en långsam meny eller tung klickhantering. Undersök dem separat med INP-dokumentationen.

När är ett Core Web Vitals-resultat bra?

Tabellen visar gränserna för bra resultat i Googles Core Web Vitals-vägledning. Alla tre mätvärden måste nå sina mål vid den 75:e percentilen av verkliga besök, med mobil och dator bedömda var för sig. En mindre bild eller ett enstaka bra laboratorietest visar inte att sidan klarar bedömningen. Om INP är problemet bör du undersöka interaktionsfördröjningar i stället för att komprimera fotot igen.

Börja med den synliga huvudbilden

Granska huvudfotot på en produktsida och omslaget eller rubriken som rapporten pekar ut i en artikel. Anteckna filstorlek, pixelmått och visningsstorlek före kopiering för en användbar jämförelse.

Är fotot mycket större än visningsytan kräver, använd storleksverktyget. Jämför sedan WebP via JPG till WebP. Bedöm viktiga produktdetaljer och text, inte enbart sparade kilobyte.

Låt webbläsaren börja ladda huvudbilden tidigt

Använd inte fördröjd laddning för LCP-bilden. Även en liten fil kan visas sent om skript fördröjer upptäckten. Be tema- eller webbutvecklaren kontrollera den verkliga bildbegäran om komprimering hjälper lite.

Använd fördröjd laddning selektivt längre ned. Galleriets första synliga foto behövs direkt; senare bilder kan hämtas när besökaren närmar sig.

Identifiera den uppmätta LCP-bilden på den publicerade sidan. Den ska upptäckas tidigt och inte laddas uppskjutet. En utvecklare kan överväga fetchpriority="high" för just den bilden; att prioritera alla galleribilder lika högt motverkar syftet. Kontrollera nätverksförfrågningarna igen.

Håll layouten stabil

Ange bredd och höjd i koden och bevara proportionerna med responsiv stil. Kontrollera smal telefon och bred dator. Vid avsiktlig beskärning ska visningsytan reserveras konsekvent.

Kontrollera också banner, inbäddningar och typsnitt om rörelsen fortsätter. Ett bildbyte löser inte ett meddelande som infogas ovanför artikeln efter att sidan visats.

HTML-mått som width="1200" och height="800" anger proportionerna. CSS kan ändå visa bilden smalare med max-width: 100% och height: auto. Kontrollera att temat inte lägger på en olämplig fast höjd. Avsiktligt beskurna kort behöver en passande reserverad yta.

Hoppar stycket fortfarande när en mindre bild visas kan reserverat utrymme saknas. Rätta mått eller beskärningsbehållare och testa igen. Omvänt kan en stabil ram innehålla en långsam bild: att reservera plats minskar inte filen.

Verifiera en ändring i taget

1. Anteckna URL, testenhet och problemelement.
2. Ändra en bild eller laddningsinställning.
3. Bekräfta att den publicerade sidan begär den nya filen, inte en gammal cachekopia.
4. Upprepa samma test och granska första vyn.
5. Behåll ändringen om bildkvalitet och mätning stödjer den.

Export är bara en del av prestandan. Fortsätt med PageSpeed-flödet för bilder.