Cos'e FCP
First Contentful Paint misura il tempo dal navigation start al primo rendering visibile di un qualsiasi contenuto: testo, immagine, SVG, canvas. E la prima conferma per l'utente che la pagina sta caricando. Soglia buona: inferiore a 1.8 secondi, da migliorare 1.8-3s, lenta oltre 3s.
FCP vs LCP
FCP misura quando appare il primo elemento, LCP misura quando appare l'elemento più grande del viewport. FCP arriva sempre prima di LCP. Un FCP veloce ma LCP lento indica che lo skeleton appare presto ma il contenuto principale tarda.
Cause di FCP lento
TTFB elevato (server lento), risorse render-blocking (CSS e JS nell'head senza async/defer), font web caricati in modo bloccante, troppi reindirizzamenti HTTP, mancanza di compressione (Gzip/Brotli), JavaScript framework pesante caricato sincrono.
Ottimizzazioni efficaci
Inline il critical CSS (above-the-fold) nell'HTML. Differisci CSS non critico con media="print" onload trick o rel="preload". Carica JavaScript con defer o async. Usa font-display: swap nei web font. Riduci dimensione DOM iniziale. Abilita compressione Brotli/Gzip.
Server-side rendering
Le applicazioni SPA pure (React, Vue, Angular client-only) tendono ad avere FCP pessimo: il browser scarica un'HTML vuoto e attende che JS si esegua. Soluzioni: SSR (Next.js, Nuxt), SSG (Gatsby, Astro), pre-rendering, streaming HTML.
Resource hints
Preconnect ai domini critici (font provider, CDN) riduce latenza. dns-prefetch per domini secondari. Preload per risorse critiche (font, hero image, CSS critico). Modulepreload per JS moduli. Usali con parsimonia: troppi hint diventano controproducenti.
Hai bisogno di aiuto?
Se vuoi un sito veloce ottimizzato dal team di G Tech Group, scrivici tramite il modulo di contatto.