Core Web Vitals: La guida completa su cosa sono e come migliorarli

Come misurare e testare i Core Web Vitals

Il nuovi criteri per la Page Experience, inclusi i “segnali web essenziali”, influenzeranno i risultati organici sia su dispositivi mobili che su desktop e determineranno se il tuo sito verrà visualizzato tra le notizie principali. Con l’aggiunta dei Core Web Vitals, Google rimuove le Accelerated Mobile Pages (AMP) come requisito per le notizie principali sui dispositivi mobili.

Comprendere le nuove metriche e tenerne conto è importante per le prestazioni complessive del tuo sito. Di seguito troverai strumenti utili per misurare e testare il punteggio dei Core Web Vitals del tuo sito.

Strumenti per i Field Data

I Field Data ottenibili tramite monitoraggio degli utenti reali (RUM), riflettono l’esperienza di navigazione degli utenti reali. Prendono in considerazione utenti reali, vari dispositivi, diversi network, diverse connessioni, dati storici e tutti questi dati vengono aggregati per l’intero dominio o per URL. Tieni presente che Google utilizza questi dati per posizionare il tuo sito. Pertanto, se desideri esaminare la reale esperienza dei tuoi utenti, dovresti utilizzare i field data.

Google Search Console (GSC)

Google Search Console ha lanciato un Rapporto sui segnali web essenziali (Core Web Vitals). Ti aiuta a identificare i gruppi di pagine che hanno problemi simili. È necessario essere consapevoli del fatto che qui non è possibile rilevare i problemi delle singole pagine. Google Search Console suddividerà i Core Web Vitals in base alle sue tre metriche: LCP, FID e CLS per dispositivi mobili e desktop. Google Search Console richiede la verifica del DNS per mostrare il rapporto sul tuo sito.

Inoltre, Google sta lanciando un nuovo rapporto Esperienza con le pagine all’interno della Google Search Console. Il rapporto include il rapporto Segnali web essenziali (Core Web Vitals) insieme ai criteri già esistenti che valutano l’esperienza con le pagine: usabilità su dispositivi mobili, problemi di sicurezza, utilizzo di HTTPS, esperienza pubblicitaria. Il nuovo rapporto consente di valutare rapidamente le prestazioni del sito fornendo una percentuale di URL con una “buona esperienza con la pagina” e indicando le pagine che necessitano di miglioramenti.

PageSpeed Insights

PageSpeed Insights è uno strumento per browser che testa la velocità delle pagine e che include anche il punteggio Core Web Vitals. A differenza di Google Search Console, qui puoi valutare le prestazioni del tuo sito pagina per pagina. Inoltre, PageSpeed Insights fornisce ai propri utenti consigli pratici su come migliorare le prestazioni del proprio sito. I segnali web essenziali sono indicati con una mostrina blu.

Tieni presente che dovresti esaminare sia i punteggi desktop che quelli mobile in quanto potrebbero differire. PageSpeed Insights indica, nella parte superiore del rapporto, se la tua pagina soddisfa o meno i requisiti per una buona esperienza in relazione ai Web Core Vitals.

Chrome UX Report (CrUX) 

CrUX è un set di dati, accessibile pubblicamente, sulla UX (esperienza utente) di Chrome su milioni di siti web. Il rapporto Chrome UX si concentra sulle prestazioni di caricamento del sito. Misura i Core Web Vitals, metriche come il Time to First Byte (TTFB) e molto altro ancora.

Estensione Chrome per i Core Web Vitals

L’estensione esegue misurazioni in tempo reale delle tre metriche dei Core Web Vitals in Chrome per desktop: caricamento, interattività e stabilità visiva. È essenzialmente uno strumento diagnostico che valuta le prestazioni dei segnali web essenziali durante la navigazione sul web.

Web.dev 

