Le immagini sono di solito i byte più pesanti su una pagina, quindi ottimizzarle è la più grande vittoria per l'LCP. Tre leveraggi: formati moderni, dimensionamento responsive e priorità di caricamento.
AVIF e WebP si comprimono molto più piccoli di JPEG/PNG a parità di qualità (AVIF spesso il 50% più piccolo di JPEG). Servili con un fallback così i browser vecchi funzionano ancora:
Non inviare un'immagine da 2000px a un telefono da 400px. srcset permette al browser di scegliere la dimensione giusta per il dispositivo:
<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 dice al browser quanto larga viene renderizzata l'immagine così può scegliere la sorgente più piccola sufficiente.
fetchpriority="high", loading="eager", e valuta un preload.loading="lazy" così non viene scaricata finché non serve.Mantieni sempre width/height per prevenire il CLS.
Un LCP lento è nella maggior parte dei casi solo un'immagine hero sovradimensionata. Conoscere i formati (AVIF/WebP), srcset per la risoluzione giusta e la priorità corretta — oltre a non fare il lazy-load dell'immagine LCP — è il toolkit pratico che gli intervistatori si aspettano, ed è di solito la singola modifica a più alto impatto su un sito reale.
Una raccolta di domande di colloquio IT con risposte dettagliate — da Junior a Senior.
Dona