Qual è la prima vernice contenuta (FCP)? Una guida completa per 2026 - IT

I tuoi visitatori non aspetteranno un sito lento. La ricerca di Google mostra che con il passare del tempo di caricamento della pagina 1 per 3 secondi, la probabilità di rimbalzo aumenta di 32%. First Contentful Paint cattura il momento critico in cui gli utenti vedono per la prima volta qualcosa di diverso da uno schermo vuoto.

Risposta rapida: First Contentful Paint (FCP) è una metrica delle prestazioni che misura quanto manca al primo testo, Immagine, o SVG viene visualizzato sullo schermo. Un buon FCP lo è 1.8 secondi o meno. Sebbene FCP non sia un fattore di ranking diretto di Google, influenza la percezione dell'utente ed è correlato con LCP, che influisce sulle classifiche.

Ultima revisione: febbraio 2026. Informazioni verificate rispetto alla documentazione web.dev corrente.

Ciò che misura effettivamente la prima vernice contenta

FCP tiene traccia del tempo dall'inizio della navigazione a quando il browser esegue il rendering del primo contenuto visibile. Potrebbe essere un testo, un'immagine, un SVG, o un elemento di tela non bianca. I colori di sfondo non contano. Nemmeno gli spinner con caricamento vuoto.

Pensatela in questo modo: prima che FCP venga attivato, il tuo visitatore fissa uno schermo bianco chiedendosi se qualcosa è rotto. Dopo FCP, sanno che la pagina si sta caricando ed è più probabile che aspettino.

Ecco cosa succede prima che FCP possa attivarsi:

Ricerca DNS → Connessione TCP → Handshake SSL → Risposta del server (TTFB) → Download HTML → Analisi CSS → Prima verniciatura

Ogni passaggio aggiunge tempo. Questo è il motivo per cui FCP varia tra test di laboratorio e utenti reali. Il tuo ambiente di test ignora la complicata realtà delle ricerche DNS, reti mobili lente, e server sotto carico.

Ciò che conta come “Soddisfare” per FCP

• Testo reso da caratteri HTML o web
• immagini (comprese le immagini di sfondo CSS)
• Elementi SVG con contenuto visivo
• Elementi in tela non bianca (grafici, disegni)

Ciò che non conta

• Tele bianche o bianche
• Colori di sfondo del segnaposto
• cornici (misurano il proprio FCP)
• Elementi dell'interfaccia utente del browser

Perché il FCP è importante (Anche se non è un fattore di ranking)

FCP non è uno dei Core Web Vitals di Google. I segnali di classificazione effettivi sono LCP (La più grande vernice contenta), INP (Interazione con la vernice successiva), e CLS (Spostamento del layout cumulativo). Allora perché preoccuparsi di FCP?

1. FCP è il piano per LCP. LCP non potrà mai essere più veloce di FCP. Se il tuo FCP lo è 3 secondi, il tuo LCP (il segnale di classifica effettivo) è almeno 3 secondi. La risoluzione dei problemi FCP di solito risolve anche i problemi LCP.

2. FCP influisce sulla velocità percepita. Gli utenti giudicano il tuo sito in base alla velocità, non da quello che dicono i tuoi parametri. Una pagina che mostra il contenuto in 1 secondo e finisce alle 3 i secondi sembrano più veloci di uno che non mostra nulla fino a quando 2.5 secondi, anche se il tempo di caricamento totale è simile.

3. FCP influisce sulla frequenza di rimbalzo. Quella schermata bianca vuota è quando gli utenti decidono di restare o andarsene. Più dura, più persone premono il pulsante Indietro prima ancora che i tuoi contenuti vengano visualizzati.

4. Conti FCP per 10% del tuo punteggio Faro. Mentre i punteggi Lighthouse non influenzano direttamente le classifiche, sono utilizzati in molti audit e rapporti sulle prestazioni.

Soglie del punteggio FCP

Google definisce tre fasce di prestazione:

• Buona: 1.8 secondi o meno
• Ha bisogno di miglioramenti: 1.8 per 3.0 secondi
• Povero: Più di 3.0 secondi

Ecco cosa conta: hai bisogno 75% di caricamenti di pagina colpire il “bene” soglia. Un carico veloce su Internet in fibra non compensa cento carichi lenti su dispositivi mobili.

