Gli esperti del Digital marketing

Potenzia il tuo business online con Monkey Digital SEO: sfrutta al massimo il potenziale del marketing strategico digitale.

Come migliorare la velocità della pagina per superare i principali parametri web vitali di Google

Come migliorare la velocità della pagina per superare i principali parametri web vitali di Google

Questo post è stato sponsorizzato da DebugBear. Le opinioni espresse in questo articolo appartengono allo sponsor.

Un sito web veloce offre un’esperienza più piacevole agli utenti e può portare a tassi di conversione più elevati.

Ma Google tiene conto anche della velocità del sito web come parte del Core Web Vitals e la utilizza come fattore di ranking.

Scopri come funziona la valutazione Core Web Vitals di Google e cosa puoi fare per garantire che il tuo sito web venga caricato rapidamente e offra una buona esperienza una volta caricato.

In questa guida:

  • 1. Quali sono i Core Web Vitals?
  • 2. Cos'è il Core Web Vitals Assessment di Google?
  • 3. Come velocizzare la pittura con contenuto più grande (LCP)
  • 4. Come migliorare l'interazione con Next Paint (INP)
  • 5. Come ridurre lo spostamento cumulativo del layout
  • 6. Monitora la velocità della pagina e i parametri vitali del Web principale

Quali sono i Core Web Vitals?

I Core Web Vitals (CWV) di Google mirano a misurare la qualità del sito web e l'esperienza dell'utente.

Per fare ciò, sono state sviluppate diverse nuove metriche che possono essere raccolte nel browser Chrome.

Tre di questi parametri costituiscono i Core Web Vitals:

  • La più grande vernice contenuta.
  • Interazione con la vernice successiva.
  • Spostamento cumulativo del layout.

La più grande vernice contenuta

La metrica Largest Contentful Paint (LCP) misura la velocità con cui il singolo contenuto più grande della pagina appare sulla pagina dopo che un visitatore ha aperto una pagina.

Puoi vedere un esempio dell'LCP in questa sequenza di velocità della pagina di rendering di DebugBear, che mostra quale contenuto sarebbe visibile agli utenti in diversi momenti nel tempo.

Filmina DebugBear che mostra come il contenuto della pagina appare gradualmente su un sito web, novembre 2023

Qui il contenuto inizia a essere visualizzato dopo soli 1,27 secondi.

Tuttavia, l'immagine a destra viene identificata da Chrome come elemento LCP e viene visualizzata solo 2,33 secondi dopo la navigazione.

Il Largest Contentful Paint è strettamente correlato ad altri due parametri Web Vitals che non fanno parte dei Core Web Vitals: Time to First Byte e First Contentful Paint.

Tempo al primo byte

Time to First Byte (TTFB) misura la velocità con cui il server risponde alla richiesta del documento HTML caricato all'inizio del processo di caricamento della pagina.

Senza il documento HTML, il browser non può mostrare alcun contenuto o iniziare a caricare altre risorse.

Prima pittura ricca di contenuti

Il First Contentful Paint (FCP) esamina la rapidità con cui il contenuto appare sulla pagina.

Il contenuto qui di solito significa testo o un'immagine.

Tuttavia, quando la pagina raggiunge questo traguardo, la maggior parte del contenuto potrebbe non essere ancora disponibile per il visitatore.

Il FCP non potrà realizzarsi prima del traguardo del TTFB. A sua volta, il dipinto con contenuto più grande è sempre maggiore o uguale al primo dipinto con contenuto.

Ciò significa che TTFB e FCP impongono limiti inferiori all'LCP e osservare questi due parametri può aiutarti a comprendere il comportamento di caricamento del tuo sito web.

Interazione con la vernice successiva

L'interazione con Next Paint (INP) misura la reattività di un sito Web all'input dell'utente.

Generalmente esamina l'interazione più lenta che un utente ha su una pagina web.

INP segnala quanto tempo è trascorso tra due timestamp durante un'interazione con la pagina:

  • L'input dell'utente, ad esempio, un clic o la pressione di un tasto.
  • Il successivo aggiornamento visivo (“paint”) del sito web (non importa se il contenuto cambia o meno).

