First Contentful Paint (FCP)

Philip Walton

Che cos'è il FCP?

La prima visualizzazione con contenuti (FCP) misura il tempo che intercorre tra il momento in cui l'utente ha raggiunto per la prima volta la pagina e il momento in cui una parte dei contenuti della pagina viene visualizzata sullo schermo. Per questa metrica, il termine "contenuti" si riferisce a testo, immagini (incluse le immagini di sfondo), elementi <svg> o elementi <canvas> non bianchi.

Nella sequenza temporale di caricamento illustrata nell'immagine precedente, il valore FCP si verifica nel secondo frame, ovvero quando vengono visualizzati sullo schermo i primi elementi di testo e immagine.

Noterai che, anche se il rendering è stato eseguito per alcuni contenuti, non tutti. Si tratta di una distinzione importante tra First Contentful Paint e Largest Contentful Paint (LCP), che hanno lo scopo di misurare il termine del caricamento dei contenuti principali della pagina.

Che cos'è un buon punteggio FCP?

Per offrire una buona esperienza utente, i siti devono cercare di ottenere una First Contentful Paint di 1,8 secondi o meno. Per assicurarti di raggiungere questo target per la maggior parte degli utenti, una buona soglia da misurare è il 75° percentile dei caricamenti delle pagine, segmentato tra dispositivi mobili e computer.

Come misurare il valore FCP

Il valore FCP può essere misurato in laboratorio o sul campo ed è disponibile nei seguenti strumenti:

Strumenti sul campo

• PageSpeed Insights
• Report sull'esperienza utente di Chrome
• Search Console (report Velocità)
• Libreria JavaScript di web-vitals

Strumenti del lab

• Lighthouse
• Chrome DevTools
• PageSpeed Insights

Misurare il valore FCP in JavaScript

Per misurare il valore FCP in JavaScript, puoi utilizzare l'API Paint Timing. L'esempio seguente mostra come creare un elemento PerformanceObserver che ascolti una voce paint denominata 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});

Nello snippet di codice precedente, la voce first-contentful-paint registrata indicherà quando è stato dipinto 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 durante il calcolo del valore FCP (i tempi della prima visualizzazione devono essere presi 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 deve essere misurato poiché gli utenti le ricevono come visite di pagine distinte.
• L'API potrebbe non segnalare le tempistiche di rendering da iframe multiorigine, ma per misurare correttamente il valore FCP devi prendere in considerazione tutti i frame. I frame secondari possono utilizzare l'API per segnalare le tempistiche 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 da activationStart poiché corrisponde al tempo FCP percepito dall'utente.

Anziché memorizzare tutte queste piccole differenze, gli sviluppatori possono utilizzare la libreria JavaScript di web-vitals per misurare il valore FCP, che gestisce queste differenze al posto tuo (ove possibile, tieni presente che il problema dell'iframe non è coperto):

import {onFCP} from 'web-vitals';

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

Per un esempio completo di come misurare FCP in JavaScript, consulta il codice sorgente per onFCP().

Come migliorare il valore FCP

Per scoprire come migliorare il rendimento FCP per un sito specifico, puoi eseguire un controllo delle prestazioni di Lighthouse e prestare attenzione a opportunità o diagnostica specifiche suggerite dal controllo.

Per informazioni su 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
• Rimuovere il codice JavaScript inutilizzato
• Preconnessione alle origini richieste
• Ridurre i tempi di risposta del server (TTFB)
• Evita reindirizzamenti tra più pagine
• Precarica le richieste chiave
• Evita payload di rete enormi
• Pubblicare asset statici con criteri della cache efficienti
• Evitare dimensioni eccessive del DOM
• Riduci al minimo la profondità delle richieste critiche
• Assicurati che il testo rimanga visibile durante il caricamento dei caratteri web
• Riduci il numero di richieste e riduci le dimensioni del trasferimento

Log delle modifiche

A volte vengono scoperti bug nelle API utilizzate per misurare le metriche e talvolta nelle definizioni delle metriche stesse. Di conseguenza, a volte devono essere apportate 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 riportate in questo Log delle modifiche.

Se hai un feedback per queste metriche, puoi fornirlo nel gruppo Google web-vitals-feedback.