First Contentful Paint (FCP)

Supporto dei browser

  • 60
  • 79
  • 84
  • 14.1

Fonte

Che cos'è FCP?

La metrica First Contentful Paint (FCP) misura il tempo che intercorre tra la prima navigazione dell'utente nella pagina e il momento in cui una 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.

Tempistiche FCP da google.com

Nella sequenza temporale di caricamento riportata sopra, il valore FCP avviene nel secondo frame, ovvero quando i primi elementi di testo e immagine vengono visualizzati sullo schermo.

Noterai che, anche se alcuni dei contenuti sono stati visualizzati, non tutti sono stati visualizzati. Questa è una distinzione importante da fare tra First Contentful Paint (FCP) e Largest Contentful Paint (LCP), per misurare il termine del caricamento dei contenuti principali della pagina.

Qual è un buon punteggio FCP?

Per offrire una buona esperienza utente, i siti dovrebbero fare in modo che la metrica First Contentful Paint sia pari o inferiore a 1,8 secondi. Per assicurarti di raggiungere questo target per la maggior parte dei tuoi utenti, una buona soglia da misurare è il 75° percentile di caricamenti pagine, segmentato su dispositivi mobili e computer.

I valori FCP buoni sono pari o inferiori a 1,8 secondi, i valori scarsi sono maggiori di 3,0 secondi e qualsiasi elemento intermedio deve essere migliorato

Come misurare il valore FCP

La FCP può essere misurata in laboratorio o sul campo ed è disponibile nei seguenti strumenti:

Strumenti da campo

Strumenti di lab

Misura FCP in JavaScript

Per misurare FCP in JavaScript, puoi utilizzare l'API Paint Timing. L'esempio seguente mostra come creare un elemento PerformanceObserver che rimane in ascolto di una voce paint con il nome first-contentful-paint e la registra 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});

Nell'esempio precedente, 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 invierà una voce first-contentful-paint per le pagine caricate in una scheda in background, ma queste pagine dovrebbero essere ignorate durante il calcolo del valore FCP (le tempistiche di First Paint devono essere prese in considerazione solo se la pagina è stata 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 dovrebbe essere misurato il valore FCP poiché gli utenti le percepiscono come visite di pagine distinte.
  • L'API potrebbe non segnalare i tempi di visualizzazione dagli iframe multiorigine, ma per misurare correttamente il valore FCP dovresti prendere in considerazione 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 il valore FCP deve essere misurato a partire dal giorno activationStart poiché corrisponde al tempo FCP utilizzato 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 (ove possibile, tieni presente che il problema relativo all'iframe non è trattato):

import {onFCP} from 'web-vitals';

// Measure and log FCP as soon as it's available.
onFCP(console.log);

Puoi fare riferimento al 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:

Log delle modifiche

Occasionalmente, i bug vengono scoperti nelle API utilizzate per misurare le metriche e talvolta nelle definizioni delle metriche stesse. Di conseguenza, è necessario apportare talvolta delle 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 verranno visualizzate in questo log delle modifiche.

Se hai feedback su queste metriche, puoi fornirle nel gruppo Google web-vitals-feedback.