Ad esempio, questa pellicola mostra un pulsante "Visualizza dettagli" su cui si fa clic.

Il clic viene gestito dal codice JavaScript sulla pagina e l'esecuzione di questo codice richiede del tempo. Durante l'elaborazione del clic, l'interfaccia utente del sito Web rimane bloccata. Una volta completata l'elaborazione della CPU, il browser esegue il rendering del nuovo contenuto.

Screenshot di DebugBear che mostra i passaggi coinvolti nell'interazione di una pagina, novembre 2023

Tecnicamente, Interaction to Next Paint non è ancora uno dei Core Web Vitals, ma Google ha annunciato che INP sostituirà la vecchia metrica First Input Delay nel marzo 2024.

Spostamento cumulativo del layout

La metrica Cumulative Layout Shift (CLS) controlla se il contenuto della pagina è visivamente stabile dopo la sua visualizzazione.

Un'interfaccia utente instabile disorienta gli utenti e può portare a interazioni indesiderate con la pagina.

Questo screenshot mostra un esempio di spostamento del layout che avviene durante il processo di caricamento della pagina.

Inizialmente l'immagine in alto a destra non è ancora visibile poiché il browser la sta ancora scaricando. Una volta visualizzata l'immagine, la dimensione dell'elemento immagine viene aggiornata. In questo caso, l'elemento diventa più grande e quindi spinge verso il basso il contenuto che si trova sotto di esso nella pagina.

Screenshot di DebugBear che mostra i cambiamenti di layout su un sito web, novembre 2023

Il CLS è chiamato “cumulativo” perché l’impatto dei diversi cambiamenti viene sommato.

Originariamente questo durava tutto il tempo in cui la pagina era aperta, ma questo dava ingiustamente una valutazione scarsa alle applicazioni a pagina singola di lunga durata. Google è ora passato alla definizione CLS con finestra che considera solo una finestra temporale fino a cinque secondi.

Che cos'è il Core Web Vitals Assessment di Google?

Google esegue una valutazione Core Web Vitals sul tuo sito web e utilizza i risultati come segnale di posizionamento.

Se il tuo sito web non soddisfa i Core Web Vitals, riceverai un avviso in vari strumenti, ad esempio l'avviso "Core Web Vitals Assessment: Failed" in Page Speed ​​Insights.

Schermate di approfondimenti sulla velocità delle pagine con una valutazione Web Vitals non riuscita, novembre 2023

I dati per la valutazione Core Web Vitals provengono dal Chrome User Experience Report (CrUX), che raccoglie dati utente reali dagli utenti di Chrome.

Oltre a PageSpeed ​​Insights, Google Search Console controlla anche i tuoi parametri web vitali e spiega quali URL non sono considerati "buoni".

Screenshot di Google Search Console che mostra i dati Core Web Vitals, novembre 2023

Cosa rende buona una buona valutazione dei parametri fondamentali del web?

Google definisce le soglie "Buono", "Scarso" e "Richiede miglioramenti" per ciascuna metrica.

Metrica Buona Necessita di miglioramenti Scarsa Contenuto più grande Pittura Sotto 2,5 s Meno di 4 s Oltre 4 s Interazione con la pittura successiva Sotto 200 ms Sotto 500 ms Oltre 500 ms Spostamento layout cumulativo Sotto 0,1 Sotto 0,25 Oltre 0,1

Per ottenere il massimo vantaggio in termini di ranking, il tuo sito web dovrebbe essere valutato “Buono” in tutti e tre i Core Web Vitals. Man mano che il tuo sito web peggiora, ciò influisce gradualmente sulle tue classifiche fino al raggiungimento della soglia “Scadente”.

Come velocizzare il Largest Contentful Paint (LCP)

Per migliorare il tuo LCP, è necessario che il contenuto principale del tuo sito web venga caricato più velocemente.

  • Esegui un test gratuito della velocità del sito web per capire cosa causa il ritardo del contenuto principale della tua pagina web.
  • Ricevi ed esamina gli approfondimenti dalla pellicola visiva e le metriche prestazionali di alto livello per scoprire quali sono i tuoi prossimi passi.
  • Utilizza queste informazioni per ottimizzare la velocità di caricamento della pagina.

