Cos'è Core Web Vitals e come ottimizzarlo

Nel 2021 Google ha incorporato l'esperienza della pagina come fattore di ranking. Il suo scopo principale è migliorare le prestazioni web. Con Page Experience Update Core Web Vitals è diventato un fattore vitale da considerare se vuoi che il tuo sito si posizioni nei risultati di ricerca di Google.

Quando qualcuno cerca su Google una parola chiave specifica, come Google determinerà quale sito deve visualizzare in alto e quale in basso. Bene, senza dubbio considera prima il contenuto. Il contenuto dominerà sempre le classifiche, ma a parte il contenuto, Google misura anche molti altri elementi della pagina Web, come le parole chiave, l'utilizzo di tali parole chiave nella tua pagina, i backlink e molti altri. Anche le prestazioni della pagina sono una di queste. Google misura le prestazioni della pagina in base ai principali parametri web.

In questo articolo parleremo di Core Web Vitals e di come puoi ottimizzarlo per posizionarti più in alto nei risultati di ricerca e acquisire più traffico.

Cos'è Core Web Vitals

Largest Contentful Paint, First Input Delay e Cumulative Layout Shift sono le tre metriche prestazionali chiave che costituiscono Core Web Vital e misurano quanto velocemente ed efficacemente una pagina si carica per gli utenti, nonché quanto interattivi e stabili sono gli elementi del sito web rimangono durante tutto il processo di caricamento.

Analizziamolo ulteriormente per una migliore comprensione.

1. LCP (il più grande dipinto di contenuto)

LCP valuta la velocità con cui l'elemento più grande del sito above the fold (immagini, video, animazioni, testo, ecc.) può essere caricato e visualizzato.

Un buon LCP è di 2,5 secondi, mentre qualsiasi valore compreso tra 2,5 e 4 secondi deve essere migliorato e oltre i 4 secondi è considerato scarso da Google.

LE PIÙ GRANDI STATISTICHE SULLA VERNICE CONTENTFUL

1. Il più grande Contentful Paint rappresenta il 25% del punteggio delle prestazioni di Google Lighthouse.
2. Il 43% degli URL mobili e il 44% degli URL desktop superano il benchmark Largest Contentful Paint di 2,5 secondi.
3. Secondo la ricerca, il sito Web B2B medio ha un punteggio Mobilest Contentful Paint di 7,05, ben al di sopra del punteggio di 2,5 necessario per ricevere un voto positivo.
4. Secondo la ricerca, il sito Web di vendita al dettaglio medio ha un punteggio Mobilest Contentful Paint di 9,17, ben al di sopra del punteggio di 2,5 necessario per ricevere un voto positivo.

2. FID (primo ritardo di ingresso)

Il FID di una pagina è il tempo impiegato dal browser per iniziare a elaborare i gestori di eventi in risposta alla prima interazione dell'utente con la pagina, ad esempio un clic o un tocco.

Un buon FID è inferiore a 100 ms, mentre qualsiasi valore compreso tra 100 e 300 ms deve essere migliorato e superiore a 300 ms è considerato scadente.

PRIMO RITARDO DI INGRESSO STATISTICHE

1. Il primo ritardo di input rappresenta il 25% del tuo punteggio di rendimento di Google Lighthouse.
2. L'89% degli URL mobili e il 99% degli URL desktop soddisfano il benchmark First Input Delay di 100 millisecondi.

3. CLS (Spostamento cumulativo del layout)

CLS è un'utile metrica incentrata sull'utente per misurare la stabilità visiva poiché aiuta a quantificare la frequenza con cui gli utenti incontrano alterazioni di layout impreviste. Questo è un aspetto essenziale della misurazione della stabilità visiva.

Un buon CLS è inferiore a 0,1, mentre qualsiasi valore compreso tra 0,1 e 0,25 deve essere migliorato e superiore a 0,25 è considerato scarso

STATISTICHE CUMULATIVE SHIFT LAYOUT

1. Lo spostamento cumulativo del layout rappresenta il 5% del punteggio delle prestazioni di Google Lighthouse.
2. Il 46% degli URL per dispositivi mobili e il 47% degli URL per desktop superano il benchmark Cumulative Layout Shift di .1.

Ora perché Core Web Vitals è importante

Uno strumento come Core Web Vitals aiuta a migliorare la posizione del tuo sito nei risultati di ricerca. Sono cruciali poiché dicono a Google quanto sta andando bene un sito e dove può essere migliorato.

