Largest Contentful Paint (LCP)

La Largest Contentful Paint (LCP) è una metrica focalizzata sull’esperienza dell’utente che rappresenta un importante indicatore della velocità di caricamento percepita di una pagina web. LCP segnala il momento in cui è probabile che il contenuto più importante della pagina sia stato caricato, ed è quindi una misura utile per valutare la qualità del caricamento. Se l’LCP è veloce, l’utente avrà la percezione che la pagina sia utile e ben progettata.

Per gli sviluppatori web, è sempre stato difficile misurare la velocità con cui il contenuto principale di una pagina web viene caricato e reso disponibile agli utenti. Le metriche tradizionali come load o DOMContentLoaded non sono affidabili poiché non corrispondono necessariamente a ciò che l’utente vede effettivamente sullo schermo.

Anche le metriche incentrate sull’esperienza dell’utente come First Contentful Paint (FCP) catturano solo l’inizio del processo di caricamento, il che rende difficile determinare quando il contenuto principale è stato effettivamente caricato.

Per risolvere questa sfida, sono state proposte metriche più complesse come First Meaningful Paint (FMP) e Speed ​​​​Index (SI), ma queste possono essere difficili da spiegare e spesso generano risultati imprecisi.

Per trovare una soluzione più semplice ed efficace, il gruppo di lavoro sulle prestazioni Web del W3C e Google hanno collaborato per identificare la metrica più accurata per misurare il momento in cui il contenuto principale di una pagina web viene caricato. Il risultato è stata la Largest Contentful Paint (LCP), che si basa sull’elemento più grande visualizzato sulla pagina. Questa metrica è più semplice da spiegare e fornisce una valutazione più precisa del tempo di caricamento percepito dall’utente.

Largest Contentful Paint (LCP) è una metrica che indica il tempo impiegato per visualizzare l’immagine o il blocco di testo più grande visibile all’interno della finestra di visualizzazione (viewport), in relazione all’inizio del caricamento della pagina. In altre parole, LCP indica quanto tempo ci vuole per renderizzare il contenuto più grande e importante della pagina.

Qual è un punteggio LCP accettabile per un sito web?

Per garantire un’esperienza utente soddisfacente, i siti web dovrebbero cercare di mantenere il Largest Contentful Paint (LCP) entro i 2,5 secondi. Per garantire che la maggior parte degli utenti abbia un’esperienza di caricamento veloce, è consigliabile stabilire una soglia del 75° percentile per i tempi di caricamento delle pagine, suddivisi tra dispositivi mobili e desktop. In questo modo, sarà possibile monitorare e ottimizzare la performance del sito web in modo da fornire una navigazione rapida e piacevole agli utenti.

Se desideri approfondire la ricerca e la metodologia alla base delle raccomandazioni per le soglie delle metriche fondamentali di Web Vitals, ti consigliamo di consultare il documento “Definizione delle soglie per le metriche fondamentali di Web Vitals“. In questo documento sono illustrate le linee guida e le best practice per la valutazione delle prestazioni dei siti web, al fine di garantire un’esperienza utente di qualità.

Secondo quanto specificato nell’API Largest Contentful Paint, i seguenti elementi sono considerati per la misurazione della metrica:

• Elementi <img>
• Elementi <image> all’interno di un elemento <svg>
• Elementi <video> (utilizzando l’immagine del poster)
• Elementi a livello di blocco che contengono nodi di testo o altri elementi figlio di testo con stili hardcoded
• Elementi con immagini di sfondo che vengono caricati tramite la funzione URL(), escludendo i gradienti CSS.

Tuttavia, si precisa che questa limitazione di oggetti è stata intenzionale per semplificare le cose all’inizio, e ulteriori elementi (come <svg> e <video>) potrebbero essere aggiunti in futuro sulla base di ulteriori ricerche.

La dimensione dell’elemento che viene considerata da Largest Contentful Paint

è quella visibile all’interno del viewport dell’utente. Qualsiasi parte dell’elemento che si estende fuori dalla finestra o è ritagliata non viene conteggiata.

