First Contentful Paint (FCP) è un'importante metrica incentrata sull'utente per misurare la velocità di caricamento percepita. Segna il primo punto nella sequenza temporale di caricamento della pagina in cui l'utente può vedere qualsiasi cosa sullo schermo. Un valore FCP veloce aiuta a rassicurare l'utente che qualcosa sta accadendo.
Il valore FCP misura il tempo che intercorre tra il momento in cui l'utente accede per la prima volta alla pagina e il momento in cui qualsiasi parte dei contenuti della pagina viene visualizzata sullo schermo. Per questa metrica, "contenuti" si riferisce a testo, immagini (incluse le immagini di sfondo), elementi <svg>
o
elementi <canvas>
non bianchi.
Non tutti i contenuti vengono visualizzati quando viene visualizzato il primo elemento di contenuti. Questa è una importante distinzione da fare tra FCP e Largest Contentful Paint (LCP), che misura il termine del caricamento dei contenuti principali della pagina.
Qual è un buon punteggio FCP?
Per offrire una buona esperienza utente, i siti devono avere un valore FCP pari o inferiore a 1,8 secondi. Per assicurarti di raggiungere questo target per la maggior parte degli utenti, una buona soglia da misurare è il 75° percentile di caricamenti pagine, segmentati su dispositivi mobili e desktop.
Come misurare il valore FCP
La FCP può essere misurata in laboratorio o sul campo ed è disponibile nei seguenti strumenti:
Strumenti da campo
- PageSpeed Insights
- Report sull'esperienza utente di Chrome
- Search Console (report Velocità)
- Libreria JavaScript di
web-vitals
Strumenti di lab
Misura FCP in JavaScript
Per misurare FCP in JavaScript, utilizza l'API Paint Timing.
L'esempio seguente mostra come creare un elemento PerformanceObserver
che ascolti una voce paint
con il nome first-contentful-paint
e la registri nella console.
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
console.log('FCP candidate:', entry.startTime, entry);
}
}).observe({type: 'paint', buffered: true});
In questo esempio, la voce first-contentful-paint
registrata indica quando è stato visualizzato il primo elemento con contenuti. Tuttavia, in alcuni casi questa voce non è
valida per la misurazione del valore FCP.
La seguente sezione elenca le differenze tra i report dell'API e il modo in cui viene calcolata la metrica.
Differenze tra la metrica e l'API
- L'API invia una voce
first-contentful-paint
per le pagine caricate in una scheda in background, ma queste pagine devono essere ignorate per il calcolo di FCP. La sincronizzazione della prima visualizzazione viene presa in considerazione solo se la pagina è rimasta in primo piano per tutto il tempo. - L'API non segnala le voci
first-contentful-paint
quando la pagina viene ripristinata dalla cache back-forward, ma in questi casi il valore FCP dovrebbe essere misurato in quanto gli utenti le riscontrano come visite di pagine distinte. - L'API potrebbe non segnalare i tempi di visualizzazione dagli iframe multiorigine, ma per misurare correttamente il valore FCP, devi considerare tutti i frame. I frame secondari possono usare l'API per segnalare i tempi di colorazione al frame principale per l'aggregazione.
- L'API misura il valore FCP dall'inizio della navigazione, ma per le pagine sottoposte a prerendering questo valore deve essere misurato a partire dal giorno
activationStart
perché corrisponde al tempo FCP registrato dall'utente.
Anziché memorizzare tutte queste sottili differenze, gli sviluppatori possono utilizzare la
libreria JavaScript di web-vitals
per
misurare il valore FCP, che le gestisce per te laddove possibile (tranne negli iframe):
import {onFCP} from 'web-vitals';
// Measure and log FCP as soon as it's available.
onFCP(console.log);
Consulta il codice sorgente di onFCP()
per un esempio completo di come misurare FCP in JavaScript.
Come migliorare il valore FCP
Per scoprire come migliorare FCP per un sito specifico, puoi eseguire un controllo delle prestazioni di Lighthouse e prestare attenzione a eventuali opportunità o diagnostica specifiche suggerite dal controllo.
Per scoprire come migliorare FCP in generale (per qualsiasi sito), consulta le seguenti guide al rendimento:
- Eliminare le risorse che bloccano la visualizzazione
- Minimizza il CSS
- Rimuovere il CSS inutilizzato
- Rimuovi il codice JavaScript inutilizzato
- Preconnessione alle origini richieste
- Ridurre i tempi di risposta del server (TTFB)
- Evitare reindirizzamenti di più pagine
- Precarica le richieste chiave
- Evita payload di rete enormi
- Pubblicare asset statici con criteri di cache efficienti
- Evitare un DOM di dimensioni eccessive
- Riduci al minimo la profondità delle richieste critiche
- Assicurati che il testo rimanga visibile durante il caricamento dei caratteri web
- Mantieni il numero delle richieste su un numero ridotto di richieste e le dimensioni di trasferimento ridotte
Log delle modifiche
Occasionalmente, i bug vengono scoperti nelle API utilizzate per misurare le metriche e, a volte, nelle definizioni delle metriche stesse. Di conseguenza, è necessario apportare talvolta modifiche, che possono apparire come miglioramenti o regressioni nei report e nelle dashboard interni.
Per aiutarti a gestire questa situazione, tutte le modifiche all'implementazione o alla definizione di queste metriche vengono mostrate in questo log delle modifiche.
Se hai feedback su queste metriche, forniscilo nel gruppo Google web-vitals-feedback.