Google Core Web Vitals: la nostra guida per ottimizzare l’LCP

Se sei un digital marketer, un SEO specialist o un webmaster, sicuramente avrai seguito con interesse – e con un pizzico di emozione – gli annunci di Google sul nuovo aggiornamento che diventerà effettivo a maggio 2021: Google Page Experience. Il gigante di Mountain View ha introdotto nuove metriche, i Core Web Vitals, relativi alla user experience: ecco che, allora, la UX inciderà sul ranking, diventando parte integrante della SEO. Nasce quella che, in AvantGrade.com, chiamiamo la SEOUX.

I Core Web Vitals includono:

• il Largest Contentful Paint (LCP), che misura le prestazioni di caricamento del principale elemento di una pagina;
• il First Input Delay (FID), che misura l’interattività, ovvero il tempo trascorso tra la prima interazione di un utente con una pagina e il momento in cui il browser risponde effettivamente all’interazione;
• il Cumulative Layout Shift (CLS), che misura la stabilità visiva, ovvero lo spostamento degli elementi della pagina web mentre è ancora in fase di caricamento.

In questo primo articolo di approfondimento, analizzeremo l’LCP per scoprire come ottimizzarlo e fornire una buona esperienza utente, evitando eventuali ripercussioni che potrebbero incidere negativamente sul tuo business.

Cos’è il Largest Contentful Paint (LCP)

Esistono già metriche come First Paint e First Contentful Paint che si concentrano sul caricamento iniziale della pagina: non tengono, però, conto di quale importanza abbia il contenuto restituito per primo sul display. È possibile, quindi, che indichino dei momenti di caricamento in cui l’utente non considera ancora utile la pagina, perché non vede raffigurato ciò che sta cercando.

Che differenza c’è, allora, fra questi indicatori e l’LCP? La nuova metrica misura le prestazioni di caricamento del principale blocco di una pagina e secondo web.dev, sito di Google dedicato ai webmaster, è:

“incentrata sull’utente ed esprime la velocità di caricamento percepita di un sito. Un LCP veloce rassicura le persone sulla rilevanza della pagina, perché indica il momento in cui il suo contenuto principale viene caricato”.

La metrica segnala, in altre parole, la velocità con cui viene mostrato, sul display dell’utente, l’elemento principale (che sia blocco di testo o immagine), più grande e impegnativo  della pagina visitata. Perché? Le persone giudicano il tempo di caricamento come rapido o lento, in funzione del momento in cui viene loro mostrato il contenuto che considerano utile. In questa prospettiva, viene dato maggior rilievo a quello che percepiscono piuttosto che al sito: si tratta di indicazioni preziose per i webmaster, che possono immedesimarsi negli utenti in un vero e proprio scambio di ruoli.

Google ritiene buono un LCP quando resta inferiore ai 2,5 secondi dall’inizio del caricamento della pagina, da migliorare quando si assesta tra i 2,5 e i 4 secondi e pessimo se supera i 4 secondi.

L’impatto del Largest Contenful Paint (LCP) sulla SEO

Non è un mistero che Google apprezzi la velocità di caricamento delle pagine, dal momento che è già tra i suoi fattori di ranking. L’LCP è un ulteriore passo in avanti, perché è stato pensato per garantire agli utenti una user experience nettamente migliore. Parliamo, per questa ragione, di “rivoluzione della SEOUX”: gli ultimi aggiornamenti di  Google ci fanno pensare che il motore di ricerca – e quindi il web – abbia preso una direzione definita.

A questo proposito, Screaming Frog ha condotto uno studio su 20.000 URL per testare quanti siti rispettassero i criteri minimi imposti dall’aggiornamento. Il risultato? Ebbene, la maggior parte di essi, al momento del test, non vi si atteneva.

Il tempo di caricamento medio rilevato nello stesso studio è stato di 3,13 secondi per i dispositivi mobili e di 3,04 per quelli desktop. Meno della metà degli URL esaminati per l’LCP avrebbe avuto un punteggio accettabile per Google: il 43% per dispositivi mobili e il 44% per desktop. In totale, il 60% circa degli URL sarebbe stato fortemente penalizzato se il nuovo algoritmo fosse già stato implementato.

