Google condivide i nuovi consigli Core Web Vitals che sono realistici per la maggior parte degli sviluppatori e applicabili alla maggior parte dei siti web.

  • I Core Web Vitals sono tre metriche che misurano il tempo di caricamento, l’interattività e la stabilità visiva.
  • Il team di Chrome di Google ha trascorso un anno a capire i consigli più importanti che poteva dare riguardo a Core Web Vitals.
  • Questi sono i consigli a cui dovresti dare la priorità quando il tempo è limitato.

Google sta condividendo una serie aggiornata di consigli per l’ottimizzazione di Core Web Vitals per aiutarti a decidere a cosa dare la priorità quando il tempo è limitato.

I Core Web Vitals sono tre metriche che misurano il tempo di caricamento, l’interattività e la stabilità visiva.

Google considera queste metriche essenziali per fornire un’esperienza positiva e le utilizza per classificare i siti Web nei risultati di ricerca.

Nel corso degli anni, Google ha fornito numerosi suggerimenti per migliorare i punteggi di Core Web Vitals.

Sebbene valga la pena implementare ciascuna delle raccomandazioni di Google, l’azienda si rende conto che non è realistico aspettarsi che qualcuno faccia tutto.

Se non hai molta esperienza con l’ottimizzazione delle prestazioni del sito web, può essere difficile capire cosa avrà l’impatto più significativo.

Potresti non sapere da dove iniziare con un tempo limitato da dedicare al miglioramento dei Core Web Vitals. È qui che entra in gioco l’elenco rivisto di raccomandazioni di Google.

In un post sul blog, Google afferma che il team di Chrome ha trascorso un anno cercando di identificare i consigli più importanti che può dare in merito a Core Web Vitals.

Il team ha messo insieme un elenco di raccomandazioni realistiche per la maggior parte degli sviluppatori, applicabili alla maggior parte dei siti Web e con un impatto significativo nel mondo reale.

Ecco cosa consiglia il team di Chrome di Google.

Ottimizzazione della pittura con contenuto più grande (LCP)

La metrica Largest Contentful Paint (LCP) misura il tempo necessario affinché il contenuto principale di una pagina diventi visibile agli utenti.

Google afferma che solo circa la metà di tutti i siti Web soddisfa la soglia LCP consigliata.

Questi sono i migliori consigli di Google per migliorare LCP.

Assicurati che la risorsa LCP sia facilmente reperibile nell’origine HTML

Secondo il Web Almanac 2022 di HTTP Archive, il 72% delle pagine Web mobili ha un’immagine come contenuto principale. Per migliorare LCP, i siti Web devono garantire che le immagini vengano caricate rapidamente.

Potrebbe essere impossibile raggiungere la soglia LCP di Google se una pagina attende che i file CSS o JavaScript vengano completamente scaricati, analizzati ed elaborati prima che l’immagine possa iniziare a caricarsi.

Come regola generale, se l’elemento LCP è un’immagine, l’URL dell’immagine dovrebbe essere sempre individuabile dalla sorgente HTML.

Assicurarsi che la risorsa LCP abbia la priorità

Oltre ad avere la risorsa LCP nel codice HTML, Google consiglia di darle la priorità e di non ritardare rispetto ad altre risorse meno critiche.

Anche se hai incluso la tua immagine LCP nella sorgente HTML utilizzando un tag <img> standard, se ci sono diversi tag <script> nella sezione <head> della tua pagina web prima del tag <img>, può ritardare il tempo di caricamento della tua risorsa immagine.

Sarebbe meglio se evitassi anche qualsiasi azione che possa abbassare la priorità dell’immagine LCP, come l’aggiunta dell’attributo loading=”lazy”.

Fai attenzione con l’utilizzo di qualsiasi strumento di ottimizzazione delle immagini che applica automaticamente il caricamento lento a tutte le immagini.

Utilizzare una rete per la distribuzione di contenuti (CDN) per ridurre il tempo al primo morso (TTFB)

Un browser deve ricevere il primo byte della risposta iniziale del documento HTML prima di caricare eventuali risorse aggiuntive.

La misura di questo tempo è chiamata Time to First Byte (TTFB) e più velocemente ciò accade, prima possono iniziare altri processi.

Per ridurre al minimo il TTFB, servi i tuoi contenuti da una posizione vicino ai tuoi utenti e utilizza la memorizzazione nella cache per i contenuti richiesti di frequente.

Il modo migliore per fare entrambe le cose, afferma Google, è utilizzare una rete di distribuzione dei contenuti (CDN).

Ottimizzazione dello spostamento cumulativo del layout (CLS)

Il Cumulative Layout Shift (CLS) è una metrica utilizzata per valutare quanto sia stabile il layout visivo di un sito web. Secondo Google, circa il 25% dei siti web non soddisfa lo standard consigliato per questa metrica.

Questi sono i migliori consigli di Google per migliorare CLS.

Imposta dimensioni esplicite per il contenuto della pagina

I cambiamenti di layout possono verificarsi quando il contenuto di un sito Web cambia posizione al termine del caricamento. È importante prenotare lo spazio in anticipo il più possibile per evitare che ciò accada.

Una causa comune dei cambiamenti di layout è rappresentata dalle immagini non dimensionate, che possono essere risolte impostando esplicitamente gli attributi width e height o proprietà CSS equivalenti.

