Come migliorare il punteggio Core Web Vitals

Cosa sono i Core Web Vitals

I Core Web Vitals sono un insieme di metriche che Google utilizza per misurare l'esperienza utente sulle pagine web. Dal 2021 queste metriche sono un fattore di ranking nella ricerca Google, il che significa che un sito con Core Web Vitals migliori ha un vantaggio nei risultati di ricerca rispetto a un sito con punteggi inferiori. Con questa mossa Google ha chiarito che l'esperienza utente non è solo una questione di design, ma un parametro tecnico misurabile che incide sulla visibilità nella ricerca.

Le tre metriche principali sono il Largest Contentful Paint che misura la velocità di caricamento, l'Interaction to Next Paint che misura la reattività alle azioni dell'utente e il Cumulative Layout Shift che misura la stabilità visiva della pagina. Ogni metrica ha soglie definite per i punteggi buono, da migliorare e scarso. L'obiettivo è che il 75 per cento delle visite alla pagina abbia punteggi buoni per tutte e tre le metriche. Capire ogni metrica e le tecniche di ottimizzazione è la chiave per ottenere punteggi elevati.

Largest Contentful Paint (LCP)

Cosa misura l'LCP

L'LCP misura il tempo necessario affinché l'elemento visibile più grande della pagina venga caricato nel viewport. Questo elemento è in genere un'immagine hero, un grande titolo o il poster di un video. Un buon punteggio è un LCP inferiore a 2,5 secondi; tra 2,5 e 4 secondi richiede miglioramenti, e oltre 4 secondi è un punteggio scarso. L'LCP è la metrica più importante per la percezione della velocità, perché gli utenti considerano una pagina caricata quando vedono il contenuto principale, indipendentemente dal fatto che tutti gli elementi abbiano finito di caricarsi.

Ottimizzazione delle immagini

Le immagini sono la causa più comune di un LCP scarso, perché sono solitamente l'elemento più grande della pagina. Usa formati moderni come WebP o AVIF, che offrono la stessa qualità dell'immagine con un peso del file inferiore del 25-50 per cento rispetto al JPEG. Imposta le dimensioni delle immagini alla misura esatta in cui vengono visualizzate, invece di inviare un'immagine da 4000 pixel per visualizzarla a 800 pixel. Le immagini responsive con l'attributo srcset consentono al browser di scegliere la dimensione ottimale per ogni dispositivo.

L'hint di preload per l'immagine LCP indica al browser di iniziare a scaricare l'immagine il prima possibile, senza attendere che il parser raggiunga il tag img. Aggiungi link rel preload as image href percorso-immagine nella sezione head della pagina. Per le immagini hero above the fold, usa l'attributo fetchpriority high che dà priorità al download rispetto alle altre risorse. Evita il lazy loading per l'immagine LCP, perché ne ritarda il caricamento.

Tempo di risposta del server

Il Time to First Byte incide direttamente sull'LCP, perché il contenuto non può iniziare a caricarsi finché il server non risponde. Un TTFB inferiore a 200 millisecondi è l'obiettivo per prestazioni ottimali. Usa una CDN per distribuire i contenuti dal server geograficamente più vicino al visitatore. Il caching lato server con Redis o Memcached elimina la necessità di rigenerare la pagina a ogni richiesta. In BeoHosting, i nostri server con dischi SSD e configurazione ottimizzata garantiscono un TTFB basso in tutta Italia.

Interaction to Next Paint (INP)

Cosa misura l'INP

L'INP ha sostituito il First Input Delay a marzo 2024 come metrica di reattività. Mentre il FID misurava solo il ritardo del primo clic, l'INP misura la reattività di tutte le interazioni durante l'intera visita alla pagina e considera l'interazione peggiore. Un buon punteggio è un INP inferiore a 200 millisecondi. L'INP misura il tempo che intercorre tra un'azione dell'utente, come un clic, un tap o la pressione di un tasto, e il successivo aggiornamento visivo dello schermo, che comprende l'elaborazione dell'event handler, il calcolo del layout e il rendering.

Ottimizzazione del JavaScript

I task JavaScript lunghi bloccano il main thread e impediscono al browser di rispondere alle interazioni dell'utente. Suddividi i task lunghi in parti più piccole usando tecniche come lo yielding con scheduler.yield o setTimeout. Il code splitting con import dinamici carica solo il JavaScript necessario per la pagina corrente invece dell'intero bundle. Il tree shaking elimina il codice inutilizzato dal bundle finale, riducendone dimensione e tempo di parsing.

Gli script di terze parti come analytics, widget di chat e codice pubblicitario sono una causa comune di INP scarso, perché vengono eseguiti sul main thread e bloccano le interazioni dell'utente. Caricali in modo asincrono con gli attributi async o defer e ritarda la loro inizializzazione finché l'utente non interagisce con la pagina. I Web Worker consentono di eseguire operazioni computazionalmente intensive fuori dal main thread, liberandolo per le interazioni dell'utente.

Debouncing e throttling