Nel caso degli elementi immagine che sono stati ridimensionati rispetto alla loro dimensione intrinseca, viene considerata la dimensione più piccola tra la dimensione visualizzabile e quella intrinseca. Ad esempio, se un’immagine viene ridotta a una dimensione inferiore rispetto alla sua dimensione intrinseca, viene riportata solo la dimensione visualizzabile, mentre se viene allungata o espanse, viene riportata solo la dimensione intrinseca.

Per gli elementi di testo, viene considerata solo la dimensione dei nodi di testo, ovvero il rettangolo più piccolo che comprende tutto il testo.

Non viene considerato alcun margine, riempimento o bordo applicato tramite CSS per tutti gli elementi.

La determinazione dei nodi di testo che appartengono a specifici elementi può essere complessa, soprattutto per gli elementi che contengono elementi figli con stili hardcoded e nodi di testo semplici, o per gli elementi a livello di blocco. Tuttavia, il punto fondamentale da tenere a mente è che ogni nodo di testo appartiene esclusivamente al suo elemento antenato a livello di blocco più vicino. In altre parole, ogni nodo di testo è associato all’elemento che genera il suo blocco contenitore, come specificato dalle specifiche.

Quando viene segnalato il largest contentful paint?

La più grande vernice di contenuto viene segnalata dal browser come PerformanceEntry di tipo large-contentful-paint non appena il primo frame della pagina è stato renderizzato. Tuttavia, poiché le pagine Web vengono spesso caricate in più fasi, l’elemento più grande della pagina potrebbe cambiare nel tempo. Per gestire questi potenziali cambiamenti, il browser invia un’altra PerformanceEntry ogni volta che vengono apportate modifiche all’elemento di contenuto più grande.

Va notato che un elemento può essere considerato l’elemento di contenuto più grande solo quando è stato renderizzato e visibile all’utente. Le immagini e i nodi di testo che non sono ancora stati caricati o utilizzano i caratteri Web durante il periodo di blocco dei caratteri non sono considerati “renderizzati”. In tali casi, un elemento più piccolo può essere segnalato come l’elemento di contenuto più grande. Tuttavia, non appena l’elemento più grande termina il rendering, verrà segnalato tramite un nuovo oggetto PerformanceEntry.

Inoltre, se la pagina aggiunge nuovi elementi al DOM man mano che nuovi contenuti diventano disponibili, un nuovo elemento più grande potrebbe essere segnalato come l’elemento di contenuto più grande. Se un elemento che attualmente ha il contenuto più lungo viene rimosso dal viewport o dal DOM, rimarrà l’elemento di contenuto più lungo a meno che non sia stato reso un elemento più lungo.

Fino a Chrome 88, i browser non consideravano gli elementi rimossi come elementi di contenuto più grandi. Pertanto, se l’elemento corrente veniva rimosso, si generava una nuova voce di Largest Contentful Paint. Tuttavia, con l’aumento dell’uso di modelli di interfaccia utente come i caroselli di immagini, che spesso rimuovono elementi dal DOM, la metrica è stata aggiornata per rispecchiare in modo più preciso l’esperienza degli utenti. Nel CHANGELOG sono disponibili ulteriori informazioni su questo aggiornamento.

Non appena l’utente interagisce con la pagina (facendo clic, scorrendo o premendo un tasto), il browser smette di segnalare nuove voci, poiché l’interazione dell’utente di solito cambia ciò che è visibile sulla pagina (soprattutto durante lo scorrimento).

Per l’analisi della performance della pagina, è consigliabile segnalare solo l’ultima PerformanceEntry inviata al servizio di analisi per evitare di avere dati duplicati o non necessari.

Importante:
Considera che gli utenti potrebbero aprire le pagine in una scheda in background e quindi il rendering del contenuto più esteso potrebbe non avvenire fino a quando l’utente non si concentra sulla scheda. Ciò può avvenire anche molti secondi dopo che l’utente ha caricato la pagina per la prima volta.

Foto di Piyapong Saydaung da Pixabay