Web Performance: cosa sono i Core Web Vitals e come ottimizzarli.

Per misurare la qualità dell’esperienza di navigazione di un utente e le performance di un sito web sono stati definiti da Google dei parametri chiamati Web Vitals: tra questi, tre sono ritenuti fondamentali, si applicano a tutte le pagine web e dovrebbero essere misurate e verificate. I Core Web Vitals consistono in metriche e indicatori legati alla velocità, al tempo di risposta e alla stabilità del layout di un sito web e riflettono l’esperienza utente-centrica applicata a dati reali.

L’importanza dei Core Web Vitals si riflette quindi sia sulla UX che sulla SEO, ma qual è l’impatto a livello di business? Decidere di ottimizzarli e migliorare le performance del proprio sito web è da considerarsi come un investimento a lungo termine nella crescita della propria attività: per gli stakeholder, le prestazioni dovrebbero essere un criterio importante che definisce allo stesso tempo qualità e successo delle nuove funzionalità del prodotto per un miglior ritorno dell’investimento.

Offrire una navigazione ottimale porta gli utenti a vivere la propria esperienza in modo rapido e senza intoppi e può farli diventare clienti che si fidano e ritornano.

Per visualizzare l’attuale andamento e lo storico di un sito è possibile utilizzare la dashboard di CrUX su lookerstudio (CrUX Dashboard – Chrome Developers), inserendo l’indirizzo del sito che vogliamo monitorare, senza dover passare necessariamente da PageSpeed Insight o verificare il Core Web Vitals report all’interno di Search Console.

Dei vari Web Vitals ci concentriamo sui seguenti tre parametri principali:

LCP: Largest Contentful Paint, che riguarda le performance di caricamento
INP: Interaction to Next Paint, prende in considerazione l’interattività della pagina
CLS: Cumulative Layout Shift, consente di misurare la stabilità visiva della pagina che si sta caricando

Guardiamo i Core Web Vitals nel dettaglio uno per uno.
(Oppure potete rivedere il nostro webinar sulle SEO Performance)

p>LCP misura le performance di caricamento, cioè il tempo di render dell’elemento più largo nel viewport.

Fattori che influenzano LCP:

• Risposta lenta del server (diminuire il TTFB)
  • Ridurre i redirect
• Javascript e CSS bloccanti
  • Inserire il CSS critico on page
    <style type="text/css"> .accordion-btn {...} </style>
  • Se possibile, JS inline
    <script> ... </script>
  • Splittare script pesanti e ritardare quelli non necessari al primo rendering, con defer o async.
    <script defer src="..."></script>
• Tempo di caricamento delle risorse
  • Preload/fetchpriority alta su immagini candidate a LCP
    <link rel="preload" fetchpriority="high" as="image" href="/path/to/hero-image.webp" type="image/webp"> <img fetchpriority="high" src="/path/to/hero-image.webp">
• Rendering lato client
  • Lazy loading per immagini non visibili
    <img src="image.png" loading="lazy"> <picture><source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x"> <img src="photo.jpg" loading="lazy"></picture>
  • Usare CDN, comprimere immagini e formati moderni

Dato che i parametri dei Core Web Vitals cambiano con il tempo, il First Input Delay è stato sostituito a Marzo 2024 dall’Interaction to Next Paint Interaction to Next Paint (INP), come è stato annunciato durante il Google I/O 2023.

INP misura la velocità delle interazioni di una pagina rispetto alle azioni degli utenti: viene calcolata la latenza di quasi tutte le interazioni effettuate, quindi più è breve il tempo che trascorre tra una interazione ed un’altra, migliore è il feedback che viene restituito.

Quali attività si possono svolgere per ottimizzare questo valore:

• Prima di tutto è necessario trovare le interazioni lente all’interno del tuo sito e lavorare su di esse
• Ridurre il ritardo dell’input ottimizzando l’esecuzione dei file javascript
• Migliorare i callback degli eventi che scatenano le interazioni
• Evitare interruzioni del layout, che influenza le prestazioni di rendering
• Dimensioni del DOM: più la pagina ha un peso ridotto, più veloce è il rendering.

CLS misura la stabilità visiva, tutto ciò che causa spostamenti inattesi del layout durante il caricamento.

Per evitarlo:

• Includere sempre attributi di dimensione su immagini e video (o aspect ratio)
  <img src="image.png" loading="lazy" alt="…" width="200" height="200">
• Evitare inserimenti di contenuto sopra ad altro se non dovuto a interazione
• Animazioni che danno contesto e non modificano layout
• Caricare font moderni in preload e con crossorigin
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preload" as="style" href="(font CSS URL here)"> <link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="(font CSS URL here)"> <noscript> <link rel="stylesheet" href="(font CSS URL here)"> </noscript>

Abbiamo chiesto ad un cliente ecommerce di prendere in carico l’ottimizzazione del sito a livello di performance e Core Web Vitals.

Uno dei primi aspetti fondamentali di questo tipo di attività è prendere una pagina con molto traffico e cominciare con l’ottimizzazione solo di quella pagina, fare modifiche mirate e utilizzare un approccio iterativo.

Seguendo questo approccio abbiamo scelto quindi l’homepage e inserito l’url in https://pagespeed.web.dev/. La valutazione dei Core Web Vitals è risultata non superata in quanto tutti i valori avrebbero dovuto essere positivi, mentre come possiamo vedere di seguito solo due dei tre hanno raggiunto un livello soddisfacente.

Come ottimizzare quindi il CLS per raggiungere una valutazione positiva?

In questo caso è bastato ottimizzare il caricamento dei font utilizzati, a questo punto abbiamo lavorato anche sulle immagini e messo in lazy loading tutte quelle below the fold. Le tre above the fold invece le abbiamo impostate con caricamento ad alta priorità.

Il risultato? Come possiamo vedere nell’immagine seguente la valutazione Core Web Vitals è positiva, il Cumulative Layout Shift è finalmente verde e abbiamo anche ottenuto un miglioramento del Largest Contentful Paint di 0,3s.

La modifica effettuata sui font ha influenzato tutto il sito e ciò ha addirittura prodotto un significativo beneficio generale.

Dopo questa incremento delle performance dell’homepage, il processo prevede ora la prossima ottimizzazione delle altre pagine – di categoria, di prodotto, informative – che analizzeremo un passo alla volta per individuare le migliorie opportune per ognuna di loro.

Queste tecniche portano dunque benefici sia alla SEO che alla User Experience generale del sito internet, infatti, migliorano la posizione nella SERP (non solo lavorando su parole chiave, utilizzo semantico dei tag e backlinks) e consentono di ottimizzare il proprio sito internet offrendo una maggiore velocità di fruizione e una esperienza d’uso che rientra in parametri definiti e verificabili.

L’autorevolezza del nostro sito passa anche dal codice.

ome agenzia stiamo realizzando webinar tematici e, a fine marzo, abbiamo proposto l’argomento delle SEO performance approfondendo l’INP ed esposto alcuni suggerimenti.