Gli event handler che si eseguono a ogni pressione di tasto, movimento del mouse o evento di scroll possono degradare notevolmente l'INP. Il debouncing ritarda l'esecuzione della funzione finché l'utente non interrompe l'azione, ad esempio 300 millisecondi dopo l'ultimo carattere in un campo di ricerca. Il throttling limita la frequenza di esecuzione, ad esempio una volta ogni 100 millisecondi per un handler di scroll. Entrambe le tecniche riducono il numero di esecuzioni degli event handler e liberano il main thread per l'elaborazione delle interazioni dell'utente.

Cumulative Layout Shift (CLS)

Cosa misura il CLS

Il CLS misura la stabilità visiva della pagina quantificando quanto gli elementi si spostano in modo imprevisto durante il caricamento. Un buon punteggio è un CLS inferiore a 0,1. Lo spostamento del layout avviene quando un elemento visibile cambia posizione da un frame renderizzato a un altro senza un'azione dell'utente. Le cause tipiche sono immagini senza dimensioni definite, font che si caricano in ritardo, contenuti inseriti dinamicamente sopra l'area visibile e annunci che si caricano con ritardo.

Dimensioni per immagini e video

Definisci sempre gli attributi width e height sugli elementi img e video. Questo consente al browser di riservare lo spazio prima che la risorsa si carichi, evitando lo spostamento del contenuto sottostante. La proprietà CSS aspect-ratio è un'alternativa moderna che calcola automaticamente le dimensioni in base al rapporto definito. Per le immagini responsive, usa il CSS max-width 100 per cento e height auto insieme agli attributi HTML definiti per width e height, che garantiscono il rapporto d'aspetto esatto.

Strategia di caricamento dei font

I web font che si caricano in ritardo possono causare effetti FOIT o FOUT che spostano il contenuto. Font-display swap mostra subito il font di fallback e lo sostituisce con il web font una volta caricato, ma questa sostituzione può causare uno spostamento del layout se i font differiscono notevolmente nelle dimensioni. L'hint di preload per i font critici ne accelera il caricamento. Il descrittore size-adjust nella dichiarazione font-face allinea le dimensioni del font di fallback a quelle del web font, riducendo al minimo lo spostamento al momento della sostituzione.

Contenuti dinamici

Annunci, banner dei cookie, notifiche e contenuti inseriti dinamicamente sono cause comuni di CLS perché occupano spazio che sposta il resto della pagina. Riserva lo spazio per gli annunci con la proprietà CSS min-height ancora prima che il codice dell'annuncio si carichi. Posiziona il banner dei cookie in cima o in fondo allo schermo con position fixed, così non sposta il contenuto sottostante. Per i contenuti caricati in modo asincrono come slider o infinite scroll, usa placeholder skeleton che occupano lo stesso spazio del contenuto finale.

Strumenti di misurazione

Dati di laboratorio

Google Lighthouse in Chrome DevTools fornisce la misurazione di laboratorio dei Core Web Vitals sul tuo computer. PageSpeed Insights combina dati di laboratorio e dati sul campo e dà raccomandazioni concrete di ottimizzazione. WebPageTest offre un'analisi più approfondita con diagrammi waterfall, visualizzazione filmstrip del caricamento e la possibilità di testare da diverse posizioni e dispositivi. Lighthouse CI consente la misurazione automatica delle prestazioni a ogni deploy come parte della pipeline CI/CD.

Dati sul campo

Il Chrome User Experience Report fornisce dati reali sui Core Web Vitals provenienti da utenti reali del browser Chrome. Google Search Console mostra un report sui Core Web Vitals per il tuo sito con l'identificazione degli URL da migliorare. La libreria JavaScript Web Vitals di Google consente di raccogliere le metriche dai tuoi visitatori e inviarle a un sistema di analytics. I dati sul campo sono più importanti di quelli di laboratorio perché riflettono l'esperienza reale degli utenti su dispositivi e reti diverse.

Impatto dell'hosting sui Core Web Vitals

Prestazioni del server

La qualità dell'hosting incide direttamente sul TTFB e di conseguenza sull'LCP. L'hosting condiviso con server sovraccarichi può portare a un TTFB superiore al secondo, il che rende praticamente impossibile ottenere un buon LCP. Dischi SSD, RAM sufficiente e una configurazione del server ottimizzata sono il minimo per buone prestazioni. La versione PHP 8.2 o più recente con OPcache accelera notevolmente l'esecuzione del codice PHP rispetto alle versioni precedenti.

In BeoHosting, i nostri pacchetti di hosting ottimizzati sono messi a punto per i Core Web Vitals con dischi NVMe SSD, supporto HTTP/2 e HTTP/3, compressione Brotli e caching a livello di server. Il web server LiteSpeed che utilizziamo offre prestazioni superiori rispetto ad Apache, specialmente per i siti WordPress con il plugin LiteSpeed Cache. La nostra infrastruttura garantisce bassa latenza per i visitatori locali, migliorando direttamente le metriche TTFB e LCP.

Conclusione

L'ottimizzazione dei Core Web Vitals richiede un approccio sistematico, con focus su immagini e server per l'LCP, ottimizzazione del JavaScript per l'INP e stabilità visiva per il CLS. Usa gli strumenti di misurazione per identificare le pagine problematiche e monitorare i progressi dopo ogni ottimizzazione. La combinazione di hosting di qualità, codice ottimizzato e caching configurato correttamente può migliorare notevolmente tutte e tre le metriche e garantire posizioni migliori nella ricerca Google.