I Core Web Vitals sono tra i parametri vitali di un sito web quelli che Google reputa fondamentali per l’esperienza di navigazione di un utente.
In particolare, sono tre metriche legate alla velocità, al tempo di risposta e alla stabilità del layout.
- LCP (Larger Contentful Paint) – velocità di caricamento
- FID (First Input Delay) – Interattività della pagina
- CLS (Cumulative Layout Shift) – Stabilità visiva del caricamento
LCP (LARGER CONTENTFUL PAINT)
LCP (Larger Contentful Paint) è una metrica Core Web Vitals che indica il tempo di rendering dell’elemento più grande (Largest) che appare nella viewport di apertura del sito, “Up the Fold”. Mentre tutto quello che è “Below the Fold” non viene considerato.
Per fornire una buona esperienza utente, LCP dovrebbe avvenire entro 2,5 secondi dall’inizio del caricamento della pagina.
Vediamo dunque quali sono le cause più comuni di un valore dell’LCP scadente.
TEMPI DI RISPOSTA DEL SERVER LENTI
Per misurare il tempo di risposta del server si usa la metrica Time to First Byte (TTFB), ovvero il tempo impiegato dal browser per ricevere il primo byte della pagina web.
Per migliorare la metrica TTFB puoi agire su vari aspetti:
Fai un’ottimizzazione del server
Per migliorare le prestazioni del tuo sito web lato server puoi intervenire cambiando l’hosting del tuo sito web con uno più performante.
Oppure prova un tema più ottimizzato: l’esecuzione di query troppo complesse e la creazione dinamica delle pagine sono elementi critici per la rapidità di risposta del server.
Serviti di un Content Delivery Network (CDN)
Tramite una Content Delivery Network (CDN) il tuo sito è ospitato su più server distribuiti in varie località geografiche. Questo permette agli utenti più lontani geograficamente dal tuo server di non avere un caricamento della pagina lento.
Impiega la cache per memorizzare codice HTML statico
ll codice HTML statico non viene modificato a ogni richiesta, puoi quindi memorizzarlo nella cache lato server per non ricrearlo inutilmente sprecando risorse.
Usa un Service Worker per servire pagine HTML cache-first
Un service worker viene eseguito in background del browser e agendo come un proxy può intercettare le richieste dal server. Quindi potrà controllare il contenuto della pagina HTML nella cache e aggiornarla solo quando il contenuto è cambiato.
Stabilisci in anticipo connessioni di terze parti
Può capitare che per mostrare contenuti critici sulla pagina sono necessarie richieste del server a origini di terze parti. In questo caso utilizza rel=”preconnect” per informare il browser che la tua pagina intende stabilire una connessione il prima possibile.
JAVASCRIPT E CSS CHE BLOCCANO IL RENDERING
Il browser inizia il rendering della pagina web analizzando il markup HTML del DOM (Document Object Model). Il rendering HTML si ferma quando incontra fogli di stile esterni (<link rel=”stylesheet”>) o tag JavaScript sincroni (<script src=”main.js”>), ritardando l’LCP.
Puoi limitare il blocco del rending da css e javascript attuando alcune ottimizzazioni.
Riduci il tempo di blocco di CSS
Assicurati che solo la quantità minima di CSS necessario blocchi il rendering sul tuo sito.
Minimizza CSS
La minimizzazione dei file css elimina caratteri di leggibilità come spaziatura, rientro o commenti non necessari per il browser;
Rimanda CSS non critico
Carica il css non necessario per il rendering iniziale in modo asincrono, rimuovilo o spostalo su altro foglio se utilizzato da un’altra pagina; puoi trovare eventuali css inutilizzati nella scheda Copertura in Chrome DevTools;
Colloca CSS critico in linea
Inserisci direttamente nell’<head> qualsiasi css utilizzato per i contenuti “Above the Fold” evitando di effettuare una richiesta andata e ritorno per recuperare css critici.
Riduci il tempo di blocco di JavaScript
Per migliorare la velocità del rendering riduci al minimo il codice javascript necessario.
Ecco alcune modi per ottimizzare i tuoi script:
- Minimizza e comprimi i file JavaScript;
- Rimanda JavaScript inutilizzato;
- Riduci al minimo i polyfill inutili.
TEMPI DI CARICAMENTO DELLE RISORSE LENTI
Il tempo necessario per caricare elementi renderizzati “Above the Fold” avrà un effetto diretto su LCP.
Esistono alcuni modi per garantire che queste risorse vengano caricati il più velocemente possibile:
Ottimizza e comprimi le immagini
Spesso le immagini sono l’elemento più grande che influisce sui tempi di caricamento della pagina. Ad esempio hero images, grandi caroselli o banner. Per velocizzare il caricamento della pagina e di conseguenza migliorare l’LCP puoi: rimuovere le immagini non indispensabili; comprimere le immagini; convertire le immagini in formati più recenti (JPEG 2000, JPEG XR o WebP); usare immagini responsive; utilizzare una CDN d’immagini.
Precarica risorse importanti
Assicurati di dare priorità al caricamento di risorse critiche come caratteri, immagini o video “Above the Fold” e critical-path CSS o JavaScript con <link rel=”preload”>
Comprimi file di testo
Usa algoritmi di compressione, come Gzip e Brotli, puoi ridurre notevolmente le dimensioni dei file di testo (HTML, CSS, JavaScript) mentre vengono trasferiti tra il server e il browser. Potrai ridurre al minimo il sovraccarico del server, prevenendo i ritardi quando vengono effettuate le richieste.
Fornisci risorse diverse in base alla connessione di rete (pubblicazione adattiva)
Quando si caricano risorse che costituiscono il contenuto principale di una pagina, può essere efficace recuperare in modo condizionale risorse diverse a seconda del dispositivo dell’utente o delle condizioni di rete.
Memorizza nella cache le risorse utilizzando un service worker
I service worker possono anche essere utilizzati per memorizzare nella cache qualsiasi risorsa statica che può essere servita al browser invece che dalla rete su richieste ripetute (anche off-line).
RENDERING LATO CLIENT
Molti siti utilizzano JavaScript lato client per eseguire il rendering delle pagine direttamente nel browser.
Se il contenuto del Sito diventa visibile o può essere interagito solo dopo aver scaricato una certa quantità di JavaScript la metrica LCP peggiorerà.
Per migliorare i tempi di caricamento e d’interazione puoi fare alcune ottimizzazioni.
Ottimizza Javascript
Come già consigliato precedentemente puoi minimizzare e comprimere i file Javascript, rimandare Javascript inutilizzato e ridurre al minimo i polyfill.
Usa il pre-rendering lato server
Valuta l’opportunità di un pre-rendering lato server anche se comporta una leggera influenza negativa sui tempi di risposta del server.
FID – FIRST INPUT DELAY
FID (First Input Delay) è una metrica Core Web Vitals che misura la velocità di risposta di una pagina web all’interazione dell’utente.
Questa metrica è una metrica di campo che non può essere simulata in un ambiente di laboratorio. Per questa metrica Core Web Vitals è necessaria una reale interazione dell’utente per misurare il ritardo di risposta.
Il rapporto sull’esperienza utente di Chrome fornisce valori FID reali aggregati a livello di origine. Tuttavia questi dati sono un campione perché comprendono solo quelli di utenti che hanno dato il consenso ad alcune condizioni come la sincronizzazione della cronologia e l’abilitazione dei report sulle statistiche di utilizzo.
Un aiuto per prevedere il FID in laboratorio può venire dalla metrica TBT (Total Block Time). Infatti miglioramenti del TBT di solito corrispondono a miglioramenti del FID.
Per fornire una buona esperienza utente, FID dovrebbe essere entro i 100 ms. La causa maggiore di un FID scarso è l’esecuzione di codice Javascript pesante.
ESECUZIONE DI JAVASCRIPT PESANTE
Il browser non può rispondere alla maggior parte degli input dell’utente mentre il thread principale è occupato dall’esecuzione di codice JavaScript.
Vediamo alcuni accorgimento che si possono attuar per migliorare il FID.
Suddividi il codice Javascript
Se viene eseguito uno script troppo lungo che blocca il threat principale per 50 ms è probabile che venga eseguito più codice di quanto necessario al momento. Si può ovviare dividendo il codice Javascript per eseguire task più piccoli e in modo asincrono. Il caricamento progressivo del codice e delle funzionalità può aiutare a diffondere questo lavoro e migliorare la disponibilità all’interazione.
Utilizza un Web Worker
Un thread principale bloccato è una delle cause principali del ritardo d’input. I web worker consentono di eseguire JavaScript su un thread in background. Lo spostamento di operazioni non dell’interfaccia utente in un thread di lavoro separato può ridurre il tempo di blocco del thread principale e di conseguenza migliorare il FID.
Ottimizza Javascript
Puoi ridurre la quantità di tempo che il browser impiega per eseguire il codice JavaScript minimizzando e comprimere i file Javascript, rimandando Javascript inutilizzato e riducendo al minimo i polyfill. La scheda Copertura in Chrome DevTools può dirti quanto JavaScript non viene utilizzato sulla tua pagina web.
Atri consigli
Considera l’idea di spostare più logica lato server o di generare più contenuto statico durante il tempo di compilazione.
Cerca di ridurre al minimo la quantità di dati da recuperare ed da post-elaborare lato client.
Dai priorità al caricamento del codice principale della pagina evitando di caricare in anticipo codice di terze parti con occupazione del thread principale.
CLS – CUMULATIVE LAYOUT SHIFT
CLS (Cumulative Layout Shift) è una metrica Core Web Vitals che misura l’instabilità del contenuto di una pagina web.
Un layout che cambia, in cui gli elementi che lo compongono si spostano improvvisamente nella viewport, rende frustrante la nostra esperienza con la pagina.
Può capitare, ad esempio, di dover interrompere la lettura di un testo e doverlo ricercare nella pagina o perfino cliccare su un pulsante sbagliato per un cambio improvviso dell’impaginazione.
Per fornire una buona esperienza utente, il CLS dovrebbe avere un valore minore o uguale a 0,1. Vediamo quindi alcuni accorgimenti per migliorare questa metrica Core Web Vitals.
Specifica le dimensioni delle immagini
Includi sempre gli attributi di dimensione width e height sulle immagini e sugli elementi video. In alternativa, riserva lo spazio richiesto con CSS aspect ratio boxes. Questo approccio garantisce che il browser possa allocare la quantità corretta di spazio nel documento durante il caricamento dell’immagine.
Indica le dimensioni di annunci, incorporamenti e iframe
L’uso di annunci, iframe e incorporamenti vari come video YouTube, mappe da Google Maps, post sui social media senza dimensioni possono portare a spingere i contenuti visibili che stai visualizzando in basso nella pagina.
Puoi limitare questi cambiamenti di layout assegnando staticamente lo spazio per l’area annuncio.
Considera che gli annunci nella parte superiore del viewport causano un maggiore spostamento del layout, avendo più contenuti nella parte inferiore. Mentre ci sono meno problemi per gli annunci che si inseriscono nel flusso dei contenuti nella parte centrale e inferiore della pagina.
Limita i contenuti che si inseriscono dinamicamente
Evita d’inserire nuovi contenuti dinamici che si collocano sopra quelli esistenti provocando cambiamenti del layout, a meno che non rispondano a un’interazione dell’utente.
Questo accade spesso con banner e moduli che spostano il resto del contenuto della pagina.
Se necessario riserva in anticipo spazio sufficiente per questi contenuti nel riquadro di visualizzazione in modo che quando vengono caricati, il contenuto della pagina non si sposti improvvisamente.
Minimizza FOIT/FOUT dei caratteri web
Il download e il rendering dei caratteri Web possono causare cambiamenti di layout in due modi:
- FOUT (Flash Of Unstyled Text) – il carattere di riserva viene sostituito con un nuovo carattere;
- FOIT (Flash Of Invisible Text) – testo “invisibile” viene visualizzato fino al rendering di un nuovo carattere
I seguenti strumenti combinati possono aiutarti a minimizzare questo nei browser compatibili:
- <link rel=preload> per precaricare i principali caratteri web;
- font-display: optional per modificare il comportamento di rendering dei caratteri personalizzati.
Altri articoli dal blog