I Core Web Vitals elevano innegabilmente il significato di UX come elemento di ranking.

Pertanto, l'ottimizzazione per i Core Web Vitals può fare un'enorme differenza se competi in un campo in cui la qualità dei contenuti è quasi paragonabile, il che significa che se Google deve mostrare due pagine con la stessa qualità dei contenuti, preferirà quella con un buon Core Web Vitals Score. Ricorda che nulla può sostituire i contenuti di qualità sul tuo sito web.

Cosa ha da dire John Mueller di Google su Core Web Vitals

L'altra cosa da ricordare con Core Web Vitals è che è più di un fattore di ranking casuale. Influisce anche sull'usabilità del tuo sito dopo che si è classificato (quando le persone lo visitano). Se ottieni più traffico (da altri sforzi SEO) e il tuo tasso di conversione è basso, quel traffico non sarà così prezioso come quando hai un tasso di conversione più alto (supponendo che UX/velocità influenzino il tuo tasso di conversione, cosa che di solito accade).

Avere solidi Core Web Vitals è molto più che l'ottimizzazione dei motori di ricerca, per dirla semplicemente. Ogni proprietario di un sito web dovrebbe fare uno sforzo per migliorare l'esperienza complessiva dei propri visitatori.

Anche se il contenuto della tua pagina è eccellente, devi comunque assicurarti che ogni aspetto del tuo sito web sia ottimizzato per ricevere un alto posizionamento nei motori di ricerca, in modo che il tuo sito sia visibile al tuo pubblico di destinazione. Core Web Vitals sottolinea anche l'importanza dell'esperienza dell'utente.

Come misurare i Core Web Vitals

Puoi esaminare i Core Web Vitals del tuo sito con l'aiuto di numerosi test, report ed estensioni.

I più importanti di questi sono:

• La valutazione Core Web Vitals di PageSpeed ​​Insights;
• Il rapporto Core Web Vitals in Google Search Console;
• L'estensione Core Web Vitals per Chrome.

1. Core Web Vitals Assessment in PageSpeed ​​Insights

Google PageSpeed ​​Insights (PSI) è diviso in due sezioni:

• Determina cosa stanno vivendo i tuoi utenti effettivi (valutazione Core Web Vitals)
• Identificare i problemi di prestazioni (dati di laboratorio, punteggio PSI).

Concentrati sulla prima parte per migliorare il tuo punteggio Core Web Vitals. Il rapporto Dati sul campo incorpora questa analisi. I dati per questo studio sono raccolti dal Chrome User Experience Report (CrUX). Questi dati si basano sulle effettive interazioni degli utenti con il tuo sito. Google prenderà in considerazione questi risultati del campo per determinare il posizionamento nei motori di ricerca.

La sezione "Diagnostica" di PSI è anche una buona risorsa per saperne di più sui fattori che possono modificare una qualsiasi delle tre metriche:

PSI tiene conto delle metriche dell'utente reale e dei dati di laboratorio quando determina un punteggio di ottimizzazione complessivo e offre consigli di ottimizzazione.

Sebbene queste informazioni siano utili, vengono raccolte in un ambiente controllato utilizzando dispositivi e reti specifici in laboratorio. Tuttavia, alcuni degli ospiti del tuo sito potrebbero utilizzare una tecnologia obsoleta o connessioni poco potenti. Ecco perché confrontare i risultati di laboratorio con le prestazioni effettive del tuo sito non è una buona idea.

PSI non fornisce sempre un riepilogo del campo.

Quando CrUX non ha raccolto dati sufficienti dal campo, come spesso accade con i siti Web più piccoli, sorgono problemi come questo. Per fortuna, ci sono fonti aggiuntive da cui possiamo raccogliere dati sul campo.

2. Report Core Web Vitals in Google Search Console

Due nuovi rapporti Core Web Vitals, uno per dispositivi mobili e uno per desktop, sono stati aggiunti a Google Search Console (GSC).

Ciascun rapporto fornisce informazioni sui dati del campo e sulle prestazioni di gruppi di URL.

Questi rapporti sono eccellenti per scoprire problemi comuni su più URL. Pertanto, riceverai informazioni sull'intero sito Web, non solo su una pagina.

Ad esempio, se hai un gran numero di pagine identiche in cui l'elemento più grande è un'immagine, la metrica LCP sarà la stessa per ognuna. In questa situazione, GSC rileva problemi LCP su ogni pagina.

