Attenzione
La prima pittura significativa (FMP) è deprecata in Lighthouse 6.0. In pratica FMP è stato eccessivamente sensibile alle piccole differenze nel caricamento della pagina, portando a risultati incoerenti (bimodali). Inoltre, la definizione della metrica si basa su dettagli di implementazione specifici del browser, il che significa che non può essere standardizzata né implementata in tutti i browser web. Andando avanti, considera invece l’utilizzo di Largest Contentful Paint .
La prima pittura significativa (FMP) è una delle sei metriche monitorate nella sezione Prestazioni del rapporto Lighthouse. Ogni metrica cattura alcuni aspetti della velocità di caricamento della pagina.
Il faro mostra FMP in pochi secondi:
Indice dei contenuti
Cosa misura FMP
FMP misura quando il contenuto principale di una pagina è visibile all’utente. Il punteggio grezzo per FMP è il tempo in secondi tra l’utente che avvia il caricamento della pagina e la pagina che esegue il rendering del contenuto above-the-fold principale. FMP mostra essenzialmente la tempistica della vernice dopo la quale si verifica il più grande cambiamento di layout above-the-fold. Scopri di più sui dettagli tecnici di FMP in Time to First Meaningful Paint di Google: un approccio basato sul layout .
First Contentful Paint (FCP) e FMP sono spesso gli stessi quando il primo contenuto visualizzato nella pagina include il contenuto above the fold. Tuttavia, queste metriche possono differire quando, ad esempio, sono presenti contenuti above the fold all’interno di un iframe. FMP si registra quando il contenuto all’interno dell’iframe è visibile all’utente, mentre FCP non include il contenuto dell’iframe.
In che modo Lighthouse determina il tuo punteggio FMP
Proprio come FCP, FMP si basa sui dati reali delle prestazioni del sito Web dall’archivio HTTP .
Quando FMP e FCP sono gli stessi, i loro punteggi sono identici. Se si verifica FMP dopo FCP, ad esempio quando una pagina contiene contenuto iframe, il punteggio FMP sarà inferiore al punteggio FCP.
Ad esempio, supponiamo che il tuo FCP sia di 1,5 secondi e il tuo FMP sia di 3 secondi. Il punteggio FCP sarebbe 99, ma il punteggio FMP sarebbe 75.
Questa tabella mostra come interpretare il tuo punteggio FMP:
| Metrica FMP
(in secondi) |
Codificazione del colore | Punteggio FMP
(percentuale archivio HTTP FCP) |
| 0–2 | Verde (veloce) | 75-100 |
| 2–4 | Arancio (moderato) | 50–74 |
| Oltre 4 | Rosso (lento) | 0–49 |
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 FMP
Vedi Come migliorare la pittura di contenuto più grande sul tuo sito . Le strategie per migliorare FMP sono in gran parte le stesse strategie per migliorare Largest Contentful Paint.
Tracciamento FMP sui dispositivi di utenti reali
Per informazioni su come misurare quando si verifica effettivamente FMP sui dispositivi dei tuoi utenti, consulta la pagina delle metriche delle prestazioni incentrate sull’utente di Google. La sezione Tracking FMP using hero elements 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 . I contrassegni e le misure di temporizzazione utente L’audit Lighthouse ti consente di visualizzare i dati di temporizzazione utente nel tuo rapporto.
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:
Testa ora la velocità del tuo sito e ottieni 1 mese di Hosting Bhoost GRATIS.
Fonte / Source https://web.dev/first-meaningful-paint/
Prova Gratis Hosting corewebvitals Veloce, Ottimizzato, Sicuro
Passa a Bhoost con 30 giorni gratis e migrazione inclusa
Prova gratis 30 giorni