Le immagini non sono l’unico fattore che può causare cambiamenti di layout nelle pagine web. Altri contenuti, come annunci di terze parti o video incorporati che vengono caricati in un secondo momento, possono contribuire a CLS.

Un modo per risolvere questo problema è utilizzare la proprietà aspect-ratio nei CSS. Questa proprietà è relativamente nuova e consente agli sviluppatori di impostare proporzioni per immagini ed elementi non immagine.

Fornire queste informazioni consente al browser di calcolare automaticamente l’altezza appropriata quando la larghezza è basata sulla dimensione dello schermo, in modo simile a come avviene per le immagini con dimensioni definite.

Assicurati che le pagine siano idonee per Bfcache

I browser utilizzano una funzionalità chiamata back/forward cache, o bfcache in breve, che consente di caricare istantaneamente le pagine da una posizione precedente o successiva nella cronologia del browser utilizzando un’istantanea della memoria.

Questa funzione può migliorare significativamente le prestazioni eliminando i cambiamenti di layout durante il caricamento della pagina.

Google consiglia di verificare se le tue pagine sono idonee per bfcache utilizzando Chrome DevTools e lavorando su eventuali motivi per cui non lo sono.

Evita animazioni/transizioni

Una causa comune dei cambiamenti di layout è l’animazione di elementi sul sito Web, come banner di cookie o altri banner di notifica, che scorrono dall’alto o dal basso.

Queste animazioni possono allontanare altri contenuti, influenzando CLS. Anche quando non lo fanno, l’animazione può comunque avere un impatto su CLS.

Google afferma che le pagine che animano qualsiasi proprietà CSS che potrebbe influire sul layout hanno il 15% in meno di probabilità di avere un CLS “buono”.

Per mitigare questo, è meglio evitare di animare o trasferire qualsiasi proprietà CSS che richieda al browser di aggiornare il layout, a meno che non sia in risposta all’input dell’utente, come un tocco o la pressione di un tasto.

L’utilizzo della proprietà CSS transform è consigliato per le transizioni e le animazioni quando possibile.

Ottimizzazione del First Input Delay (FID)

First Input Delay (FID) è una metrica che misura quanto velocemente un sito web risponde alle interazioni dell’utente.

Sebbene la maggior parte dei siti Web funzioni bene in quest’area, Google ritiene che ci sia spazio per miglioramenti.

La nuova metrica di Google, Interaction to Next Paint (INP), è un potenziale sostituto per FID e le raccomandazioni fornite di seguito sono rilevanti sia per FID che per INP.

Evitare o interrompere attività lunghe

Le attività sono qualsiasi lavoro discreto eseguito dal browser, inclusi rendering, layout, analisi e compilazione ed esecuzione di script.

Quando le attività richiedono molto tempo, più di 50 millisecondi, bloccano il thread principale e rendono difficile per il browser rispondere rapidamente agli input dell’utente.

Per evitare ciò, è utile suddividere le attività lunghe in attività più piccole, offrendo al thread principale maggiori opportunità di elaborare il lavoro critico visibile all’utente.

Ciò può essere ottenuto cedendo spesso al thread principale in modo che gli aggiornamenti del rendering e altre interazioni dell’utente possano avvenire più rapidamente.

Evita JavaScript non necessario

Un sito Web con una grande quantità di JavaScript può portare ad attività che competono per l’attenzione del thread principale, il che può influire negativamente sulla reattività del sito Web.

Per identificare e rimuovere il codice non necessario dalle risorse del tuo sito web, puoi utilizzare lo strumento di copertura in Chrome DevTools.

Diminuendo la dimensione delle risorse richieste durante il processo di caricamento, il sito Web impiegherà meno tempo ad analizzare e compilare il codice, risultando in un’esperienza utente più fluida.

Evitare aggiornamenti di rendering di grandi dimensioni

JavaScript non è l’unica cosa che può influire sulla reattività di un sito web. Il rendering può essere costoso e interferire con la capacità del sito Web di rispondere agli input dell’utente.

L’ottimizzazione del lavoro di rendering può essere complessa e dipende dall’obiettivo specifico. Tuttavia, esistono alcuni modi per garantire che gli aggiornamenti del rendering siano gestibili e non si trasformino in attività lunghe.

Google consiglia quanto segue:

  • Evita di utilizzare requestAnimationFrame() per eseguire qualsiasi lavoro non visivo.
  • Mantieni le dimensioni del tuo DOM ridotte.
  • Usa il contenimento CSS.

Conclusione

I Core Web Vitals sono una metrica importante per fornire un’esperienza utente positiva e il posizionamento nei risultati di ricerca di Google.

Sebbene valga la pena implementare tutti i consigli di Google, questo elenco sintetico è realistico, applicabile alla maggior parte dei siti Web e può avere un impatto significativo.

Stai cercando un Consulente SEO?

Se stai cercando un consulente seo conttattami a [email protected] o al numero 345-8541524.

La tua Azienda ha bisogno di un Corso SEO Aziendale?

Per maggiori informazioni contattati via mail  [email protected] o al numero 345-8541524.

Sei di Milano e hai bisogno di un Corso SEO?

Per maggiori informazioni contattati via mail  [email protected] o al numero 345-8541524.

Profilo Autore

Paolo Marzano
Paolo Marzano
Da oltre 10 anni mi occupo di strategie SEO per piccole e grandi aziende. L’obiettivo è aumentare e trasformare il traffico in Clienti.