FCP: cos’è il First Contentful Paint

Nell’era digitale la pazienza è ormai merce rara e così, quando un utente visita un sito web, si aspetta una risposta immediata, senza dover attendere troppo tempo per il caricamento di una pagina. Troppi secondi di attesa dinanzi a una schermata bianca possono infatti far fuggire via un visitatore, perdendo un cliente e regalandolo alla concorrenza.

Ed è qui che entra in gioco il First Contentful Paint (FCP), una metrica fondamentale per misurare la velocità percepita di una pagina web. Capire cos’è l’FCP e come ottimizzarlo non è solo un esercizio tecnico, ma una strategia cruciale per migliorare l’esperienza cliente, ridurre la frequenza di rimbalzo e favorire un buon posizionamento sui motori di ricerca.

In questo articolo spieghiamo cos’è l’FCP in modo semplice, come funziona, come misurarlo e come migliorarlo.

Cos’è il First Contentful Paint

Il First Contentful Paint è una metrica che misura il tempo che intercorre tra il momento in cui un utente fa clic e il momento in cui il browser visualizza il primo elemento di contenuto della pagina, definito nel DOM (Document Object Model) della pagina. Questo nello specifico può essere un testo, un’immagine, un logo o qualsiasi altro elemento grafico.

In pratica l’FCP è il segnale visivo che “rassicura” l’utente, poiché gli comunica che la pagina non è bloccata, ma sta semplicemente caricando. Il visitatore ha quindi la certezza che la sua richiesta è stata ricevuta e che il contenuto sta per arrivare.

Anche se la pagina non è ancora interattiva o completamente leggibile, compare un titolo o un’intestazione che fa capire che il contenuto sarà presto visibile. In tale ottica l’FCP, che svolge in un certo senso una funzione “psicologica” poiché comunica all’utente che la sua attesa non sarà vana, viene considerata una metrica “user-centric”, poiché si concentra interamente sulla percezione dell’utente e sulla sua esperienza di navigazione.

Quali valori definiscono un buon FCP secondo Google

Per misurare in modo chiaro questa metrica, Google ha definito delle soglie precise per il First Contentful Paint. Questi valori aiutano gli sviluppatori e i proprietari di siti web a capire se le prestazioni sono buone o se, al contrario, necessitano di miglioramenti. Le soglie sono suddivise in tre categorie, facilmente identificabili tramite un sistema a colori:

• buono (verde): un FCP inferiore o uguale a 1,8. Questo è l’obiettivo da raggiungere, poiché il tempo di caricamento del contenuto è molto veloce, migliora in modo significativo la user experience e fa percepire il sito come affidabile e autorevole;
• da migliorare (arancione): un FCP compreso tra 1,8 e 3,0 secondi. Il caricamento non è velocissimo, ma non così lento da essere considerato un problema grave. Tuttavia ci sono margini di miglioramento per rendere più fluida e piacevole la navigazione dell’utente;
• scarso (rosso): un FCP superiore a 3,0 secondi. Questo valore indica un problema significativo, poiché il caricamento è lento ed è probabile che l’utente abbandoni il sito prima ancora di vedere il contenuto.

FCP e LCP: cosa cambia davvero tra le due metriche

L’FCP viene spesso confuso con un’altra metrica importante, ossia l’LCP (Largest Contentful Paint), ma misurano due momenti molto diversi dal processo di caricamento.

L’FCP misura il tempo necessario per visualizzare il primo elemento del contenuto. È la prima prova che la pagina è “viva” e che sta caricando. L’LCP invece misura il tempo necessario per visualizzare l’elemento del contenuto più grande all’interno della finestra del browser. In genere si tratta dell’immagine principale, di un video in anteprima o di un grande blocco di testo. Questo indica il momento in cui il contenuto principale e più significativo della pagina è probabilmente diventato visibile. In sostanza l’LCP è la metrica che definisce quando la pagina è diventata effettivamente “utile”, quindi fruibile, per l’utente.

Come migliorare il First Contentful Paint

Per migliorare l’FCP bisogna intervenire su tutti quei fattori che ritardano la visualizzazione del primo contenuto. La prima cosa da fare è ridurre il Time to First Byte (TTFB), ossia il tempo che il server impiega per inviare il primo byte di dati dopo una richiesta. Un TTFB lento ritarda inevitabilmente tutto il resto. In questi casi è consigliabile affidarsi a un hosting ottimizzato che può ridurre il tempo di risposta del server, gettando le basi per un FCP eccellente.

Alcune tecniche includono:

• eliminare le risorse che bloccano la visualizzazione. Fogli di stile (CSS) e script (JavaScript) possono impedire al browser di mostrare qualsiasi contenuto, finché non sono stati completamente scaricati e analizzati. È opportuno caricarli in modo asincrono o posticipare quelli non essenziali;
• minificare CSS e JavaScript. Ridurre le dimensioni di questi file, eliminando caratteri superflui, aiuta ad accelerare il download;
• utilizzare la cache del browser. Salvare parti del sito sul dispositivo dell’utente permette caricamenti quasi istantanei nelle visite successive.

Strumenti per misurare l’FCP in modo affidabile

Per ottimizzare l’FCP, bisogna prima misurarlo correttamente. Per farlo esistono diversi strumenti, che si dividono in due categorie: dati di laboratorio (Lab Data) e dati sul campo (Field Data).

I dati di laboratorio sono generati in un ambiente controllato e simulato, utili per testare le modifiche in tempo reale.Gli strumenti più comuni sono:

• Lighthouse: integrato direttamente negli strumenti per sviluppatori di Google Chrome, permette di eseguire un’analisi completa della pagina e fornisce un report dettagliato, FCP incluso;
• PageSpeed Insights: questo strumento online offre sia dati di laboratorio che dati sul campo, fornendo suggerimenti pratici per migliorare le prestazioni.

I dati sul campo, invece, provengono da utenti reali che visitano il sito e possono essere consultati tramite:

• Google Search Console: il report “Segnali Web Essenziali” mostra le prestazioni del sito nel tempo, basandosi su dati reali degli utenti e segnalando le URL problematiche;
• PageSpeed Insights: la sezione “Scopri cosa stanno visualizzando i tuoi utenti reali” fornisce una panoramica dei dati CrUX.

Il ruolo dell’FCP all’interno dei Core Web Vitals

Benché il First Contentful Paint sia una metrica importante, va precisato che non è uno dei tre Core Web Vitals, ossia i già citati Segnali Web Essenziali. Le tre metriche che compongono questo gruppo sono:

1. Largest Contentful Paint (LCP): per la velocità di caricamento.
2. Interaction to Next Paint (INP): per la reattività e l’interattività.
3. Cumulative Layout Shift (CLS): per la stabilità visiva.

Tuttavia, l’FCP gioca un ruolo di supporto fondamentale. Se è scadente, quasi sempre è precursore di un LCP altrettanto scadente. Se il browser impiega molto tempo a visualizzare il primo elemento, è quasi impossibile che riesca a visualizzare l’elemento più grande in tempi rapidi.

Ottimizzare l’FCP è quindi il primo passo per migliorare il punteggio LCP e soddisfare tutti i requisiti dei Core Web Vitals.