In breve, questi nuovi rapporti GSC sono l'approccio più straordinario per monitorare le prestazioni di Core Web Vitals in tutto il tuo sito.

3. Utilizzo del rapporto sull'esperienza utente di Chrome (CrUX) per ottenere dati sul campo

È possibile accedere al set di dati CrUX nei seguenti 2 modi

• L'API di Chrome UX Report: per accedere a questo sviluppatore deve avere familiarità con JavaScript e JSON.
• BigQuery: richiede un progetto Google Cloud e competenze SQL.

Dovrai impegnarti di più rispetto al semplice passaggio di una pagina tramite PSI o GSC. Ma offrono più opzioni per organizzare e visualizzare i dati. BigQuery, ad esempio, dispone di funzionalità per il sezionamento dei dati e l'unione con altri set di dati.

Prova entrambe le strategie se hai le risorse e le conoscenze tecniche per implementarle.

Alcune statistiche vitali sui segni vitali del Web principale

1. Il 56% dei primi 100 domini desktop supera i Core Web Vitals
2. Effetto del marchio pesante: i marchi principali si posizionano in alto anche con prestazioni scadenti.
3. Il 61% dei primi 100 dispositivi mobili ha superato Core Web Vitals nel febbraio 2022
4. Nel febbraio 2022, il tempo medio di caricamento per i primi 100 domini negli Stati Uniti era di 2,38 secondi su desktop e 2,32 secondi su dispositivo mobile, al di sotto della ragionevole soglia di Google di 2,5 secondi.
5. Nel febbraio 2022, i punteggi CLS medi per desktop e dispositivi mobili erano rispettivamente di 0,11 e 0,08: questa è la prima volta che il CLS medio sui dispositivi mobili per i primi 100 siti è sceso al di sotto della soglia adeguata di Google di 0,1
6. A gennaio 2020, solo il 22% dei primi 100 domini desktop e il 27% dei dispositivi mobili hanno superato rispettivamente Core Web Vitals. Avanti veloce a febbraio 2022 e questa percentuale è più che raddoppiata al 56% su desktop e al 62% su dispositivi mobili. Ciò dimostra che i domini con le migliori prestazioni hanno ottenuto miglioramenti significativi nelle prestazioni web.
7. I siti Top 100, B2B, Healthcare e Dict/Reference hanno un LCP medio di 2,5 secondi o meno su entrambi i dispositivi.
8. In media, l'LCP mobile per i viaggi è 1,6 volte peggiore rispetto ai dizionari/siti di riferimento.
9. In media, l'LCP desktop per i viaggi è 1,5 volte peggiore rispetto ai domini B2B.
10. Gli URL in posizione 1 hanno il 10% di probabilità in più di superare una valutazione Core Web Vitals rispetto agli URL in posizione 9.
11. Dalla posizione 1 alla posizione 5, c'è una diminuzione del 2% nel tasso di superamento della valutazione Core Web Vitals per ciascuna posizione.

Come ottimizzare i core web vitals

Ora che abbiamo una solida conoscenza dei Core Web Vitals e del loro funzionamento, possiamo rivolgere la nostra attenzione ad alcuni passaggi consigliati per migliorare i Core Web Vitals. Ricorda che i risultati del tuo test detteranno i passaggi che devi compiere per aumentare i tuoi punteggi. Pertanto, è essenziale considerare i consigli e i suggerimenti forniti da PageSpeed ​​Insights (o altri strumenti di test che utilizzi).

Le seguenti sono strategie di base collaudate per aumentare i tuoi punteggi Core Web Vitals.

1. Utilizzare una rete di distribuzione dei contenuti

L'utilizzo di CDN migliora notevolmente le prestazioni del sito. I siti che utilizzano CDN si caricano velocemente in confronto. Perché? Perché CDN rende rapido il trasferimento dei dati tra il server e l'utente finale.

CDN è una vasta rete di server interconnessi. Puoi archiviare i contenuti del tuo sito Web su molti server utilizzando il CDN. Quando un utente accede al tuo sito, il server geograficamente più vicino gli restituisce il sito Web, riducendo i tempi di trasferimento dei dati.

Con l'uso di un CDN, puoi ridurre i tempi di caricamento LCP degli utenti. Anche il tempo per il primo byte può essere ridotto con il suo utilizzo (TTFB).

2. Ottimizza le immagini