Risultato di un test di velocità del sito Web DebugBear, novembre 2023

Puoi quindi approfondire la metrica specifica facendo clic sul titolo della metrica "Largest Contentful Paint" nel risultato del test.

Questo ti mostrerà:

  • Quale elemento della pagina è responsabile della pittura con contenuto più grande.
  • Se l'LCP è un'immagine, qual è l'URL dell'immagine e quale priorità della richiesta è stata utilizzata dai browser.
  • Se l'LCP è un'immagine, dipende da quali altre richieste del file immagine.

Screenshot di DebugBear che mostra un'analisi del Largest Contentful Paint, novembre 2023

Le cascate di richieste mostrano quali risorse sono state caricate sulla rete e quanto tempo hanno impiegato per essere caricate. In questo caso, la cascata di richieste parziali incentrata sull'immagine LCP mostra che l'immagine dipende dal primo caricamento di un file JavaScript di grandi dimensioni. Questo è un problema comune e dovresti mirare a caricare le immagini LCP direttamente dal documento HTML.

Il risultato del test DebugBear offre anche molti consigli automatizzati e li classifica in base all'impatto previsto.

Come migliorare l'interazione con Next Paint (INP)

Solo il 64% dei siti web mobili attualmente fornisce una buona esperienza INP, rendendola una metrica importante da ottimizzare.

Può essere difficile eseguire il debug della metrica INP poiché dipende dall'interazione dell'utente che non può essere testata altrettanto facilmente.

Puoi testare manualmente le interazioni della pagina e misurarle utilizzando il profilo delle prestazioni di Chrome DevTools.

Funziona bene se sai con quali elementi della pagina interagiscono in genere gli utenti. DevTools è molto utile anche una volta identificata un'interazione lenta, poiché gli strumenti per sviluppatori di Chrome ti diranno esattamente su cosa trascorre il tempo il browser durante tale interazione.

Anche lo strumento INP Debugger può essere utile poiché simula automaticamente le interazioni con diversi elementi della pagina. Tutto quello che devi fare è inserire l'URL di un sito web.

Screenshot dello strumento INP Debugger gratuito, novembre 2023

Tuttavia, il debugger INP non sarà in grado di identificare tutte le interazioni, soprattutto se fanno parte di un flusso di utenti più lungo. È qui che la raccolta del monitoraggio degli utenti reali (RUM) è utile, poiché ti consente di concentrare le tue ottimizzazioni esattamente nel posto giusto.

Con i dati RUM puoi vedere esattamente con quali elementi della pagina interagisce la maggior parte degli utenti e se stanno riscontrando ritardi nell'interazione.

Screenshot dei dati di monitoraggio degli utenti reali in DebugBear, novembre 2023

Puoi anche vedere una ripartizione del RUM nei suoi diversi componenti:

  • Ritardo di ingresso.
  • Tempo di elaborazione.
  • Ritardo nella presentazione.

Il ritardo di input misura quanto tempo dopo l'interazione dell'utente il browser ha iniziato a elaborare l'input dell'utente. Un ritardo di input elevato indica che le attività in background o i gestori eventi precedenti stanno bloccando l'interazione dell'utente.

Il tempo di elaborazione misura il tempo effettivo impiegato per gestire l'input dell'utente. Se questo è lento, i tuoi sviluppatori devono esaminare quale codice viene eseguito in risposta all'interazione e come tale codice può essere ottimizzato.

Il ritardo di presentazione misura il tempo trascorso tra l'evento gestito e la verniciatura successiva. Questo numero può essere elevato se il rendering della pagina è complesso o se altre elaborazioni della CPU sono state messe in coda mentre veniva gestita l'interazione.

Come ridurre lo spostamento cumulativo del layout

Similmente a INP, lo spostamento cumulativo del layout può essere difficile da risolvere poiché spesso accade quando l'utente scorre la pagina verso il basso o quando viene visualizzato contenuto aggiuntivo dopo che l'utente ha fatto clic su un elemento dell'interfaccia utente.

