Core Web Vitals: il confine tra UX e SEO

Introduzione ai Core Web Vitals

Chiunque tratti di SEO è a conoscenza dei Core Web Vitals! Non importa se il tuo sito web è un CMS in WordPress o Prestashop, queste metriche vitali sono alla base di tutto il web!

Si tratta di tre metriche fondamentali (LCP, FID, CLS) che servono a valutare la user experience del tuo sito e quindi l’interazione dell’utente con le tue pagine web e contenuti. Hanno un grosso impatto per la SEO e il ranking sui motori di ricerca.

Non serve dire altro, partiamo subito con questo articolo dove andremo a spiegare nel dettaglio le metriche con tanto di consigli su come migliorare il punteggio e i principali strumenti con cui far valutare e misurare le tue pagine web!

Core Web Vitals = SEO e ranking

I Web Core Vitals sono diventati molto famosi dopo il 2016 perché Google ha deciso a buon ragione, di renderli uno dei fattori di ranking nelle sue SERP e la ragione è molto semplice: queste metriche fondamentali descrivono l’interazione e l’esperienza degli utenti sul tuo sito.

Google stesso ha dichiarato che l’ottimizzazione di questi Web Core Vitals, quindi dell’esperienza utente, è la chiave per un successo a lungo termine di qualsiasi sito web o WordPress che sia!

Quindi che tu sia un imprenditore, un esperto di marketing o uno sviluppatore, le Core Web Vitals possono aiutarti a capire la qualità del tuo sito web e a identificare le opportunità di miglioramento.

Quali sono i Core Web Vitals?

LCP, FID, CLS questi sono i Web Core Vitals ma non spaventarti, non è niente di complicato! 

Ciascuno dei Core Web Vitals rappresenta un aspetto distinto dell’esperienza utente e ognuno di questi aspetti è fisicamente misurabile:

• Il primo, LCP o Largest Contentful Paint riguarda il caricamento della pagina,
• il secondo FID acronimo di First Input Delay invece riguarda l’interattività
• l’ultimo detto Cumulative Layout Shift o CLS riguarda i cambiamenti nel layout della pagina e la stabilità visiva.

Le metriche Web Core Vitals sono in evoluzione

Le metriche che compongono i Web Core Vitals si sono evolute nel tempo e sono in costante evoluzione. L’attuale set è stato definito ancora nel 2020 e come detto sopra si concentra sui tre aspetti, per Google fondamentali, dell’esperienza utente: LCP o caricamento, FID o interattività e per finire stabilità visiva o CLS.

Se sei un curioso e vuoi dare un’occhiata a come queste metriche sono maturate nel tempo e alle ultime modifiche che Google ha apportato alle Core Web Vitals, come bug, fix e cambiamenti, ti invito a dare un’occhiata al changelog ufficiale delle Web Vitals.

Detto questo, andiamo ad analizzare le metriche del Core Web Vitals nel dettaglio, le relative soglie e tempistiche da rispettare!

Largest Contentful Paint (LCP) – Caricamento 

Largest Contentful Paint (LCP) è la prima delle tre metriche delle Core Web Vitals e rappresenta la velocità di caricamento del contenuto principale della tua pagina web.

In particolare, LCP misura il tempo da quando l’utente avvia il caricamento della pagina fino al rendering dell’immagine o del blocco di testo più grande all’interno della sua viewport (largest element content paint).

Fattori che incidono sul punteggio LCP della pagina

Analizziamo velocemente i fattori primari che incidono sul punteggio LCP, così facendo capirai all’instante dove devi mettere mano per migliorare il punteggio!

Ecco i fattori principali che incidono sul caricamento:

• una risposta lenta dal server,
• JS e CSS che bloccano o rallentano il rendering della pagina,
• tempo di caricamento delle risorse,
• tempo necessario al rendering dal lato client.

Come migliorare il tuo LCP?

Ecco alcuni consigli per migliorare lo score della tua pagina se ti dovessi ritrovare sulla soglia del migliorabile o addirittura scarso:

• utilizzare un hosting veloce come Siteground,
• comprimere e ottimizzare le immagini della pagina,
• minificare CSS , JS e HTML,
• ottimizzare i web fonts,
• servire i contenuti da un CDN Content Delivery Network.

Se vuoi saperne di più ecco la fonte ufficiale di Google su LCP.

First Input Delay (FID) – Interattività

Tutti sappiamo l’importanza della prima impressione e il First Input Delay è un proprio così! È la prima impressione dell’utente nei confronti della tua pagina o sito web.

Il First Input Delay (FID) in italiano primo ritardo di input, misura il tempo da quando l’utente interagisce per la prima volta con la pagina al momento in cui il browser è effettivamente in grado di rispondere a questa interazione.

