---
title: "Cos’è l’FCP e come funziona"
url: https://www.conseolente.it/cos-e-fcp-come-funziona/
aggiornato: 2026-11-08
descrizione: "Scopri cos'è l'FCP, come si calcola, le soglie di valutazione e come migliorare il First Contentful Paint del tuo sito."
---

# Cos’è l’FCP e come funziona

> Versione per assistenti AI. Pagina originale: [Cos’è l’FCP e come funziona](https://www.conseolente.it/cos-e-fcp-come-funziona/?via=md)

L’FCP misura il tempo che il browser impiega a mostrare il primo elemento di contenuto della pagina (testo, immagini o SVG) dopo l’avvio del caricamento, ed è uno dei segnali diagnostici che accompagnano [il percorso di ottimizzazione dei Core Web Vitals](https://www.conseolente.it/consulente/ottimizzazione-core-web-vitals/).

## Cosa sapere sull’FCP

- **Cosa misura:** il tempo dall’inizio della navigazione alla comparsa del primo elemento visibile del DOM, che sia testo, immagine o SVG.

- **Soglie mobile:** buono fino a 1,8 secondi, da migliorare tra 1,8 e 3 secondi, scarso oltre i 3 secondi.

- **Come si calcola:** si valuta al 75° percentile dei caricamenti reali, segmentato per dispositivo.

- **Rapporto con i Core Web Vitals:** è una metrica diagnostica, non uno dei tre Core Web Vital ufficiali, ma precede sempre l’LCP.

- **Come si misura:** con strumenti di laboratorio come Lighthouse e Chrome DevTools, o di campo come PageSpeed Insights e Search Console.

- **Come si migliora:** riducendo il TTFB, eliminando le risorse che bloccano il rendering e ottimizzando il caricamento dei font.

## Cosa misura l’FCP e cosa conta come contenuto

L’FCP registra il momento in cui il browser dipinge sullo schermo il primo pixel di contenuto, non l’intera pagina. Contano come contenuto il testo, le immagini (incluse quelle di sfondo), gli elementi <svg> e i <canvas> non bianchi; tutto ciò che si trova dentro un iframe resta fuori dal calcolo, perché il browser lo tratta come un documento separato.

Questa distinzione serve a capire un errore comune: una pagina può avere un FCP ottimo e sembrare comunque vuota, perché il primo elemento dipinto è magari solo un titolo in alto, mentre l’immagine principale arriva dopo. Per quello esiste una metrica distinta che misura il blocco di contenuto più grande, non il primo in assoluto.

Un FCP alto è spesso il primo segnale di un problema a monte, come un server lento o troppe risorse che bloccano il rendering, e si riflette su tutte le metriche successive, LCP compreso.

## L’FCP è un Core Web Vital?

La risposta breve è no. Google classifica l’FCP come indicatore diagnostico supplementare, mentre i tre Core Web Vital ufficiali restano LCP per il caricamento, INP per la reattività e CLS per la stabilità visiva. L’FCP non entra nel calcolo del punteggio che Google usa come segnale di posizionamento, ma condiziona comunque il risultato: l’LCP non può mai avvenire prima dell’FCP, quindi un FCP lento alza inevitabilmente il tempo minimo a cui l’LCP può arrivare.

Per la definizione dei tre Core Web Vital, le rispettive soglie e il modo in cui Google li usa nel ranking vedi [cosa sono i Core Web Vitals e come funzionano](https://www.conseolente.it/cosa-sono-core-web-vitals-come-funzionano/).

![Semaforo verde arancione rosso che rappresenta le fasce di punteggio FCP](https://www.conseolente.it/wp-content/uploads/2026/11/cos-e-fcp-come-funziona-1-1024x683.webp)

Le tre fasce di valutazione dell’FCP, verde, arancione e rosso, cambiano soglia tra mobile e test di laboratorio su desktop.

## Soglie di punteggio dell’FCP, mobile e desktop

Su mobile un FCP buono sta tra 0 e 1,8 secondi, da migliorare tra 1,8 e 3 secondi, scarso oltre i 3 secondi. Questo valore si legge al 75° percentile dei caricamenti di pagina, cioè la soglia sotto la quale ricade almeno il 75% delle visite reali: un sito può avere un FCP medio di 1,2 secondi e un 75° percentile di 2,1, perché basta una parte di utenti con connessione lenta per spostare il dato che conta.

| Fascia | Mobile (campo) | Desktop (Lighthouse, laboratorio) |
| --- | --- | --- |
| Buono | da 0 a 1,8 s | da 0 a 0,9 s |
| Da migliorare | da 1,8 a 3 s | da 0,9 a 1,6 s |
| Scarso | oltre 3 s | oltre 1,6 s |

L’iniziativa Web Vitals, basata su dati di campo, consiglia la stessa soglia (1,8 e 3 secondi) indipendentemente dal dispositivo, mentre Lighthouse, strumento di laboratorio, applica soglie più severe sul desktop perché simula un hardware più veloce: un FCP identico pesa quindi di più su computer che su mobile. Nella [documentazione di Chrome for Developers](https://developer.chrome.com/docs/lighthouse/performance/first-contentful-paint/) si legge che i siti al 99° percentile dell’archivio HTTP mostrano un FCP di circa 1,2 secondi e ottengono un punteggio Lighthouse di 99.

Il punteggio complessivo di PageSpeed Insights è una media ponderata di più metriche, quindi l’FCP va sempre controllato come voce a sé nel dettaglio del report.

## FCP e LCP: in cosa differiscono

L’FCP segna quando compare il primo elemento, l’LCP quando compare l’elemento più grande e visibile, spesso un’immagine hero o un blocco di testo principale. Sulla stessa pagina l’FCP arriva sempre prima o insieme all’LCP, mai dopo: è un vincolo tecnico, non una coincidenza, perché l’LCP si misura a partire dagli stessi elementi di rendering che generano l’FCP.

| Aspetto | FCP | LCP |
| --- | --- | --- |
| Cosa misura | comparsa del primo contenuto | comparsa del contenuto più grande |
| Soglia buona (mobile) | ≤ 1,8 s | ≤ 2,5 s |
| È un Core Web Vital | no, diagnostica | sì |
| Ordine temporale | sempre uguale o precedente | sempre uguale o successivo |

Capita spesso che un intervento che abbassa l’FCP, per esempio inlineare molto CSS critico per far comparire subito il primo testo, appesantisca il thread principale del browser e peggiori l’INP, perché il browser deve interpretare quel CSS prima di poter rispondere all’interazione dell’utente. Una soluzione è inlineare solo il CSS che serve davvero sopra la piega e rimandare il resto, per non spostare il problema da una metrica all’altra. Per i dettagli di soglie, calcolo e peso nel ranking dei tre Core Web Vital, incluso l’LCP, rimando a [come funzionano i Core Web Vitals](https://www.conseolente.it/cosa-sono-core-web-vitals-come-funzionano/).

## Come si calcola l’FCP

L’FCP si calcola misurando, per ogni caricamento di pagina, il tempo che intercorre tra l’avvio della navigazione e il primo evento di tipo _paint_ che contiene un elemento di contenuto: il browser espone questo dato tramite la Paint Timing API, con una voce chiamata first-contentful-paint.

Il valore che Google usa per decidere se una pagina è in fascia buona, da migliorare o scarsa è il 75° percentile su tutti i caricamenti registrati in un certo periodo, calcolato separatamente per mobile e per desktop. Una pagina passa la fascia buona solo se almeno il 75% delle visite reali resta sotto 1,8 secondi.

Ci sono casi limite che il calcolo gestisce in modo diverso dall’intuizione: una pagina caricata in una scheda in background non deve contribuire al dato, perché l’utente non l’ha vista; una pagina ripristinata dalla cache di navigazione avanti-indietro va misurata come una nuova visita, anche se tecnicamente non genera un nuovo evento first-contentful-paint; una pagina pre-renderizzata misura l’FCP a partire dal momento in cui diventa visibile, non dall’inizio della navigazione originale. Questi dettagli emergono da un articolo tecnico su web.dev che descrive le differenze tra la metrica e l’API che la calcola.

![Schermo con report di performance che mostra dati di laboratorio e dati di campo affiancati](https://www.conseolente.it/wp-content/uploads/2026/11/cos-e-fcp-come-funziona-2-1024x683.webp)

I dati di laboratorio e quelli di campo rispondono a due domande diverse sull’FCP della stessa pagina.

## Come misurare l’FCP

L’FCP si misura con due tipi di strumenti, e la differenza tra i due conta più del nome dello strumento: quelli di laboratorio simulano una visita in condizioni controllate, quelli di campo raccolgono i tempi reali degli utenti che hanno visitato il sito.

Lighthouse e Chrome DevTools fanno parte del primo gruppo: aprono la pagina in un ambiente simulato e restituiscono un FCP ripetibile, che permette di confrontare due versioni della stessa pagina prima e dopo una modifica. PageSpeed Insights, il CrUX e il report sui Segnali web essenziali in Search Console fanno parte del secondo: mostrano l’FCP così come lo hanno vissuto davvero gli utenti, su dispositivi e connessioni reali, nelle ultime settimane.

Per leggere l’FCP di un sito da zero si può seguire questa procedura:

1. Apro PageSpeed Insights e inserisco l’URL della pagina da controllare, non solo l’homepage.

2. Controllo prima i dati di campo, in alto nel report: se mancano, significa che la pagina non ha abbastanza traffico reale per quel periodo.

3. Scorro ai dati di laboratorio e leggo il valore FCP accanto a LCP, TBT e CLS, per capire se il problema è solo sul primo contenuto o su tutta la pagina.

4. Apro la sezione diagnostica e cerco le voci su risorse che bloccano il rendering e caricamento dei font: sono quasi sempre la causa diretta di un FCP alto.

5. Se voglio un dato aggregato su più pagine, passo al report Segnali web essenziali in Search Console, filtrato per URL con stato scarso.

Per chi scrive codice direttamente, la libreria JavaScript web-vitals espone la funzione onFCP, che registra il tempo non appena l’evento è disponibile e gestisce da sola i casi limite di bfcache e prerendering descritti sopra.

## Come migliorare l’FCP

Il primo intervento è quasi sempre sul server: ridurre il TTFB con un hosting più veloce, una cache lato server o una CDN, perché finché il browser aspetta la prima risposta nessun rendering può partire.

Il secondo intervento riguarda le risorse che bloccano il rendering: CSS e JavaScript caricati nell’head senza defer o async fermano il browser prima che possa disegnare qualunque cosa. Inlineare solo il CSS critico sopra la piega e rimandare il resto, oltre a rimuovere il CSS e il JavaScript non usati, riduce il peso che il browser deve elaborare prima del primo contenuto.

Il terzo intervento riguarda i font: se il testo resta invisibile finché il font web non è scaricato, l’FCP si allunga per un dettaglio tipografico. La proprietà font-display: swap mostra subito un font di sistema e lo sostituisce quando il font scelto è pronto, mentre un preconnect verso l’origine del font riduce il tempo di connessione.

Il quarto intervento riguarda le immagini sopra la piega: comprimerle e usare formati moderni abbassa il peso dei byte che il browser deve scaricare prima di poter dipingere il primo elemento, soprattutto quando quell’elemento è proprio un’immagine.

Una pratica che sconsiglio è ottimizzare l’FCP isolandolo dal resto: un intervento che sposta il primo contenuto prima ma aumenta il JavaScript eseguito subito dopo può migliorare questo numero e peggiorare l’INP. La mia regola è controllare sempre le quattro metriche insieme nello stesso report, prima e dopo ogni modifica.

## Casi limite da conoscere prima di interpretare il dato

Un FCP basso misura solo il primo pixel di contenuto: l’interattività e la stabilità del layout restano affidate rispettivamente a INP e CLS.

Se il sito usa iframe cross-origin, per esempio un modulo di pagamento o una mappa incorporata, l’FCP calcolato dal frame principale può non includere i tempi di rendering di quell’iframe, a meno che il frame secondario non segnali il proprio tempo al frame principale.

Se la pagina viene aperta in una scheda in background, per esempio da un link aperto in una nuova scheda non attiva, quella visita non deve contare nel calcolo dell’FCP: il dato ha senso solo per le visite rimaste in primo piano per tutta la durata del caricamento.

## Domande frequenti sull’FCP

### Che cosa significa FCP?

FCP è la sigla di First Contentful Paint, la metrica che misura il tempo dall’inizio del caricamento della pagina alla comparsa del primo elemento di contenuto visibile, che può essere testo, un’immagine o un elemento SVG.

### L’FCP è un Core Web Vital?

No, l’FCP è classificato come metrica diagnostica supplementare: i tre Core Web Vital ufficiali restano LCP, INP e CLS, anche se l’FCP condiziona sempre il tempo minimo a cui l’LCP può verificarsi.

### Qual è un buon punteggio FCP?

Un buon punteggio FCP sta tra 0 e 1,8 secondi su mobile, misurato al 75° percentile dei caricamenti reali; sui test di laboratorio desktop con Lighthouse la soglia buona scende a 0,9 secondi, perché simula un hardware più veloce.

### Come si calcola l’FCP?

L’FCP si calcola registrando, tramite la Paint Timing API del browser, il momento del primo evento di rendering che contiene un elemento di contenuto, poi aggregando questi tempi al 75° percentile per dispositivo su un intervallo di traffico reale.

### Come si misura l’FCP?

L’FCP si misura con strumenti di laboratorio come Lighthouse e Chrome DevTools, che simulano una visita, oppure con strumenti di campo come PageSpeed Insights, il Chrome User Experience Report e il report Segnali web essenziali di Search Console, che raccolgono i tempi degli utenti reali.

### Che differenza c’è tra FCP e LCP?

L’FCP segna la comparsa del primo elemento di contenuto, l’LCP la comparsa dell’elemento più grande e visibile: sulla stessa pagina l’FCP avviene sempre prima o insieme all’LCP, mai dopo, perché l’LCP si basa sugli stessi eventi di rendering.

### Un punteggio PageSpeed alto garantisce un buon FCP?

Il punteggio complessivo di PageSpeed Insights è una media ponderata di più metriche: un valore alto può convivere con un FCP in fascia arancione, quindi l’FCP va sempre controllato come voce separata nel report.