Bilder är oftast de tyngsta byten på en sida, så att optimera dem är den största LCP-vinsten. Tre spakar: moderna format, responsiv dimensionering och laddningsprioritet.
AVIF och WebP komprimerar mycket mindre än JPEG/PNG vid samma kvalitet (AVIF ofta 50 % mindre än JPEG). Servera dem med en fallback så att gamla webbläsare fortfarande fungerar:
Skicka inte en 2000px-bild till en 400px-telefon. srcset låter webbläsaren välja rätt storlek för enheten:
<img
srcset="/p-400.jpg 400w, /p-800.jpg 800w, /p-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
src="/p-800.jpg" width="800" height="600" alt="...">
sizes talar om för webbläsaren hur bred bilden renderas så att den kan välja den minsta tillräckliga källan.
fetchpriority="high", loading="eager", och överväg en preload.loading="lazy" så att den inte hämtas förrän den behövs.Håll alltid width/height för att förhindra CLS.
En långsam LCP är oftast bara en överstor hjältebild. Att känna till format (AVIF/WebP), srcset för rätt upplösning och korrekt prioritet — plus att inte lazy-loada LCP-bilden — är den praktiska verktygslådan intervjuare förväntar sig, och det är oftast den enskilt mest impactfulla ändringen på en riktig sajt.
Ett bibliotek med IT-intervjufrågor och detaljerade svar — från Junior till Senior.
Donera