Core Web Vitals: cosa sono e come migliorarli in 5 semplici modi

I Core Web Vitals sono indicatori di interazione con la pagina che quantificano l'esperienza utente di un sito web. In breve, queste indicazioni indicano la velocità con cui i consumatori potranno interagire con il vostro sito web e il tipo di risultato che riceveranno. Queste metriche indicano anche quanto sia semplice per gli utenti navigare nel sito.

I punteggi dell'esperienza di pagina miglioreranno se migliorerete il vostro esperienza dell'utente e migliorare il vostro sito web in generale.

Quali sono le tre metriche principali di Core Web Vitals?

Il set Core Web Vitals contiene tre parametri:

1. Il più grande contenuto di vernice (LCP)

Il tempo di rendering dei pezzi più grandi visualizzati da una popolazione è una misura Core Web Vitals che i gestori dei siti possono utilizzare per valutare l'esperienza dell'utente e determinare se un utente troverà una pagina vantaggiosa.

Per offrire un'esperienza piacevole agli utenti, i proprietari dei siti devono caricare rapidamente le loro pagine. Non solo il tempo di caricamento della pagina è importante per un'ottima esperienza utente, ma una pagina che risponde rapidamente ha anche maggiori possibilità di posizionarsi più in alto su Google. Inoltre, rispetto a una pagina con tempi di caricamento scadenti, è stato dimostrato che tempi di caricamento rapidi influiscono sulla notorietà e sul coinvolgimento.

Come migliorare l'LCP in Core Web Vitals?