Un altro modo per potenziare LCP è l'ottimizzazione delle immagini. Le immagini sono di dimensioni ingombranti se sono ad alta risoluzione e il caricamento richiede un tempo ragionevole, il che influisce negativamente sul punteggio LCP.

L'uso di immagini compresse velocizza il caricamento. Molti siti come TinyJPG possono ridurre le dimensioni di un'immagine gratuitamente senza comprometterne la qualità. Le immagini possono essere ulteriormente ottimizzate assicurandosi che abbiano le dimensioni e le dimensioni corrette.

Pertanto, è intelligente assicurarsi di non utilizzare dimensioni dell'immagine non necessarie per determinate aree del sito. Includere gli attributi appropriati può aiutare il tuo browser a fornire la quantità ideale di spazio per le parti della tua pagina, riducendo la necessità di continui cambiamenti di layout.

Apportando modifiche al codice sorgente, puoi modificare le proprietà di larghezza e altezza dei tuoi file multimediali.

3. Implementare il caricamento lento

Il tuo LCP e il tempo di caricamento della pagina possono entrambi trarre vantaggio dall'utilizzo del caricamento lento. Smush è solo un esempio dei numerosi plugin di WordPress che offrono il lazy loading.

Lazy loading, noto anche come caricamento su richiesta, ed è un metodo per migliorare le prestazioni dei contenuti web.

Il caricamento lento aiuta a caricare solo il pezzo necessario e ritarda il caricamento del resto fino a quando non è necessario per l'utente, al contrario del caricamento in blocco, che carica l'intera pagina Web in una volta e la visualizza in una volta sola.

4. Ottimizza i caratteri del tuo sito web

I caratteri che utilizzi sul tuo sito Web possono influire sul tempo di caricamento allo stesso modo delle immagini. Questo perché ogni combinazione di spessore del carattere richiede che il browser carichi l'intera famiglia di caratteri.

L'ottimizzazione dei caratteri Web è un modo semplice per aumentare la velocità del tuo sito. Questo perché i caratteri Web ottimizzati occupano meno spazio sul computer di un utente e si caricano molto più velocemente.

D'altra parte, se il carattere Web pertinente non è ancora stato caricato, il browser potrebbe non eseguire automaticamente il rendering dei componenti del testo. Tuttavia, il passaggio a caratteri alternativi può comportare modifiche di layout indesiderate, abbassando il punteggio CLS.

Fai attenzione quando decidi un carattere per il tuo sito web. È meglio utilizzare caratteri globali per applicare in modo selettivo i tipi e i pesi necessari se si utilizzano più di due caratteri anziché applicarne ciascuno a ciascun elemento. Utilizzando questo metodo, puoi limitare i download dei font a quelli strettamente necessari per il contenuto.

5. Aggiorna il tuo hosting WordPress

Se il tempo di caricamento del sito è troppo lungo, potrebbe essere un'indicazione per cambiare il piano di hosting. Cambiare il tuo hosting da condiviso a dedicato può aumentare notevolmente FCP.

Piuttosto che scegliere il più economico, scegliere il miglior sito di hosting che fornisce tutte le funzionalità di cui hai bisogno è una decisione saggia. La qualità del servizio fornito dal tuo host WordPress è fondamentale per il successo del tuo sito web. Ha conseguenze di vasta portata, dal tempo di caricamento della pagina alla sicurezza. Soprattutto se hai un sito web grande o sofisticato, questo non è un posto dove tagliare gli angoli. Invece, l'aggiornamento del tuo provider o piano di hosting è una delle strategie più rapide ma potenti per ottimizzare il tuo sito Web e migliorare i tempi di caricamento.

Per l'hosting leggi: Bluehost Review

6. Elimina le risorse che bloccano il rendering

Le pagine del sito web non possono essere visualizzate senza i relativi file HTML, CSS e JavaScript. Questi file includono tutti script che potrebbero impedire alle persone di accedere alle cose che stanno cercando di vedere.

Tuttavia, puoi impedire a questi script di avere un impatto negativo sulla tua UX (e, a sua volta, contribuire a potenziare i Core Web Vitals) rimuovendo le risorse che bloccano il rendering e qualsiasi CSS o script non necessari.

Esistono numerosi metodi per ottenere questo risultato. Il primo è rimuovere eventuali spazi o commenti extra dal tuo JavaScript e CSS. Inoltre, puoi ridurre le dimensioni di JavaScript e CSS unendo i file.

7. Rinviare il caricamento di JavaScript

