Core Web Vitals

Cosa sono i Core Web Vitals?

I Core Web Vitals sono metriche create da Google per migliorare l'esperienza utente sui siti. L'ampia varietà di tool disponibili per analizzare la velocità di caricamento è stato uno dei fattori che ha spinto Google a unificare tutte queste metriche, per semplificare un po' la complessità che comporta l'ottimizzazione dei tempi di caricamento. Questa iniziativa punta a farci concentrare su questi "segnali di qualità", così importanti per ottenere un'esperienza utente ottimale.

Google riassume in poche parole su cosa si concentrano i Core Web Vitals:

• ›

  Esperienza di caricamento

• ›

  Interattività

• ›

  Stabilità visiva del contenuto della pagina

Largest Contentful Paint o LCP

L'LCP o Largest Contentful Paint è una metrica che ci indica il tempo di caricamento perché il contenuto "più grande" visibile all'utente sia disponibile e utile. In altre parole, Google sta dicendo che gli elementi posizionati in quello che chiamiamo "Above the Fold" devono caricarsi rapidamente ed essere leggibili, e così essere disponibili all'utente perché possa interagirvi.

Va precisato che gli elementi che compaiono quando l'utente clicca sullo schermo o scrolla non incidono sull'LCP. Il contenuto più grande può essere un blocco di testo, un video, un'immagine, ecc.

Classificazione dello stato dell'LCP in base ai tempi. Immagine © web.dev

Quale tempo considera ottimale Google?

Come possiamo vedere nel grafico, Google considera che il tempo massimo per caricare l'LCP e fornire una buona esperienza utente sia inferiore a 2,5 secondi. È importante notare che durante il caricamento l'elemento LCP può cambiare.

Come posso conoscere l'LCP di una URL?

Nello stesso browser Chrome, eseguendo un audit con Lighthouse, abbiamo l'opzione di scoprire qual è il contenuto più grande da caricare secondo Google. Ecco come:

Quali fattori possono influenzare il caricamento dell'LCP?

Diverse azioni influiscono sul fatto che il tempo di caricamento dell'LCP sia più alto del previsto. Questi elementi o azioni sono:

• ›

  Risposta del server

• ›

  Query al database

• ›

  Risposte API che impiegano tempo a risolversi

• ›

  CSS o JS che blocca il rendering

• ›

  Lentezza nel caricamento di altre risorse

• ›

  Immagini non ottimizzate

• ›

  Ecc.

First Input Delay o FID

Il FID o First Input Delay è una metrica che indica quanto tempo impiega la pagina a reagire quando l'utente interagisce con uno qualsiasi degli elementi.

Metriche prese da Pagespeed

Nel tool Pagespeed, che Google ha messo a disposizione di tutti già da qualche tempo, possiamo vedere il riferimento a questa metrica. I valori considerati buoni dovrebbero essere inferiori a 100 ms.

Classificazione dello stato del First Input Delay (FID) in base ai tempi. Immagine © web.dev

Le cause principali dei problemi con questa metrica (FID) provengono dall'esecuzione di JavaScript, quindi avremmo bisogno di identificare quale parte del codice sta facendo sì che la pagina impieghi tempo a reagire all'interazione. Personalmente ho vissuto questo problema con caricamenti di JS pubblicitario.

Cumulative Layout Shift o CLS

Il Cumulative Layout Shift è una metrica che pone limiti al caricamento di elementi che modificano la visualizzazione mentre vengono caricati. Stiamo parlando di dare stabilità agli elementi a schermo perché la vista non si sposti man mano che vengono caricate altre risorse.

Google considera (beh, Google e qualsiasi utente) che è davvero fastidioso che, quando abbiamo iniziato a interagire con una pagina (leggendo, scrollando, ecc.), un elemento che si carica più tardi sposti la posizione dell'utente rispetto al contenuto, costringendolo a correggere scrollando.

Questo esempio ci aiuta a spiegare meglio come funziona questa metrica. All'inizio vediamo il contenuto caricato sul lato sinistro. Quando Google parla di stabilità si riferisce al fatto che il caricamento di un terzo elemento non sposti quelli caricati in precedenza. Come vediamo nell'immagine a destra, il caricamento del video di YouTube ha spostato i due blocchi che erano stati caricati inizialmente.

Perché i Core Web Vitals sono importanti?

Da quando coesistiamo con i motori di ricerca, e più nello specifico con Google, esso ha incorporato obblighi per chiunque abbia un sito e voglia che sia una delle opzioni nei risultati di ricerca.

Migliorare l'accessibilità da tutti i dispositivi, favorire la navigazione sicura sotto un protocollo di sicurezza o penalizzare i siti che usavano pubblicità invasiva (interstitial), sono state alcune delle battaglie del gigante tecnologico.

Queste metriche sono indicatori che Google ci offre per segnalare quali parti del sito possono essere un problema per l'utente ma... significa che sono importanti?