Web.dev offre uno strumento di misurazione gratuito per eseguire un controllo delle prestazioni sul tuo sito. Inoltre, puoi controllare le prestazioni del tuo sito in diverse aree e avere suggerimenti su come migliorare le prestazioni del sito, lo stato delle web app, l’accessibilità, le best practices e la SEO. Supporta anche le metriche dei Core Web Vitals.

Strumenti per i Lab Data

I Lab Data si riferiscono alla conduzione di test in un ambiente controllato per vedere come un potenziale utente si troverà sul tuo sito web. A differenza dei Field Data, i Lab Data funzionano con dati simulati, con dispositivi predefiniti e specifiche di rete. È utile per riprodurre ed eseguire il debug di possibili problemi di prestazioni del sito, ma non forniscono informazioni sull’esperienza degli utenti reali.

Lighthouse

Lighthouse è uno strumento open source e automatizzato per l’audit dei siti web. Aiuta gli sviluppatori a diagnosticare i problemi e a migliorare la qualità delle pagine web. L’ultima versione – Lighthouse 6.0 introduce tre nuove metriche al rapporto: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) e Total Blocking Time (TBT).

Come puoi vedere, uno strumento per i Lab Data come Lighthouse non può misurare il First Input Delay (FID), perché richiede la registrazione dell’interazione di un utente reale. Tuttavia, puoi monitorare il Total Blocking Time (TBT) che misura la quantità di tempo totale tra First Contentful Paint e Time To Interactive. Migliorando il tuo TBT molto probabilmente migliorerai anche il tuo FID. Se hai un punteggio TBT negativo, dovresti considerare di ridurre al minimo l’utilizzo di terze parti.

WebPageTest.org 

Questo è uno strumento gratuito e open source che misura la velocità del tuo sito. Carica la tua pagina in un browser reale, aiutandoti a identificare sezioni specifiche del sito che richiedono più tempo per essere caricate.

Pannello delle performance di Chrome DevTools

Apri la navigazione in incognito in Chrome e premi Cmd + Alt + I (su Mac) oppure Ctrl + Maiusc + I (su Windows, Linux) per aprire DevTools. Con Chrome DevTools, hai l’opzione Performance che include i nuovi Core Web Vitals. Il pannello Performance ha anche una nuova sezione Experience da cui è possibile rilevare spostamenti imprevisti del layout. Pertanto, è possibile identificare e correggere qualsiasi instabilità visiva e migliorare la metrica Cumulative Layout Shift (CLS).

Seleziona Layout Shift per visualizzarne i dettagli nella scheda Summary.

Tieni presente che, a seconda dello strumento che utilizzi (in base ai Field Data e Lab Data), le metriche dei Core Web Vitals potrebbero mostrare risultati diversi.

Come migliorare i Core Web Vitals

Una volta che hai finito di analizzare il tuo sito, è il momento di agire. La buona notizia è che la maggior parte dei suggerimenti per migliorare i tuoi segnali web essenziali sono gli stessi per l’ottimizzazione delle prestazioni del sito.

Migliorare LCP e FID

Scegli un hosting veloce e affidabile

Uno dei motivi più comuni per un LCP negativo è una lenta risposta del server. Innanzitutto, controlla il tuo Time to First Byte (TTFB), ossia quanto tempo impiega il browser a ricevere il primo byte di contenuto dal server. Tieni presente che un servizio di hosting veloce può avere un enorme impatto sulle prestazioni del tuo sito. Per dirla in modo semplice, più veloce è il tempo di risposta del server, più veloci saranno le prestazioni del tuo sito.

In qualità di hosting provider, SiteGround sviluppa continuamente nuovi strumenti e aggiornamenti dei servizi che rendono il tuo sito più veloce e sicuro e ti aiutano a gestirlo in modo semplice. Offriamo un servizio di hosting ultraveloce alimentato da Google Cloud,  con PHP Ultraveloce, configurazione personalizzata di MySQL e un potente sistema di difesa contro qualsiasi tipo di minaccia.