È un altro modo per eliminare gli elementi che bloccano il rendering, dando a FID una spinta significativa.

Ciò velocizza il caricamento delle pagine Web bloccando il caricamento dei file JavaScript.

Carica altri contenuti delle tue pagine anziché attendere il caricamento dei file JS. Oltre a questo, puoi configurare il tuo sito per caricare rapidamente gli script CSS critici che appaiono above the fold. Puoi ottenere ciò estraendo il materiale dal file CSS principale e inserendolo nel codice del tuo sito web.

8. Implementare la memorizzazione nella cache dei contenuti.

Quando si tratta di migliorare l'esperienza dell'utente, la memorizzazione nella cache dei contenuti intelligente è uno degli strumenti più potenti a tua disposizione. La tecnica di consegna del contenuto centrale del protocollo HTTP utilizza la memorizzazione nella cache o l'archiviazione temporanea del contenuto delle richieste precedenti. Se le politiche di memorizzazione nella cache del contenuto lo consentono, i componenti in qualsiasi punto della catena di consegna possono archiviarne copie per velocizzare le richieste successive.

La memorizzazione nella cache aiuta molto a migliorare i punteggi vitali del Web principale.

9. Precarica le immagini degli eroi

Le immagini degli eroi sono solitamente l'elemento più significativo che appare sopra il contenuto della piega. Quindi, se si caricano più velocemente, l'esperienza utente complessiva è notevolmente migliorata. LCP può essere ridotto drasticamente utilizzando l'attributo di collegamento "rel=preload" , che è particolarmente utile per le immagini eroi caricate con CSS o JavaScript.

10. Astenersi dal dare la priorità alla pubblicità o ai pop-up rispetto ad altri contenuti.

Un punteggio CLS basso è il risultato dello spostamento del contenuto su una pagina causato dall'aggiunta di contenuto nella parte superiore.

Metti da parte spazio per pubblicità, iframe e altre forme di contenuto dinamico.

Non allocare uno spazio specifico per loro è un modo infallibile per interrompere il layout, proprio come accade con immagini e video. Per evitare che il contenuto fuoriesca da un contenitore, utilizzare la proprietà overflow: hidden e scegliere un contenitore di dimensioni adeguate.

11. Rompi i compiti lunghi

Questa deve essere la tua massima priorità. Quando le attività lunghe ritardano il thread principale, non può reagire prontamente alle richieste dell'utente. Le prestazioni del sito Web possono essere notevolmente migliorate suddividendole. Ciò riduce il FID e migliora la UX

12. Interrompere o posticipare l'esecuzione di eventuali script di terze parti non necessari

Gli script del tuo sito Web potrebbero non essere eseguiti in tempo se sono in conflitto con quelli di terze parti. Considera quali script sono più utili per l'utente finale e assegna loro una priorità maggiore. Gli script di annunci e pop-up non dovrebbero essere in cima all'elenco.

Come stanno andando i primi 10 domini statunitensi in termini di Core Web Vitals in base alla SEO Visibility di Searchmetrics.

Tutte le metriche e se il dominio supera o meno Core Web Vitals vengono riportate mensilmente a livello di dominio. Nel febbraio 2022, il 75% di tutti i caricamenti delle pagine desktop di Wikipedia ha richiesto meno di 1,1 secondi e il dominio ha ottenuto un punteggio pari a 0 sia in FID (espresso in millisecondi) che in CLS, superando Core Web Vitals.

I primi 10 CWV per dispositivi mobili basati sulla metrica SEO Visibility di Searchmetrics .

Ove possibile, è stata utilizzata una versione mobile di un dominio. Tuttavia, ciò dipende principalmente dalla raccolta dei dati CrUX. Una quota maggiore di siti per dispositivi mobili supera Core Web Vitals rispetto ai desktop.

Conclusione

Core Web Vitals è un punto di svolta per migliorare l'esperienza web per tutti. Queste misurazioni continueranno a essere incluse nel sistema di ranking di Google.

Ecco perché è essenziale tenerli d'occhio anche se non vedi nulla che non va.

Per mantenere un sito Web di successo, è fondamentale migliorare costantemente l'esperienza dell'utente. Grazie alla disponibilità di numerosi utili strumenti e plug-in, questo processo può essere reso molto più semplice e facile di quanto sarebbe altrimenti. Oppure, se ti sembra scoraggiante, puoi assumere uno sviluppatore che lo faccia per te.