Esistono metriche come First Paint e First Contentful Paint che si focalizzano sul caricamento iniziale delle pagine, ma non considerano l’importanza del contenuto visualizzato per primo sullo schermo.
Questo può portare a momenti di caricamento in cui l’utente non trova ancora utile la pagina, perché non visualizza ciò che sta cercando.
Largest Contentful Paint (LCP), invece, misura le prestazioni di caricamento del principale blocco di una pagina.
Secondo web.dev, l’LCP è “centrato sull’utente ed esprime la velocità di caricamento percepita di un sito. Un LCP veloce rassicura le persone sulla rilevanza della pagina, indicando il momento in cui il suo contenuto principale viene caricato”.
In altre parole, l’LCP indica la velocità con cui l’elemento principale (come un blocco di testo o un’immagine) più grande e rilevante della pagina viene mostrato all’utente.
Questo è importante, perché le persone giudicano il tempo di caricamento in base al momento in cui vedono il contenuto che considerano utile.
Google considera un LCP buono se è inferiore a 2,5 secondi dal caricamento della pagina, migliorabile se si trova tra 2,5 e 4 secondi e pessimo se supera i 4 secondi.
L’impatto del Largest Contentful Paint (LCP) sulla SEO
Non è un mistero che Google consideri la velocità di caricamento delle pagine un fattore di ranking.
Uno studio di Screaming Frog su 20.000 URL ha rivelato che la maggioranza dei siti non rispetta i nuovi criteri dell’aggiornamento LCP.
Questi risultati sono stati poi correlati con le posizioni nelle SERP e sembra che le prime siano spesso occupate da pagine con prestazioni migliori.
Come misurare il Largest Contentful Paint (LCP)
Gli elementi tipici considerati per l’LCP includono testi, video, immagini, immagini di sfondo tramite CSS, intestazioni, liste e tabelle.
Per soddisfare Google, l’obiettivo è quello di raggiungere un LCP soddisfacente per il 75% delle visualizzazioni di pagina.
Google offre strumenti per misurare sia per dati reali sia per quelli previsionali. Quelli per dati reali includono Search Console, il rapporto sull’esperienza utente di Chrome, PageSpeed Insights e la libreria JavaScript web-vitals.
Invece, gli strumenti per dati previsionali includono Lighthouse, Chrome DevTools, WebPageTest e l’estensione Web Vitals per Chrome.
I dati reali sono più rilevanti poiché riflettono l’esperienza effettiva degli utenti, mentre quelli previsionali possono essere utili per testare modifiche e ottenere un’idea dei risultati futuri.
Come ottimizzare il Largest Contentful Paint (LCP)
Identificare le pagine da ottimizzare
Utilizzando il nuovo rapporto Core Web Vitals di Search Console, è possibile identificare i gruppi di pagine che richiedono maggiore attenzione.
In questo modo è possibile avere una panoramica molto precisa sulla situazione delle pagine web!
Google Search Console, fonte: web.dev
Individuare le cause di problemi nell’LCP
Un LCP troppo alto può dipendere da:
- lenti tempi di caricamento legati a risorse pesanti (come le immagini);
- lunghi tempi di risposta dei server;
- blocchi del rendering Javascript e CSS;
- CSR, ovvero rendering lato client.
Dopo aver consultato Google Search Console, valutato le performance e individuato gli URL problematici, PageSpeed Insights o Lighthouse possono essere utili per individuare, in ogni singola pagina, i potenziali problemi e per ottenere indicazioni pratiche su come correggerli.
Trovare l’LCP in una pagina
Una volta consultati Search Console e PageSpeed Insights, sarebbe opportuno scendere ancor più nel dettaglio, per capire quale sia l’elemento all’interno della pagina considerato come contenuto più grande (LCP).
Per farlo, occorre aprire il pannello DevTools della pagina target e registrare una traccia nella sezione Performance.
Cliccando poi su Timings si potranno reperire una serie di informazioni come, per esempio, la dimensione.
Passandoci sopra con il cursore, nella pagina si evidenzierà il contenuto identificato come LCP: questo è l’elemento a cui dedicare un po’ di tempo e lavoro.
Migliorare l’LCP con le strategie giuste
Alcune tecniche per migliorare l’LCP fanno parte, semplicemente, delle buone pratiche SEO finalizzate a velocizzare il sito e ottenere una buona UX.
Ciò che fa la differenza è un’analisi puntuale da mettere in atto con gli strumenti già a disposizione e con interventi mirati, tra cui:
- ottimizzare le immagini: per molti dei siti, tra cui gli eCommerce, le immagini costituiscono il contenuto principale per la maggior parte delle pagine;
- utilizzare il CSS critico (critical CSS): sarebbe opportuno usarlo per i contenuti “Above the fold”, ovvero quelli che sono presenti nella parte visibile della pagina, prima che l’utente faccia scrolling. In questo modo, si agevola il caricamento dell’elemento principale, ritardando, invece, quello del resto della pagina e ancora non visibile all’utente;
- adottare tecniche di preload;
- scegliere un Server Push HTTP/2: si tratta di una soluzione utile per guadagnare tempo. Se, infatti, il server invia risorse al browser prima che queste vengano esplicitamente richieste, quando sarà terminata l’analisi di index.html, il trasferimento di file CSS e Javascript potrebbe essere addirittura completato.
Il processo di analisi e ottimizzazione è molto importante e alcuni miglioramenti richiedono elevate competenze tecniche.
Ottimizzare i Core Web Vitals non è semplice
Durante il nostro percorso attraverso i consigli forniti in questo articolo, avrai sicuramente notato che l’ottimizzazione dei Core Web Vitals è un’impresa complessa. Spesso, richiede competenze tecniche considerevoli e può rappresentare una sfida per molti professionisti.
La complessità di tali operazioni è influenzata da diversi fattori, tra cui la struttura specifica del tuo sito web.
Infatti, la struttura del tuo sito, che può includere l’uso di un sistema di gestione dei contenuti (CMS) specifico e dinamiche particolari, gioca un ruolo fondamentale nell’influenzare la complessità delle operazioni di ottimizzazione dei Core Web Vitals.
Questi fattori possono rendere l’ottimizzazione un processo unico e sfidante.
Per approfondire ulteriormente e ottenere consigli specifici su come affrontare queste sfide, ti invitiamo a consultare le nostre guide dedicate ai Core Web Vitals.
Inoltre, per rendere l’ottimizzazione di queste metriche complesse più accessibile, abbiamo sviluppato Phantom Layer, uno strumento progettato per consentire ai nostri clienti di affrontare automaticamente tutte queste sfide.
Con Phantom Layer, è possibile migliorare i Core Web Vitals del tuo sito in soli 48 ore, evitando la necessità di impegnative sessioni di sviluppo o costose consulenze tecniche. Questo strumento ti offre la possibilità di ottimizzare la tua esperienza web senza dover affrontare complessi ostacoli tecnici.