Per il contesto, il FCP mediano sul web è intorno 2.5 secondi su dispositivo mobile secondo i dati dell'archivio HTTP. Ciò significa che la maggior parte dei siti si trova in formato “necessita di miglioramenti” zona. Battere 1.8 i secondi ti mettono davanti alla maggioranza.

I punteggi mobile e desktop differiscono notevolmente. I dispositivi mobili hanno processori più lenti, e le reti cellulari aggiungono latenza. Un punteggio del sito “bene” su desktop potrebbe non riuscire su dispositivi mobili. Controllali sempre entrambi.

FCP contro LCP: Qual è la differenza?

Entrambi i parametri misurano i tempi di verniciatura, ma in momenti diversi:

FCP: Quando viene visualizzato per la prima volta un contenuto (anche solo il testo di navigazione).

LCP: Quando termina il caricamento dell'elemento di contenuto più grande (di solito la tua immagine principale o il titolo principale).

FCP si attiva per primo. Se il testo del menu di navigazione viene visualizzato in 0.8 secondi, questo è FCP. Quando l'immagine del tuo eroe termina il caricamento alle 2.5 secondi, questo è LCP.

La differenza SEO: LCP è un Core Web Vital e influisce sulle classifiche. FCP è una metrica diagnostica che non lo fa. Ma poiché condividono molte cause, il miglioramento di FCP in genere migliora LCP.

Le attuali soglie Core Web Vitals:

• LCP: Buono sotto 2.5 secondi
• INP: Buono sotto 200 millisecondi
• CLS: Buono sotto 0.1

Come misurare la FCP

Ti servono entrambi i dati di laboratorio (test controllati) e dati sul campo (utenti reali). Raccontano storie diverse.

Strumenti per test di laboratorio

Google PageSpeed ​​Insights: Inserisci qualsiasi URL e ottieni punteggi FCP sia per i dati di laboratorio che per quelli sul campo. Il “Opportunità” ti dice esattamente cosa sta rallentando le cose. Gratuito, nessuna configurazione necessaria.

Faro (Chrome DevTools): Fare clic con il pulsante destro del mouse su qualsiasi pagina, seleziona Ispeziona, vai alla scheda Faro. Maggiore controllo sulle condizioni di test rispetto a PageSpeed ​​Insights. Mostra un'analisi dettagliata di ciò che blocca il rendering.

Test pagina Web: Test avanzati da più posizioni e velocità di connessione. Utile per diagnosticare problemi specifici della posizione.

Dati sul campo (Utenti reali)

Rapporto sull'esperienza utente di Chrome (CruUX): Dati reali degli utenti Chrome che visitano il tuo sito. Viene visualizzato in PageSpeed ​​Insights se hai abbastanza traffico. Questo è ciò che Google utilizza effettivamente per i segnali di ranking.

Libreria JavaScript web-vitals: Aggiungilo al tuo sito per raccogliere dati FCP da ogni visitatore:

importare {onFCP} da 'web-vitals';

onFCP(metric => {
  // Invia a Google Analytics 4
  gtag('evento', 'web_vitals', {
    nome_metrica: 'FCP',
    valore_metrico: valore.metrico,
    metric_rating: valutazione.metrica
  });
});

Pannello prestazioni di Chrome DevTools

Per il debug, registrare il caricamento di una pagina nel pannello Prestazioni. Vedrai FCP contrassegnato sulla timeline con esattamente ciò che è stato renderizzato. Questo mostra se il tuo FCP è un contenuto significativo o semplicemente uno spinner di caricamento.

Vittorie veloci: Il 80/20 di ottimizzazione del FCP

Prima di passare alla guida completa all'ottimizzazione, ecco i cambiamenti che danno il massimo impatto con il minimo sforzo:

1. Abilita la compressione del testo. Se il tuo server non invia risposte compresse Gzip o Brotli, abilitarlo. Si tratta spesso di una modifica alla configurazione di un singolo server che può ridurre le dimensioni del trasferimento 70%+.

2. Aggiungi la visualizzazione dei caratteri: passa ai tuoi caratteri. Questa proprietà CSS impedisce il testo invisibile durante il caricamento dei caratteri. Gli utenti vedono immediatamente i caratteri di sistema, quindi i tuoi caratteri personalizzati si scambiano.

