Guide

Ogni metrica di performance risponde a una domanda, e vale quanto vale quella domanda. Il First Contentful Paint ne pone una che ogni visitatore si fa senza pensarci: quanto tempo sto guardando il nulla? Non quanto manca perché la pagina sia usabile, non quanto manca perché arrivi l'immagine grande, solo quanto manca perché compaia qualcosa.

Questo fa dell'FCP il primo segnale onesto che una pagina può dare. Non è nemmeno un Core Web Vital, per ragioni che vale la pena capire, e questo cambia il peso che merita nelle tue priorità.

Che cosa misura davvero l'FCP

L'FCP misura il tempo tra l'inizio della navigazione verso la pagina e il momento in cui una parte qualsiasi del contenuto viene resa a schermo. Qui contenuto ha una definizione precisa e non intuitiva: testo, immagini comprese quelle di sfondo, elementi SVG ed elementi canvas che non siano di un bianco vuoto.

La distinzione che conta è quella tra First Paint e First Contentful Paint. Il First Paint scatta appena il browser cambia un pixel, il che include dipingere un colore di sfondo sopra la pagina precedente. In quell'istante non è stato comunicato nulla. L'FCP aspetta qualcosa che una persona possa davvero leggere o guardare.

Poiché l'FCP è il primo contenuto, è per definizione anteriore o uguale al Largest Contentful Paint. Su una pagina il cui elemento più grande è anche il primo, i due valgono lo stesso numero. Su una pagina che mostra subito un titolo e un'immagine di testata tre secondi dopo, sono molto distanti, e quella distanza è la parte interessante della lettura.

Le soglie, e il Core Web Vital che non è

Google pubblica tre fasce per l'FCP, misurate al 75esimo percentile dei caricamenti di pagina e separate per dispositivo: buono a 1,8 secondi o meno, da migliorare tra 1,8 e 3 secondi, scarso oltre i 3 secondi. Mobile e desktop sono valutati separatamente, il che conta perché lo stesso sito finisce regolarmente in fasce diverse sui due.

• Total Blocking Time - 30 %
• Largest Contentful Paint - 25 %
• Cumulative Layout Shift - 25 %
• First Contentful Paint - 10 %
• Speed Index - 10 %

L'FCP non è un Core Web Vital. I Core Web Vitals sono LCP, INP e CLS, e sono questi tre ad alimentare i segnali di page experience di Google. L'FCP sta accanto a loro come metrica diagnostica: riportata da PageSpeed Insights e dal Chrome User Experience Report, pesata nel punteggio di performance di Lighthouse, ma non parte dell'insieme che tocca il posizionamento.

Non è un motivo per ignorarlo. È un motivo per usarlo in ciò che sa fare, cioè dirti se il tuo problema comincia prima del rendering o durante. Nel punteggio di performance di Lighthouse 10 i pesi si distribuiscono così:

Che cosa lo rallenta davvero

Il primo componente dell'FCP è il tempo al primo byte. Nulla può essere dipinto prima che arrivi il primo byte di HTML, quindi un server lento, una query lenta o un'origine lontana pongono sotto l'FCP un pavimento che nessun lavoro di front-end solleverà. Se il TTFB è di 1,5 secondi, un FCP sotto 1,8 è quasi impossibile.

Il secondo sono le risorse che bloccano il rendering. Un foglio di stile nel head deve essere scaricato e analizzato prima che il browser dipinga, perché dipingere con gli stili sbagliati e ridipingere è peggio che aspettare. Gli script sincroni nel head bloccano del tutto l'analisi. Ognuno è un giro di andata e ritorno serializzato inserito tra l'arrivo dell'HTML e la comparsa di qualsiasi cosa.

Il terzo sono i web font, ed è quello che si dimentica. Un font dichiarato con font-display: block concede al browser un periodo in cui il testo in quel font viene reso invisibile mentre il file si scarica. Un testo invisibile non è contenuto, quindi l'FCP lo aspetta. Passare a font-display: swap dipinge subito un carattere di ripiego e sostituisce quello vero all'arrivo, scambiando un riflusso visibile con una prima comparsa di parole più precoce.

Misurarlo da soli

Sul campo, l'FCP viene dal Chrome User Experience Report, cioè quello che PageSpeed Insights mostra nella sezione in alto per utenti reali su connessioni reali. È quel numero da credere, perché riflette i dispositivi e le reti che i tuoi visitatori hanno davvero e non la macchina su cui stai provando.

Nel browser, un PerformanceObserver in ascolto sul tipo di voce paint riporta sia first-paint sia first-contentful-paint. Leggerli entrambi è più utile che leggerne uno solo. Una distanza ampia tra i due significa che il browser aveva pixel da spingere e ha scelto prima un colore di sfondo, che è la firma di un foglio di stile o di un font che si frappone tra il tuo HTML e il tuo lettore.

FCP o LCP: quale correggere per primo

Se FCP e LCP sono entrambi scarsi, correggi la causa comune e si muovono entrambi. TTFB, CSS bloccante e font bloccanti stanno a monte di entrambe le metriche, quindi il lavoro speso lì non è mai sprecato. Se l'FCP è buono e l'LCP scarso, il problema riguarda il tuo elemento più grande, di solito un'immagine di testata non ottimizzata o scoperta troppo tardi dal preload scanner.

Lo schema da saper riconoscere è l'inverso: un FCP scarso con un LCP accettabile. Vuol dire che il browser è rimasto inattivo prima di dipingere qualsiasi cosa e poi ha recuperato in fretta, che è quasi sempre una risorsa bloccante nel head e non un problema di peso. È anche la meno costosa da correggere delle tre situazioni.