Cos'e LCP
Largest Contentful Paint misura il tempo necessario al rendering dell'elemento di contenuto più grande visibile nel viewport iniziale. E uno dei tre Core Web Vitals e indicatore chiave dell'esperienza percepita. Soglia ottima: inferiore a 2.5s, da migliorare 2.5-4s, lenta oltre 4s.
Quali elementi contano per LCP
Immagini (img, background-image), video poster, blocchi di testo (h1, p, div), SVG inline. Il browser identifica dinamicamente l'elemento più grande mentre carica. L'LCP element finale puo cambiare durante il caricamento.
Le 4 fasi che compongono LCP
Time to first byte (server response), Resource load delay (tempo prima che la risorsa LCP inizi a caricare), Resource load duration (download della risorsa), Element render delay (tempo dal completamento download al rendering). Ottimizza ogni fase separatamente.
Ottimizzare immagine hero
Comprimila in formato moderno (WebP, AVIF) con quality 75-85. Dimensionala correttamente con srcset e sizes per servire la giusta variante a ogni dispositivo. Usa fetchpriority="high" sull'immagine LCP per priorità massima. NON usare loading="lazy" sull'hero.
Preload della risorsa LCP
Aggiungi nell'head: link rel="preload" as="image" href="hero.webp" fetchpriority="high". Per font usati nel testo LCP: rel="preload" as="font" type="font/woff2" crossorigin. Questo permette al browser di iniziare il download prima di parsare CSS.
Eliminare render-blocking
CSS e JS sincroni nell'head bloccano il rendering. Inline il critical CSS (sopra-fold). Differisci il resto con media="print" trick. JavaScript con defer (rispetta ordine) o async (esegue appena pronto). Rimuovi librerie inutilizzate.
Hai bisogno di aiuto?
Se vuoi un sito veloce ottimizzato dal team di G Tech Group, scrivici tramite il modulo di contatto.