3. Rinviare JavaScript non critico. Inserisci defer a qualsiasi tag di script che non deve essere eseguito immediatamente. Ciò impedisce a JavaScript di bloccare il primo disegno.

4. Controlla il tuo hosting. Se il tuo TTFB (Tempo al primo byte) è costantemente superiore a 600 ms, nessuna ottimizzazione del front-end ti porterà a un buon FCP. Il tuo server deve rispondere più velocemente. Prendere in considerazione Hosting VPS se utilizzi un hosting condiviso, o aggiungi un CDN.

5. Esegui PageSpeed ​​Insights e correggi il primo “Opportunità.” Google ti dice esattamente cosa sta bloccando la tua vernice. Inizia con qualunque cosa abbia il maggiore risparmio stimato.

Guida completa all'ottimizzazione

FCP dipende da una catena: DNS → Connessione → Risposta del server → Download HTML → Analisi CSS → Paint. Ecco come accelerare ciascuna parte.

Riduci i tempi di risposta del server (TTFB)

Il tempo al primo byte è spesso il fattore che contribuisce maggiormente a FCP. Se il tuo server prende 2 secondi per rispondere, il tuo FCP non può essere sotto 2 secondi.

• Utilizza una rete CDN (rete di consegna dei contenuti) per servire da posizioni più vicine agli utenti
• Abilita la memorizzazione nella cache lato server per query di database e HTML
• Riduci i reindirizzamenti (ognuno aggiunge un viaggio di andata e ritorno completo)
• Aggiorna l'hosting se il tuo provider non è in grado di fornire un TTFB inferiore a 200 ms

Se sei attivo hosting condiviso con TTFB lento, la soluzione più economica è spesso hosting cloud con CDN integrato.

Elimina le risorse che bloccano il rendering

CSS e JavaScript nel rendering del blocco della testata del documento finché non vengono scaricati ed eseguiti.

• CSS critico in linea (stili per i contenuti Above The Fold) direttamente nell'HTML
• Carica CSS non critici in modo asincrono
• Inserisci async o defer a JavaScript non essenziale
• Sposta JavaScript in fondo al codice HTML quando possibile

Ottimizza la consegna CSS

Il browser deve scaricare e analizzare tutti i CSS prima di dipingere il contenuto che potrebbe influire sui CSS.

• Minimizza CSS (rimuovere spazi bianchi e commenti)
• Rimuovi i CSS inutilizzati con strumenti come PurgeCSS
• Evita CSS @import (ognuno aggiunge un viaggio di andata e ritorno in rete)
• Dividi CSS per tipo di media utilizzando gli attributi media

Ottimizza i caratteri Web

I caratteri personalizzati possono bloccare completamente il rendering del testo fino al download.

• Utilizzo font-display: swap nelle regole @font-face
• Precarica i caratteri critici: <link rel="preload" href="font.woff2" as="font" crossorigin>
• Limita le varianti dei caratteri (ogni peso è un file separato)
• Considera i caratteri di sistema per il corpo del testo

Comprimi e minimizza tutto

• Abilita la compressione Gzip o Brotli sul tuo server
• Minimizza HTML, CSS, e JavaScript
• Ottimizza le immagini (WebP o AVIF, dimensioni adeguate)

Utilizza suggerimenti sulle risorse

Preconnetti ai domini di terze parti di cui avrai bisogno:

<link rel ="preconnettersi" href ="https://fonts.googleapis.com">

Precarica risorse critiche:

<link rel ="precarico" href ="critico.css" come="stile">

Utilizzare con parsimonia. La preconnessione a troppi domini spreca risorse.

Semplifica il tuo DOM

Grande, L'HTML profondamente annidato richiede più tempo per l'analisi. Mantieni la struttura piatta, evitare div wrapper eccessivi, e caricamento lento dei contenuti sotto la piega.

Risoluzione dei problemi comuni di FCP

FCP varia tra i test

Le condizioni della rete e i tempi di risposta del server variano. Esegui più test e utilizza la mediana. Per i dati sul campo, controlla se segmenti specifici (utenti mobili, alcune regioni) mostrano punteggi peggiori.

Buoni punteggi di laboratorio, Dati sul campo scadenti

I test di laboratorio vengono eseguiti in condizioni ideali. Gli utenti reali hanno connessioni lente, vecchi telefoni, e reti congestionate. Affidati ai dati sul campo piuttosto che ai dati di laboratorio. Test con la limitazione abilitata in DevTools.

