La velocità è sempre è più importante
A partire da Giugno 2021 Google implementerà nel proprio algoritmo 3 nuove metriche di velocità. Questo aggiornamento dell'algoritmo era stato già annunciato diversi mesi fa e rientra nel progressivo interesse che Google ha dimostrato verso questo settore di SEO tecnica.
L’introduzione dei Core Web Vitals completa anche l’idea che la velocità non è importante di per sé, ma deve essere coniugata con una buona esperienza utente. L’obiettivo implicito è di rendere più responsabili webmaster, sviluppatori e SEO del fatto che è impossibile slegare delle buone performance da una buona navigabilità.
Largest Contentful Paint (LCP)
La metrica Largest Contentful Paint (LCP) riposta il tempo di rendering dell'immagine o del blocco di testo più grande visibile all'interno del Viewport, rispetto a quando la pagina ha iniziato il caricamento per la prima volta.
Nel dettaglio può essere compreso tra:
- elementi di tipo immagini <img>
- elementi di tipo immagini <image> dentro a elementi di tipo <svg>
- elementi di tipo video <video>
- elementi di immagini in background caricati attraverso la funzione url() che si usano dentro i CSS
- un elemento di blocco (Block-level) che contiene testo o altri elementi
La dimensione dell'elemento segnalata per Largest Contentful Paint è la dimensione visibile all'utente all'interno del Viewport.
Per gli elementi immagine ridimensionati varrà la dimensione più piccola. Per gli elementi di testo, viene considerata solo la dimensione dei loro nodi di testo (il rettangolo più piccolo che racchiude tutti i nodi di testo). Per tutti gli elementi, non viene considerato alcun margine, riempimento o bordo applicato tramite CSS. L’obiettivo posto da Google è di non superare i 2,5 secondi.
First Input Delay (FID)
Il FID misura il tempo da quando un utente interagisce per la prima volta con una pagina (ovvero quando fa clic su un collegamento, tocca un pulsante o utilizza un controllo personalizzato basato su JavaScript) al momento in cui il browser è effettivamente in grado di iniziare a elaborare gli eventi in risposta a tale interazione. In generale, il ritardo di input (ovvero la latenza di input) si verifica perché il thread principale del browser è impegnato su qualcos'altro, quindi non può (ancora) rispondere all'utente. La causa comune per cui ciò potrebbe accadere è che il browser è impegnato a fare nel parsing o nell’esecuzione di un file JavaScript di grandi dimensioni. Durante questo passaggio il browser non può eseguire alcuna azione perché il JavaScript che sta caricando potrebbe dirgli di fare qualcos'altro. FID misura il delta tra il momento in cui viene ricevuto un evento di input e il successivo di inattività del main thread.
L’obiettivo in questo caso è di stare sotto i 100ms
Cumulative Layout Shift (CLS)
Il CLS misura la somma totale di tutti i singoli cambiamenti del layout che si verificano durante l'intera durata della pagina. Un cambiamento del layout si verifica ogni volta che un elemento visibile cambia la sua posizione da un frame renderizzato a quello successivo. In pratica misura quanto una pagina viene modificata durante il suo caricamento per evitare che durante uno di questo cambi, ad esempio, un bottone venga spostato o un testo cambi improvvisamente posizione.
Per calcolare il punteggio dei singoli cambiamenti (Layout Shift Score) che andranno a comporre il CLS, Google usa la seguente formula:
layout shift score = impact fraction * distance fraction
L’Impact Fraction misura lo spazio normale occupato da un elemento nella finestra e quello che occupa dopo il suo spostamento. L'unione dell'area visibile dell'elemento prima e dopo lo spostamento decreta la percentuale della vista totale quindi la sua componente di impatto.
Nell'immagine sopra c'è un elemento di testo che occupa metà del Viewport in un frame. Nel successivo, l'elemento si sposta verso il basso del 25% dell'altezza del riquadro di visualizzazione. Il rettangolo rosso indica l'unione dell'area visibile dell'elemento in entrambi i frame, che, in questo caso, è il 75% della visualizzazione totale, quindi l’Impact Fraction è di impatto è 0,75.
La Distant Fraction è la distanza massima che un elemento ha percorso nel frame (orizzontalmente o verticalmente) divisa per la dimensione più grande del viewport (larghezza o altezza, a seconda di quale sia maggiore). Riprendendo l’esempio precedente la dimensione del Viewport più grande è l'altezza e l'elemento si è spostato del 25% dell'altezza della vista, il che rende la Distant Fraction di 0,25.
Quindi per l’esempio il Layout Shift Score è di 0,75*0,25 = 0,18.
L’obiettivo di CLS è di 0,1
Come comportarsi?
E’ bene ricordarsi che ogni volta che Google aggiorna il proprio algoritmo aggiungendo qualche nuovo fattore di ranking non vuol dire che tutto il lavoro fatto di ottimizzazione viene automaticamente annullato.
Queste modifiche all'algoritmo hanno di solito dei moderati impatti sulla generalità dei siti perché Google usa tanti altri segnali per valutare la pertinenza di un sito.
Detto questo, questo aggiornamento mette sicuramente in allarme tutti quei siti che hanno nel corso degli ultimi anni fatto un uso smodato di JavaScript senza badare tanto ai problemi di Performance e UX. JavaScript è sicuramente utilissimo ma spesso non viene compreso il suo profondo impatto sulla velocità e sulla usabilità del sito.
In attesa di vedere cosa comporterà nella pratica questo aggiornamento è bene prepararsi ed iniziare a scoprire i valori di queste 3 nuove metriche per il proprio sito. Per farlo ci sono diverse possibilità:
- Guardare il report di Google Search Console “Core Web Vitals”
- Usare Pagespeed Insights
- Usare i report di Lighthouse
Come funzionano gli algoritmi? Te lo spieghiamo in questo articolo