FPC – First Contentful Paint – Il primo contenuto visivo stampato

First Contentful Paint (FCP) è una delle sei metriche monitorate nella sezione Performance del rapporto Lighthouse. Ogni metrica cattura alcuni aspetti della velocità di caricamento della pagina.

Il faro mostra FCP in pochi secondi:

Cosa misura FCP

FCP misura quanto tempo impiega il browser per eseguire il rendering del primo contenuto DOM dopo che un utente ha navigato sulla tua pagina. Immagini, elementi non bianchi <canvas>e SVG sulla tua pagina sono considerati contenuti DOM; nulla all’interno di un iframe non è incluso.

In che modo Lighthouse determina il tuo punteggio FCP

Il tuo punteggio FCP è un confronto tra il tempo FCP della tua pagina e i tempi FCP per siti Web reali, basato sui dati dell’archivio HTTP . Ad esempio, i siti con prestazioni nel novantanovesimo percentile rendono FCP in circa 1,2 secondi. Se l’FCP del tuo sito web è di 1,2 secondi, il tuo punteggio FCP è 99. Consulta Come vengono determinati i punteggi delle metriche per sapere come vengono impostate le soglie del punteggio di Lighthouse.

Questa tabella mostra come interpretare il tuo punteggio FCP:

Tempo FCP

(in secondi)

Codificazione del colore
0–1,8 Verde (veloce)
1.8–3 Arancio (moderato)
Oltre 3 Rosso (lento)

Consulta il post sul punteggio delle prestazioni di Lighthouse per sapere come viene calcolato il punteggio delle prestazioni complessive della tua pagina.

Come migliorare il tuo punteggio FCP

Un problema particolarmente importante per FCP è il tempo di caricamento dei caratteri. Dai un’occhiata alla sezione Assicurati che il testo rimanga visibile durante il caricamento del webfont per i modi per accelerare il caricamento dei font.

Tracciamento di FCP sui dispositivi di utenti reali

Per informazioni su come misurare quando si verifica effettivamente l’FCP sui dispositivi dei tuoi utenti, consulta la pagina sulle metriche delle prestazioni incentrate sull’utente di Google. La sezione Tracking FP/FCP descrive come accedere a livello di codice ai dati FCP e inviarli a Google Analytics.

Per ulteriori informazioni sulla raccolta delle metriche degli utenti reali, consulta Google Valutazione delle prestazioni di caricamento nella vita reale con navigazione e tempistica delle risorse .

Come migliorare il tuo punteggio di Performance complessivo

A meno che tu non abbia un motivo specifico per concentrarti su una metrica particolare, di solito è meglio concentrarti sul miglioramento del tuo punteggio di Performance complessivo.

Utilizza la sezione OpportunitĂ  del rapporto Lighthouse per determinare quali miglioramenti avranno piĂą valore per la tua pagina. PiĂą significativa è l’opportunitĂ , maggiore sarĂ  l’effetto che avrĂ  sul tuo punteggio di Performance. Ad esempio, lo screenshot di Lighthouse di seguito mostra che l’ eliminazione delle risorse che bloccano il rendering produrrĂ  il miglioramento maggiore:

Consulta la pagina di destinazione Audit delle prestazioni per scoprire come affrontare le opportunitĂ  identificate nel rapporto Lighthouse.

Fonte / Source: https://web.dev/first-contentful-paint/

Andrea SaccĂ 
FOUNDER Bhoost Hosting

Sharing tips and insights on Bhoost and Page Speed Optimization

Lascia un commento

Il tuo indirizzo email non sarĂ  pubblicato.