FCP è migliorato ma LCP è rimasto pessimo

Il tuo primo contenuto potrebbe essere minore (testo di navigazione, logo) mentre il tuo contenuto principale (immagine dell'eroe) è ancora lento. Controlla cosa viene effettivamente visualizzato al momento del FCP. Concentra l'ottimizzazione sui tuoi contenuti principali.

Script di terze parti che bloccano Paint

analitica, widget di chat, e gli script degli annunci spesso bloccano il rendering. Controllali. Rinviare o rimuovere qualsiasi cosa non essenziale. Valuta la possibilità di caricare alcuni script solo dopo l'interazione dell'utente.

Domande frequenti

FCP è un fattore di ranking di Google?

No, FCP non influisce direttamente sulle classifiche. I Core Web Vitals che influiscono sulla SEO sono LCP, INP, e CLS. però, I problemi FCP di solito significano anche problemi LCP poiché condividono le cause. Correggere FCP spesso migliora i tuoi effettivi segnali di posizionamento.

Cosa causa un FCP elevato?

Le cause più comuni sono la risposta lenta del server (TTFB), CSS e JavaScript con blocco del rendering, caratteri non ottimizzati, e grandi risorse non compresse. Esegui PageSpeed ​​Insights per vedere esattamente cosa sta bloccando il tuo sito.

Qual è un buon punteggio FCP per dispositivi mobili?

Stessa soglia: sotto 1.8 i secondi vanno bene, 1.8 per 3 i secondi necessitano di miglioramenti, al di sopra di 3 i secondi sono scarsi. I dispositivi mobili in genere ottengono punteggi peggiori rispetto ai desktop a causa della latenza della rete e della potenza di elaborazione del dispositivo. Controlla i dispositivi mobili separatamente in PageSpeed ​​Insights.

Come faccio a trovare cosa blocca FCP?

Utilizza PageSpeed ​​Insights e osserva il file “Opportunità” sezione. Per un'analisi più approfondita, Il pannello Prestazioni di Chrome DevTools mostra una sequenza temporale di ciò che accade esattamente prima dell'attivazione di FCP. Lighthouse segnala inoltre specifiche risorse che bloccano il rendering.

L'hosting influisce su FCP?

sì. Il tuo hosting determina il TTFB, che spesso rappresenta la parte più grande del tempo FCP. La risposta lenta del server significa FCP lento, periodo. Servizi CDN può aiutarti offrendo contenuti da luoghi più vicini ai tuoi utenti.

Dovrei concentrarmi su FCP o LCP?

Concentrati su LCP se puoi sceglierne solo uno poiché è il segnale di classifica effettivo. Ma la maggior parte delle ottimizzazioni migliora entrambe le metriche. Se il tuo FCP è buono ma LCP è cattivo, il problema è il tuo contenuto principale (grandi immagini di eroi, sezioni a caricamento lento) non il rendering iniziale.

In che modo FCP si collega ai Core Web Vitals?

FCP è una metrica diagnostica, non un Core Web Vital. Aiuta a identificare i problemi ma non contribuisce ai calcoli del ranking di Google. I tre Core Web Vitals sono LCP (Caricamento in corso), INP (interattività), e CLS (stabilità visiva).

Cosa fare dopo

Inizia con la misurazione. Gestisci subito il tuo sito tramite PageSpeed ​​Insights e annota il tuo punteggio FCP sia per dispositivi mobili che desktop. Guarda il “Opportunità” sezione per raccomandazioni specifiche.

Se il tuo TTFB è alto (oltre 500 ms), indirizzare prima l'hosting. Nessuna ottimizzazione front-end aiuta se il tuo server è lento. Confronta le opzioni nel nostro Guida all'hosting SSD o considerare hosting cloud con CDN integrato.

Se TTFB va bene ma FCP è ancora lento, lavorare attraverso le vittorie veloci: abilitare la compressione, aggiungi la visualizzazione dei caratteri: scambiare, rinviare JavaScript non critico. Questi cambiamenti da soli spesso riducono il FCP 30-50%.

Per un monitoraggio continuo, aggiungi la libreria web-vitals per monitorare il FCP dell'utente reale nel tempo. I dati sul campo ti dicono come i visitatori effettivi sperimentano il tuo sito, non solo come si comporta nei test controllati.