Attiva la cache a pagina intera

Quando abiliti la cache a pagina intera, le pagine del tuo sito verranno archiviate sul server come file HTML dopo il primo caricamento. Solo il primo visitatore del tuo sito caricherà l’intero contenuto della pagina dal database. Tutti gli altri riceveranno l’output della pagina direttamente dalla memoria del server, migliorando così il TTFB, rendendo il tuo sito più veloce e, in definitiva, migliorando la metrica LCP.

I clienti di SiteGround sfruttano la nostra esclusiva soluzione di caching a pagina intera, chiamata cache dinamica, abilitata di default su tutti i siti. A seconda del tipo di sito, registriamo un caricamento della pagina fino a 5 volte più veloce.

Rinvia i JavaScript

Mentre il browser sta caricando JavaScript, gli utenti non possono interagire con la pagina web. Ecco perché a volte puoi vedere il termine “Render-blocking JavaScript” ossia il blocco di visualizzazione JS. Rinviare i tuoi JavaScript significa che il browser elaborerà e caricherà i file JS solo dopo aver analizzato il documento HTML. In altre parole, la visualizzazione del tuo sito sarà molto più veloce perché non ci sarà nulla a bloccare il processo.

Il plugin SiteGround Optimizer di SiteGround può facilmente occuparsi dell’ottimizzazione dei file JavaScript. Una scheda dedicata ti consentirà di rinviare il blocco di visualizzazione JS e di minificare e combinare i JS, per performance del sito migliori.

Minifica i file CSS e JS

Per una migliore leggibilità, gli sviluppatori spesso lasciano caratteri come spaziature, rientro o commenti ai file CSS e JS. Tuttavia, tutti questi caratteri nel codice non sono essenziali per il browser. Quello che fa la minificazione è ottimizzare il tuo codice rimuovendo tutti i caratteri non necessari, con conseguente miglioramento del tempo di visualizzazione.

Un modo semplice ed efficace per gestire i file CSS e JavaScript consiste nell’utilizzare le funzionalità dedicate di SiteGround Optimizer per l’ottimizzazione del front-end.

Ottimizza la cache del browser

La cache del browser è un metodo efficiente con cui i browser scaricano le immagini, i dati e i documenti dei siti. Per aiutare la tua pagina a caricarsi più velocemente, assicurati di impostare l’opzione giusta per i file statici che il tuo browser conserva nella cache.

Tutti i siti ospitati su SiteGround possono sfruttare la nostra tecnologia SuperCacher. SiteGround utilizza NGINX Direct Delivery per memorizzare nella cache le risorse statiche, comprese le date di scadenza corrette per la cache del browser. È disponibile anche l’opzione Memcached.

Usa una CDN

Oltre al server che ospita il tuo sito, puoi utilizzare una rete CDN (Content Delivery Network) per velocizzare il caricamento delle pagine per tutti i tuoi visitatori. La CDN memorizzerà nella cache i tuoi contenuti su una rete globale di server e caricherà il tuo sito dal server più vicino al visitatore, migliorando così l’esperienza con la pagina.

SiteGround collabora con Cloudflare per offrire ai clienti maggiore velocità e sicurezza. Cloudflare è uno strumento che velocizza il tuo sito quando hai traffico geograficamente distribuito in più Paesi e continenti.

Rimuovi qualsiasi script non necessario di terze parti

Si consiglia vivamente di rimuovere eventuali script di terze parti che non apportano alcun valore reale. Ad esempio, risorse che non utilizzi più ma che hanno un impatto sul tuo codice. Ciò aumenterà i tuoi punteggi LCP (Largest Contentful Paint) e FID (First Input Delay).

Ottimizza le immagini

Poiché le immagini sono spesso l’elemento che incide maggiormente sull’LCP sia per i dispositivi mobili che per i desktop, ottimizzarle migliorerà le prestazioni e il punteggio LCP.