Sia che intendiamo i siti dal punto di vista dei "robot" sia da quello degli "utenti", queste metriche sono indicatori che i nostri siti non stanno funzionando bene come dovrebbero. Abbiamo già visto in diversi studi quanto influisca il tempo di caricamento sulla conversione e sulla pazienza dell'utente. Attualmente non incidono sul ranking, ma vogliamo davvero ignorare queste metriche?

Da parte nostra, le terremo sicuramente in considerazione.

I Core Web Vitals influenzano il ranking?

Ad oggi, tutto quello che sappiamo è che le metriche per migliorare l'esperienza utente stanno diventando sempre più importanti, e alcune di esse vengono già prese in considerazione nei risultati di ricerca. Nell'articolo del 28 maggio sul blog di Google è stato annunciato che nel 2021 Google prevede di rilasciare un nuovo Update per incorporare diverse metriche legate all'esperienza utente.

Basta ricordare come ha gestito il Mobile First Index e i preavvisi. In questo caso, riferendoci di nuovo all'articolo di maggio, avverte che ci sarà una notifica preventiva di almeno 6 mesi, quindi... ci sarà un update entro la fine dell'anno prossimo?

Tool per ottimizzare i Core Web Vitals

Ora che abbiamo parlato di cosa sono i Core Web Vitals e dell'importanza che avranno nei prossimi mesi, è il momento di iniziare a lavorare sull'ottimizzazione di queste metriche. Tramite diversi strumenti potremo affrontare i problemi rilevati e ottenere un miglioramento delle performance.

Lighthouse

Lighthouse è un potente strumento open-source che troviamo in Chrome. Tramite Lighthouse possiamo fare l'audit del nostro sito eseguendo diversi test per ottenere risultati su carenze o parti della pagina che vanno ottimizzate. Tra queste parti ci sono le metriche dei Core Web Vitals.

Immagine presa dai risultati di un audit di Lighthouse

Page Speed Insights

Page Speed Insights è un'altra opzione che Google ci fornisce per ottenere i dati di performance del nostro sito. Questo tool ci mostra anche grafici delle metriche più importanti e il loro stato. Page Speed Insights si basa su un report di esperienza utente il cui obiettivo è ottenere dati in confronto con altri siti.

Metriche offerte da Page Speed Insights

Chrome UX

Chrome User Experience Report è un set di dati che Google fornisce sul comportamento degli utenti di tutto il mondo tramite Chrome. Per accedere a questi dati bisogna usare Big Query, oltre ad avere un account Google Cloud.

Tramite Google Data Studio hanno reso più semplice l'accesso e hanno tutto semi-pronto per noi in questa Dashboard

Chrome Dev Tools

Possiamo analizzare le metriche dei Core Web Vitals non solo con Lighthouse; se ci immergiamo negli strumenti per sviluppatori di Chrome, possiamo arrivare alle stesse conclusioni. Per esempio, nella scheda "Performance", se facciamo una registrazione o un nuovo caricamento, possiamo ottenere informazioni preziose su come si sta comportando la nostra URL.

Screenshot scattato nell'opzione Performance di Chrome Dev Tools

Web.Dev

C'è sempre un modo più facile di fare le cose, almeno quando si tratta di conoscere i nostri Core Web Vitals. Sul sito ufficiale abbiamo una pagina che dettaglia ciascuna metrica e ci dà una spiegazione di cos'è e delle pratiche per migliorarla.

Inoltre, sul Chrome Store abbiamo un'estensione che ci dà queste informazioni quando entriamo in ciascuna URL:

Con un'indicazione rossa o verde possiamo vedere lo stato della nostra URL rispetto a queste metriche:

Screenshot dei risultati forniti dall'estensione Web Vitals

Search Console

Search Console è uno strumento indispensabile per qualsiasi webmaster. È stata aggiunta una funzionalità che ci aiuta a vedere quali URL hanno problemi con queste 3 metriche (LCP, FID e CLS). Nel menu di sinistra abbiamo l'opzione "Core Web Vitals". Quando scegliamo questa opzione, compariranno due grafici che mostrano i risultati delle URL per dispositivo. Se scegliamo il dispositivo (desktop o mobile), vedremo nel dettaglio quali URL hanno problemi.

Non allarmarti se vedi un alto numero di URL sulla destra; è relativamente normale, perché i problemi di solito si verificano per tipo di pagina (per esempio i post del blog) e lavorando su uno di essi otterremo il miglioramento su tutti.

Conclusioni

Questo giro tra i Core Web Vitals vuole introdurci a metriche che acquisiranno sempre più protagonismo, e noi, che siamo SEO o webmaster, ci dovremo convivere. Da SEO Alive vogliamo consigliarti di sfruttare tutti questi strumenti che ti abbiamo fornito, che ti aiuteranno senza dubbio a migliorare le performance WPO del tuo sito.

*Accetti la sfida di migliorare la velocità del tuo sito? Esegui un test con uno qualsiasi dei tool che ti abbiamo citato e inviaci un messaggio con uno screenshot. Ti daremo un consiglio per migliorarlo completamente gratis! *