Sono stati, poi, messi in relazione i risultati LCP con le posizioni in SERP degli stessi URL: si è osservato che, tendenzialmente, le prime sono occupate da pagine con una buona prestazione nella metrica.

Il risultato non è sufficiente per affermare che l’LCP influenzi, a oggi, così tanto le SERP. Possiamo dedurne, semmai, che i primi siti nei risultati di ricerca siano, in ogni caso, già particolarmente attenti all’esperienza utente. D’altronde, Google ha comunicato che li premierà con un’etichetta in SERP, segnalandoli, in tal modo, agli utenti come siti con una buona UX.

Come viene misurato il Largest Contentful Paint (LCP)

La dimensione dell’elemento segnalata per Largest Contentful Paint è quella visibile dall’utente all’interno della finestra. L’algoritmo terrà conto del contenuto più grande. Gli elementi che vengono, generalmente, considerati come LCP in una pagina sono:

• blocchi di testo;
• video;
• immagini;
• immagini di sfondo caricate tramite CSS;
• tag di intestazione;
• liste;
• tabelle.

L’obiettivo è raggiungere un LCP sufficiente sulla maggior parte delle tue pagine: per Google una percentuale apprezzabile è il 75% delle visualizzazioni di pagina.

Ottimizzare il Largest Contentful Paint (LCP)

Tra gli strumenti forniti da Google per misurare l’LCP, ce ne sono alcuni che restituiscono dati reali e altri che forniscono dati previsionali o “di laboratorio”.

Alla prima categoria appartengono:

• Search Console;
• Rapporto sull’esperienza utente di Chrome;
• PageSpeed ​​Insights;
• Libreria JavaScript web-vitals.

Fanno parte degli strumenti che offrono dati previsionali:

• Lighthouse;
• Chrome DevTools;
• WebPageTest;
• l’estensione Web Vitals per Chrome.

I dati reali sono, ovviamente, più importanti perché rispecchiano la vera esperienza degli utenti, che dipende da variabili tra cui, per esempio, l’uso dei dispositivi mobili o desktop, la banda di rete e simili. I dati previsionali, invece, possono essere utili in corso di modifiche sul sito: è possibile, infatti, fare delle implementazioni e testarle subito per avere un’idea di quali risultati si possano ottenere, poi, dalle sessioni effettive.

Identificare le pagine da ottimizzare

Utilizzando il nuovo rapporto Core Web Vitals di Search Console, potrai identificare i gruppi di pagine che richiedono attenzione. Avrai compiuto così il primo, necessario passo per avere una panoramica sulla situazione delle tue pagine.

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, capendo quale sia l’elemento nella pagina considerato come contenuto più grande (LCP). Puoi procedere in questo modo: apri il pannello DevTools della pagina target e, nella sezione Performance, registra una traccia. Cliccando poi su Timings, troverai anche una registrazione per l’LCP della stessa pagina. Selezionando tale voce, si potranno reperire una serie di informazioni come, per esempio, la dimensione; passandoci sopra il cursore, nella pagina stessa si evidenzierà il contenuto identificato come LCP: a questo punto, saprai a quale preciso elemento dedicare il tuo tempo.

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:

1. ottimizzare le immagini: per molti dei siti, tra cui gli eCommerce, le immagini costituiscono il contenuto principale di maggior parte delle pagine. Potrebbe essere utile comprimerle o convertirle in formati più efficienti, come abbiamo visto nell’articolo SEO e immagini;
2. utilizzare il CSS critico: sarebbe indicato usarlo per i contenuti “Above the fold”, ovvero 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 (non ancora visibile al visitatore);
3. adottare tecniche di preload: si tratta di precaricare le risorse principali, ne abbiamo parlato approfonditamente nell’articolo su Google Page experience ed eCommerce;
4. scegliere un Server Push HTTP/2: è 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 è abbastanza approfondito e prevede una serie di importanti passaggi. Alcuni miglioramenti richiedono elevate competenze tecniche. Se hai bisogno di assistenza in questa fase, rivolgiti a un’agenzia SEO per valutare insieme come procedere.

Attraverso l’esperienza dei consulenti SEO Avantgrade.com, potrai fare crescere il tuo business. Progettiamo piano e azioni su misura per te e ti affianchiamo offrendoti competenze e consulenza di alto livello. Fissa una chiamata per fare crescere il tuo progetto web.