First Contentful Paint (FCP)

Philip Walton

Supporto dei browser

  • 60
  • 79
  • 84
  • 14.1

Fonte

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.

Tempistiche FCP da google.com
In questa sequenza temporale di caricamento, il valore FCP avviene nel secondo frame, perché è il momento in cui i primi elementi di testo e immagine vengono visualizzati sullo schermo.

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.

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
I valori FCP buoni sono pari o inferiori a 1,8 secondi. I valori scarsi sono maggiori di 3,0 secondi.

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, 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:

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.