Ecco alcuni modi su come farlo:

• Comprimi sempre le tue immagini: riduci le dimensioni delle immagini senza perdere la qualità, migliorando il tempo di caricamento.
• Usa immagini nei formati di nuova generazione: questi formati sono JPEG 2000, JPEG XR e WebP. Google consiglia il formato WebP.
• Ridimensiona correttamente le immagini.
• Fai il lazy load del contenuto statico: ma escludi il tuo elemento LCP dal lazy load e visualizzalo direttamente nella pagina HTML.
• Usa immagini statiche invece di uno slider.

Un modo efficace per ottimizzare i tuoi media è sfruttare il nostro plugin SiteGround Optimizer. Dispone di funzionalità dedicate per l’ottimizzazione dei media come l’ottimizzazione delle immagini, il supporto del formato WebP, il lazy load dei media (iframe, video, miniature, immagini responsive, widget e altro). Puoi anche escludere facilmente le immagini dal lazy load.

Usa la compressione

Usa applicazioni per la compressione dei file, come Gzip e Brotli, per ridurre le dimensioni dei tuoi file CSS, HTML e JavaScript. In questo modo il browser sarà in grado di caricare quei file più velocemente, aiutandoti a migliorare l’LCP.

SiteGround attiva di default Brotli, l’algoritmo di compressione di nuova generazione di Google, successore di Gzip. I nostri migliorano la velocità fino al 15-20% grazie all’utilizzo di Brotli.

Rimuovi elementi di grandi dimensioni dalla pagina 

Tramite Google PageSpeed Insights, puoi analizzare gli elementi che rallentano l’LCP della tua pagina. Ti abbiamo mostrato come farlo in questa guida, nella sezione “Come misurare e testare i Core Web Vitals”.

Migliorare il CLS

Assicurati che gli elementi degli annunci abbiano uno spazio riservato

Le pubblicità hanno una natura dinamica che può portare a cambiamenti imprevisti del layout. Questo può avere un effetto negativo sull’esperienza dell’utente e quindi può danneggiare il tuo punteggio CLS. Se non riservi spazio sufficiente per gli annunci da caricare, possono apparire inaspettatamente e rovinare la tua esperienza utente.

Ottimizza i font

Ogni buon sito web deve essere costituito da web font selezionati con attenzione. Perché “con attenzione”? Perché i font migliorano la leggibilità della tua pagina, la sua accessibilità e danno corpo all’immagine del tuo brand. Tuttavia, ogni font che utilizzi è una risorsa aggiuntiva che potrebbe rallentare il tuo sito. È dunque necessario ottimizzarli. Si consiglia di precaricare i caratteri che si stanno utilizzando per evitare cambiamenti di layout e flash di testo. In questo modo, migliorerai il tuo punteggio CLS.

Anche il nostro SiteGround Optimizer è stato sviluppato per aiutarti in questo. La nostra funzionalità di ottimizzazione dei font migliora il tempo di rendering con conseguente miglioramento delle prestazioni del sito.

Imposta un attributo di dimensione ai media 

Quando si parla di media ci si riferisce a video, immagini, GIF, infografiche. Impostare un attributo di dimensione per i media dirà al browser dell’utente esattamente di quanto spazio avrà bisogno quell’elemento. Questo ridurrà al minimo il CLS (Cumulative Layout Shifts).

I Core Web Vitals e il modo in cui vengono valutati possono cambiare nel tempo. Anzi, non ci sono dubbi su questo. Google ha cambiato le metriche utilizzate per misurare la velocità e indicizzare i siti nel corso degli anni. Dare risalto all’esperienza della pagina non significa che Google smetterà di dare rilevanza ai contenuti. Quello che vediamo è che l’esperienza dell’utente acquisisce sempre più importanza ogni giorno ed è meglio essere preparati. Dopotutto, lavoriamo tutti insieme con l’obiettivo di migliorare il web.