Se lo spostamento del layout avviene durante il caricamento iniziale della pagina, è facile identificarlo tramite:

  • Esecuzione di un test di velocità della pagina.
  • Facendo clic sul titolo della metrica "Spostamento cumulativo del layout" per vedere quali elementi della pagina sono stati spostati.
  • Correzione dell'elemento che causa lo spostamento.

Ad esempio, in questo caso sono stati caricati contenuti aggiuntivi che hanno causato la modifica del layout.

Screenshot che mostra il cambiamento del layout dei test di laboratorio in DebugBear, novembre 2023

Come correggere i cambiamenti di layout

Per correggere i cambiamenti di layout, assicurati che siano presenti segnaposto di dimensioni adeguate se alcuni contenuti vengono visualizzati solo in un secondo momento nel processo di caricamento della pagina.

Puoi anche assicurarti che gli altri contenuti vengano caricati prima: se il contenuto è pronto non appena inizia il rendering della pagina, non vi è alcun cambiamento di layout.

Se il tuo punteggio CLS è difficile da replicare, puoi utilizzare il monitoraggio degli utenti reali di DebugBear per vedere cosa causa i cambiamenti di layout per i tuoi utenti reali.

Oltre a esaminare le distribuzioni di alto livello, puoi anche esaminare le esperienze dei singoli utenti e cosa ha portato a cambiamenti di layout per loro.

Screenshot che mostra il cambiamento reale del layout dell'utente in DebugBear, novembre 2023

Monitora la velocità della pagina e i principali parametri web vitali

Se hai difficoltà a superare la valutazione Core Web Vitals, il monitoraggio di DebugBear può aiutarti a identificare i problemi sul tuo sito web e assicurarti di ricevere avvisi quando si verifica un problema.

Avvia semplicemente una prova gratuita e inserisci gli URL del tuo sito web. Visualizza tutte le metriche sulla velocità della tua pagina a colpo d'occhio sulla dashboard. DebugBear tiene traccia anche dei punteggi Lighthouse e dei dati Google degli utenti reali che influiscono sulle classifiche.

Screenshot che mostra le principali metriche sulla velocità della pagina in DebugBear, novembre 2023

Oltre a testare continuamente il tuo sito web in un ambiente di laboratorio controllato, puoi anche installare uno snippet di analisi sul tuo sito per monitorare le esperienze degli utenti reali.

DebugBear mostra i grafici Core Web Vitals degli utenti reali, novembre 2023

Oltre alla panoramica Web Vitals di alto livello, DebugBear RUM ti consente di suddividere le esperienze degli utenti in base alla velocità della pagina, al Paese o al browser web.

Screenshot di DebugBear che mostra l'analisi TTFB di un utente reale, novembre 2023

Avere rapporti di laboratorio dettagliati e dati degli utenti reali ti consente di anticipare i dati di Google CrUX che influiscono sulle classifiche e vengono segnalati con un ritardo di 28 giorni. DebugBear fornisce approfondimenti approfonditi sui tuoi Core Web Vitals e ti aiuta a comunicare con il resto del tuo team e con il management.

Pronto per iniziare a ottimizzare il tuo sito web? Iscriviti a DebugBear e ottieni i dati di cui hai bisogno per offrire esperienze utente eccezionali.

Le Critiche Crescenti Contro Google
Scoprire lo Sviluppo Web: La Programmazione come Arte
Scopri i Top Podcast SEO del 2024 e Mantieniti Aggiornato
Il ruolo delle finestre di dialogo nella progettazione di un'interfaccia utente web
Guida all'Integrazione di ChatGPT sul Tuo Sito Web
Utilizzo efficace di ChatGPT per la ricerca di parole chiave
Automatizzare le Campagne PPC con l'Intelligenza Artificiale Generativa
Aggiungere Coinvolgimento al tuo Sito con uno Sfondo Video CSS
Importanza delle Pagine di Destinazione per la Generazione di Lead e Incremento delle Vendite
Link Building

Link Building come parte della tua strategia di marketing può portare a risultati rivoluzionari. Seowebsite è specializzato nel Link Building e aiuta gli imprenditori a realizzare un forte profilo di link che contribuisce alla crescita online. Possiamo supportarvi anche in questo?