• Iniziare a rimuovere gli script di terze parti non necessari: Secondo il nostro recente studio sulla velocità delle pagine, ogni script di terze parti rallenta una pagina di 34 millisecondi.
• Aggiornate il vostro servizio di web hosting: In generale, un hosting migliore equivale a tempi di caricamento più rapidi (compreso l'LCP).
• Stabilire caricamento pigro: Il caricamento pigro impedisce il caricamento delle immagini finché l'utente non scorre la pagina. Di conseguenza, sarete in grado di raggiungere l'LCP molto più rapidamente.
• Considerate la possibilità di rimuovere i grandi elementi della pagina: Google PageSpeed Insights può dirvi se un elemento della vostra pagina sta rallentando l'LCP.

2. Spostamento cumulativo della disposizione (CLS)

Per aumentare il coinvolgimento e le vendite, i gestori dei siti devono rendere il più agevole possibile l'interazione dei visitatori con i collegamenti ipertestuali e le icone delle loro pagine. Lo spostamento cumulativo del layout è una statistica che riconosce i collegamenti o i pulsanti che si spostano dopo il caricamento di una pagina web e indica quanto sarà difficile per i visitatori interagire con gli elementi del sito una volta che la pagina è stata resa.

Un'esperienza utente forte richiede una buona UX e un buon design, e un cliente si agita se il sito web di un'azienda cambia elementi durante la lettura. CLS assiste i programmatori nel determinare se le immagini o i collegamenti ipertestuali di un sito web si spostano, consentendo ai titolari dei diritti d'autore di migliorare l'accessibilità, aumentare il tasso di clic e incrementare le vendite online.

Il CLS confronta i punti di partenza dei componenti nel viewport visualizzabile tra due fotogrammi visualizzati. Questo indicatore, in parole povere, aiuta i proprietari dei siti a determinare se materiale come testo, icone e pubblicità vengono spostati mentre una persona legge i contenuti di una determinata pagina.

Come migliorare il FID in Core Web Vitals?

• Il JavaScript deve essere minimo: È quasi difficile che i visitatori si impegnino in una pagina mentre il browser sta caricando JS. Di conseguenza, per la FID è fondamentale ridurre al minimo o posticipare il caricamento di JS sul sito web.
• Eliminate gli script di terze parti che non sono assolutamente necessari: Gli script di terze parti (come Google Analytics, heatmap e così via) possono avere un impatto negativo sul FID, proprio come nel caso di FCP.
• Utilizzate la riserva del vostro browser: Questo accelera il caricamento del contenuto della pagina. In questo modo, il browser dell'utente può completare le operazioni di caricamento dei JS ancora più velocemente.

3. Ritardo del primo ingresso (FID)

I consumatori desiderano pagine veloci da caricare e facili da interagire su Internet. First Input Delay è una metrica che analizza le latenze di interazione (il tempo necessario a un componente del sito web per reagire all'input dell'utente) per scoprire le pagine che potrebbero frustrare il pubblico.

Per offrire materiale agli utenti, i siti web moderni utilizzano una serie di soluzioni emergenti e widget di allocazione dinamica. Se da un lato questa forma di materiale può aumentare l'offerta di contenuti, dall'altro può causare ritardi, costringendo gli utenti ad aspettare che il browser risponda alle loro richieste.

Per aumentare il coinvolgimento e l'usabilità del sito, gli sviluppatori devono limitare il tempo che i clienti trascorrono in attesa che un sito web risponda alle loro attività.

Come ridurre al minimo il FID in Core Web Vitals?

• Per qualsiasi media (video, foto, GIF, infografiche e così via), utilizzare le seguenti dimensioni della proprietà Set Size: In questo modo, il browser dell'utente saprà con precisione quanta memoria occuperà il componente nella pagina. Non si modificherà al volo finché la pagina non sarà completamente caricata.
• Assicuratevi che tutti gli elementi dell'annuncio abbiano uno spazio dedicato: Altrimenti, potrebbero apparire inaspettatamente sul sito web, spingendo le informazioni a sinistra, a destra o ai lati.
• Sotto la piega, aggiungere nuovi elementi dell'interfaccia utente: In questo modo, non spingono verso il basso i contenuti che l'utente "si aspetta" che rimangano al loro posto.

Modi per migliorare i dati vitali del web

Dovreste eseguire una breve valutazione del monitoraggio delle prestazioni di Internet per vedere come funziona il vostro sito web in termini di elementi vitali del web. È possibile farlo con strumenti di Google come Search Console e Page Speed Insights, oltre che con strumenti indipendenti come GTmetrix.

Inoltre, l'implementazione di test QA end-to-end aiuta a convalidare l'efficacia delle ottimizzazioni delle prestazioni su diversi dispositivi e browser, garantendo che i miglioramenti di Core Web Vitals si traducano in un reale miglioramento dell'esperienza utente.

Vale la pena confrontare i dati e aggiornare la pagina in modo più economico se si eseguono rapporti sulle prestazioni con più strumenti.

1. Migliorare la produttività delle risposte del server

"Più tempo impiega il browser per ottenere informazioni dal controller di dominio, più tempo impiegherà per generare tutto ciò che appare sullo schermo", aggiunge Google. Ogni metrica della pagina, compreso l'LCP, è direttamente migliorata da un tempo di risposta del server più veloce".

Soprattutto, un tempo di rotazione del server prolungato può danneggiare non solo la SEO, ma anche l'esperienza dell'utente.

Oltre a migliorare la risposta del server, è fondamentale coprire le pratiche SEO fondamentali. Garantire una struttura adeguata del sito, tempi di caricamento rapidi e contenuti ottimizzati aumenterà sia l'esperienza dell'utente che le classifiche di ricerca. Oltre a questi must, l'utilizzo degli strumenti SEO giusti può rendere il processo molto più semplice: strumenti come Ahrefs, Manngools e Semush sono opzioni eccellenti. Per chi è alla ricerca di alternative, ci sono diverse Strumenti SEO simili a Semrush che possono aiutare a tracciare le prestazioni e a migliorare le classifiche in modo efficace.

Utilizzate il Time to First Byte (TTFB) per determinare il tempo di risposta del server. Questa metrica determina quando il browser web dell'utente ottiene il primo byte dell'output della vostra pubblicazione.

Tuttavia, prima di iniziare a valutare le prestazioni del vostro server, raccogliete le statistiche relative alle prestazioni attuali. Ecco alcuni suggerimenti da considerare una volta completato il rapporto:

• Esaminate la velocità dell'hosting del vostro sito.
• Utilizzare un rete di distribuzione dei contenuti (CDN) per il vostro sito web.
• Esaminate i vostri plug-in. Perché? Perché ogni estensione appesantisce la pagina e potrebbe rallentare la velocità del sito. Rimangono solo gli elementi essenziali.

Secondo Google, il tempo di risposta di un server dovrebbe essere inferiore a 600 millisecondi.

Da leggere: Come il web design può incrementare le vendite

2. Ottimizzazione e compressione delle immagini

Non credete che sia evidente? Le immagini, invece, sono le caratteristiche più importanti di molti siti web. Di conseguenza, la loro ottimizzazione è fondamentale, anche se può rendere la vostra pagina sostanzialmente più leggera, aumentando il tempo di caricamento, il punteggio LCP, la UX e il posizionamento nei motori di ricerca.

Riducendo le foto con micro jpg e aumentando le prestazioni di LCP, è possibile ridurre al minimo le dimensioni dell'intera pagina. Si potrebbe forse pensare che la compressione delle immagini riduca la qualità dell'immagine o la risoluzione. A quanto pare, la differenza è visibile solo quando si sbircia o se l'istantanea viene salvata in un formato non corretto. Cercate preferibilmente di salvare le fotografie di paesaggio in formato jpg e i grafici in formato png. È possibile utilizzare anche formati di nuova generazione come JPEG 2000, JPEG XR e WebP, ma si consiglia di fare prima qualche ricerca.

Oltre alla compressione, è fondamentale attivare la Content Delivery Network (CDN) per le fotografie. Una rete di distribuzione dei contenuti (CDN) è una rete globale di server che memorizza nella cache il vostro materiale. Poiché i server sono sparsi in tutto il mondo, le foto possono essere rese più velocemente dall'host più vicino agli utenti.

3. Implementare il caricamento pigro

Se si utilizzano foto sul proprio sito, è indispensabile utilizzare il caricamento pigro per proteggere la UX del sito e il punteggio di base dei web vitals. L'impilamento pigro consente di fornire le immagini nel momento esatto in cui gli utenti scorrono la pagina, preservando la velocità di caricamento del sito e garantendo un punteggio LCP di prim'ordine.

Altri vantaggi del caricamento lento sono:

• La funzionalità del vostro sito web sarà migliorata.
• In questo modo si imposta un limite all'utilizzo della larghezza di banda.
• Questo può aiutare l'ottimizzazione del sito per i motori di ricerca.
• In questo modo i clienti rimarranno più a lungo sul sito web e si ridurrà la frequenza di rimbalzo.

Il vostro sito beneficerà del caricamento pigro? Secondo HubSpotIl caricamento pigro è una necessità per le pagine con molti elementi grafici, animazioni o video (chiamati elementi pesanti). Tuttavia, non esistono criteri rigidi e veloci per stabilire quali pagine debbano utilizzare il caricamento ritardato. Se il punteggio LCP del vostro sito è basso, potreste prendere in considerazione l'implementazione del caricamento pigro e la creazione di un report sulle prestazioni prima e dopo.

4. Ridurre l'esecuzione di JavaScript (JS)

Se il contenuto del FID è basso, significa che la pagina si impegna con gli utenti per più di 300 millisecondi. Si può pensare di ottimizzare e ridurre al minimo l'esecuzione del codice JS. In questo modo si riduce il tempo necessario al browser per eseguire il codice JS e visualizzare la pagina.

È inoltre fondamentale consumare la minor quantità di memoria possibile. Perché? Quando il codice del sito fa una richiesta al browser, crea un nuovo blocco di memoria, che disabilita JavaScript e può causare un caricamento lento della pagina.

Secondo Google, ritardare i JS superflui è un metodo per ridurre i tempi di elaborazione.

Seguite i passaggi indicati di seguito per verificare se il vostro sito web ha un JavaScript inutilizzato:

• Per iniziare, andate sul vostro sito web e fate clic con il tasto destro del mouse, quindi selezionate "Ispezione".
• Andate quindi su "Fonti" e controllate in basso la presenza dei tre puntini. Dovreste includere uno strumento chiamato "Copertura". Una volta inserito, premere il pulsante di caricamento.
• Al termine del caricamento, sarà possibile verificare la quantità di JavaScript non utilizzata nella pagina.

Quando si è capito quanto JS è rimasto, si deve iniziare a ridurlo. È possibile farlo in vari modi, uno dei quali è la suddivisione del codice. Si tratta di separare un bundle di JavaScript (file combinati in un unico bundle) per evitare di dover fare troppe richieste HTTP per caricare una pagina.

5. Assicuratevi che le immagini e gli embed siano della giusta dimensione

Un punteggio CLS superiore a 0,1 è considerato scarso ed è spesso causato da elementi del file CSS privi di dimensioni, come foto, pubblicità o embed. Le misure sono importanti se si vuole aumentare il punteggio CLS. La possibilità di impostare larghezza e altezza consente al browser di lasciare la quantità di spazio appropriata sul sito durante il caricamento dei contenuti.

Ad esempio, se le proporzioni di un'immagine non sono corrette, questa apparirà normalmente più tardi nella pagina. Quando l'utente sta consumando il materiale, è possibile che il caricamento di un'immagine non correttamente dimensionata avvenga improvvisamente e troppo lentamente. In questo caso, il browser non è stato in grado di determinare la quantità di spazio necessaria per quella specifica immagine.

Per evitare questo spostamento dell'immagine, si può predisporre in anticipo un luogo in cui verrà visualizzata l'immagine. Se viene caricata fuori dallo schermo, questa operazione impedirà la migrazione della disposizione.

Assicuratevi di aver impostato le dimensioni corrette per gli incorporamenti, ad esempio per incorporare i video di YouTube nel vostro sito. Il video può apparire normale nella parte posteriore, ma può apparire eccessivamente grande o del tutto incasinato nella parte anteriore. In questo caso, si tratta di un problema di specifiche, che va modificato con strumenti come FlexClip.

Di seguito trovate una guida passo passo per scoprire un embed per un video di Youtube. Imparate a regolare le dimensioni in modo che il video scelto abbia un aspetto fantastico sul vostro sito web.

• Aprite il video di YouTube che volete inserire nel vostro sito. 
• Individuare quindi il pulsante Avvia condivisione e selezionare l'opzione Incorpora.
• Successivamente, verranno visualizzati tutti i dati, comprese le misure. Ora è necessario incollare il codice nel backend del sito web e regolare la larghezza e l'altezza in base alle proprie esigenze.

Conclusione

Anche se i Core Web Vitals non saranno implementati prima di tre mesi, è fondamentale iniziare a lavorarci adesso. Poiché i dati vitali sono accessibili, utilizzate gli strumenti sopra elencati per valutare i dati del vostro sito prima e dopo la correzione degli errori.

Ricordate che il back end del vostro sito interagisce con il front end, quindi assicuratevi che il back end sia ottimizzato per offrire la migliore esperienza utente in termini di velocità di elaborazione, stabilità estetica e coinvolgimento. A tal fine, è utile ricordare i segnali di ricerca esistenti di Google, come la facilità di utilizzo da parte dei dispositivi mobili, la sicurezza della navigazione, l'HTTPS e gli standard invasivi per gli interstizi.