Questo primo input dell’utente può essere di vario tipo, quando fa click su un collegamento, tocca un pulsante o utilizza una qualche funzione di JavaScript.

Come migliorare il tuo FID?

Se la pagina web, o meglio il browser, sta eseguendo sul thread principale delle task pesanti in JavaScript, non sarà in grado di rispondere all’input dell’utente e questo inciderà sul tuo punteggio FID.

Quello che consiglia anche Google è quindi di:

• spezzare le task più lunghe che tengono occupato il Main Thread,
• ottimizzare la pagina per migliorare il tempo necessario alla prima interazione da parte dell’utente,
• utilizzare un Web Worker per le task più dispendiose (uno script JavaScript che gira in background, indipendentemente dagli script che gestiscono la UI),
• ridurre l’utilizzo di script di terze party, i famosi Third-party script,
• ridurre i tempi di esecuzione del JavaScript.

Cumulative Layout Shift (CLS) – Cambiamenti nel layout

Cumulative Layout Shift o CLS, è la misura di quanto la pagina web cambia durante la sua vita o l’utilizzo da parte dell’utente. 

Se ad esempio un visitatore naviga su una delle pagine del tuo sito web e questa, mentre l’utente sta leggendo o interagendo, carica un banner pubblicitario che fa spostare tutto il contenuto della pagina in basso, ti potrebbe venire assegnato un punteggio CLS molto basso!

Questo Cumulative Layout Shift (CLS) è quindi una metrica che valuta l’esperienza utente misurando quanto le pagine si spostano e cambiano il layout inaspettatamente. 

il Layout Shift è fondamentale per la UX

Quante volte ti sarà capitato di leggere un articolo online e proprio mentre stai per cliccare il layout della pagina cambia ed ecco che il tuo click finisce su qualcosa che non volevi, come un ADS o altro!

Guarda che disastro il video qui sotto: l’utente invia un ordine per errore e non volendo, questo tutto per colpa di uno spostamento del layout!

Migliorare il punteggio CLS non è difficile

Anche se ci sono diversi elementi del sito che influiscono sull’esperienza dell’utente, un punteggio CLS scarso influisce anche sull’ottimizzazione dei motori di ricerca o SEO del tuo sito web.

Fortunatamente migliorare il tuo punteggio CLS non è difficile, prova a seguire queste tre linee guida di Google e sicuramente vedrai un cambiamento sul tuo score:

• non inserire mai contenuti sopra a dei contenuti già esistenti (tranne che in risposta all’interazione dell’utente perché in questo caso una modifica al layout è prevista dall’utente),
• utilizza sempre gli attributi size (width e height) per definire la dimensione di immagini e video, in alternativa puoi usare i box proporzione CSS ma dovrai fare un po’ di matematica, vedi questo piccolo sito interattivo chiamato RatioBuddy per capire di cosa sto parlando, oppure dei plugin come FitVids.js

//vedi https://ratiobuddy.com/
//esempio 16:9 Aspect Ratio / Proporzione
.outer {
  position: relative;
  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: (9 / 16) * 100%;
  }
  > .inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

Misurare e valutare i Core Web Vitals

La cosa più utile è che, attraverso gli strumenti forniti da Google come Lighthouse e Pagespeed, sarai in grado di analizzare queste metriche fondamentali e a capire come si riflettono sull’esperienza reale dei tuoi utenti.

Riuscirai a capirlo semplicemente perché dagli strumenti di analisi sopra citati, otterrai un vero risultato o punteggio dal quale puoi partire per migliorare!

PageSpeed Insight vs web.dev/measure

Cosa stai aspettando? Vai subito su web.dev o PageSpeed Insight per ottenere il tuo punteggio.

Usa PSI quando vuoi misurare e ottimizzare i tuoi Core Web Vitals e usa web.dev/measure quando ottimizzi un insieme più ampio di segnali riguardanti sempre la qualità della pagina web inviata.

web.dev/measure

web.dev/measure misura la qualità complessiva di una pagina web in un ambiente di laboratorio/test usando il famoso Lighthouse di cui abbiamo già discusso. Questa misurazione fornisce un rapporto su più categorie valutate da Lighthouse tra cui prestazioni, accessibilità e SEO.

PageSpeed Insights (PSI)

PageSpeed Insights è incentrato sulle prestazioni, utilizzando i dati di Lighthouse e sul campo (Chrome UX Report) per fornire un riepilogo delle prestazioni. PSI fornisce approfondimenti sul livello di origine nel campo, mentre web.dev/measure ha lo scopo di approfondire un singolo URL nel laboratorio.