First Contentful Paint (FCP) è una delle sei metriche monitorate nella sezione Rendimento del report Lighthouse. Ogni metrica acquisisce alcuni aspetti della velocità di caricamento della pagina.
Lighthouse mostra il valore FCP in pochi secondi:
Quali misure FCP misura
Il valore FCP misura il tempo impiegato dal browser per visualizzare la prima porzione di contenuti DOM dopo che un utente accede alla tua pagina.
Le immagini, gli elementi <canvas> non bianchi e gli SVG sulla pagina sono considerati contenuti DOM; qualsiasi elemento all'interno di un iframe non viene incluso.
In che modo Lighthouse determina il punteggio FCP
Il punteggio FCP mette a confronto l'ora FCP e l'ora FCP della tua pagina per siti web reali, in base ai dati di HTTP Archive. Ad esempio, i siti con prestazioni nel novantanovesimo percentile visualizzano FCP in circa 1,2 secondi. Se l'FCP del tuo sito web è di 1,2 secondi, il punteggio FCP è 99. Consulta Come vengono determinati i punteggi delle metriche per scoprire come sono impostate le soglie di punteggio Lighthouse.
Questa tabella mostra come interpretare il punteggio FCP:
| Tempo FCP (in secondi) |
Codifica con colori |
|---|---|
| 0–1,8 | Verde (veloce) |
| 1,8-3 | Arancione (moderato) |
| Più di 3 | Rosso (lenta) |
Come migliorare il punteggio FCP
Un problema particolarmente importante per FCP è il tempo di caricamento del carattere. Consulta il post Assicurati che il testo rimanga visibile durante il caricamento dei caratteri web per scoprire come velocizzare il caricamento dei caratteri.
Monitoraggio di FCP sui dispositivi degli utenti reali
Per scoprire come misurare il momento in cui il valore FCP viene effettivamente registrato sui dispositivi degli utenti, consulta la pagina di Google Metriche sul rendimento incentrate sull'utente. La sezione FP/FCP di monitoraggio descrive come accedere in modo programmatico ai dati FCP e inviarli a Google Analytics.
Per saperne di più sulla raccolta di metriche relative agli utenti reali, consulta Valutare le prestazioni del caricamento nel mondo reale con navigazione e tempi delle risorse.
Come migliorare il punteggio di rendimento complessivo
A meno che tu non abbia un motivo specifico per concentrarti su una determinata metrica, è meglio concentrarsi sul miglioramento del punteggio di rendimento complessivo.
Utilizza la sezione Opportunità del report Lighthouse per determinare quali miglioramenti avranno più valore per la tua pagina. Più alta è l'opportunità, maggiore sarà l'effetto sul punteggio del rendimento. Ad esempio, lo screenshot di Lighthouse riportato di seguito mostra che l'eliminazione delle risorse di blocco della visualizzazione produrrà il maggiore miglioramento:
Consulta la pagina di destinazione dei controlli delle prestazioni per scoprire come sfruttare le opportunità identificate nel report Lighthouse.