4 suggerimenti principali per migliorare il controllo dei vitali Web principali

Pubblicato: 2022-05-10

Non esiste una regola ferrea su come controllare i Core Web Vitals, in particolare con una varietà di strumenti di terze parti da considerare. Analizziamo alcuni dei nostri migliori suggerimenti per il controllo della velocità da incorporare nei tuoi flussi di lavoro, che riguarderanno:

  • Esperienza sulla pagina e Google Search Console
  • Gli svantaggi di PageSpeed ​​Insights
  • Strumenti di controllo di terze parti consigliati
  • Comprensione dei grafici a cascata

1. Avvia il flusso di lavoro di audit di Core Web Vitals con Search Console

Durante l'audit di un sito Web per la velocità del sito e i problemi di Core Web Vitals, consigliamo di avviare sempre il processo di risoluzione dei problemi esaminando la sezione "Esperienza" in Search Console, a condizione che l'accesso sia disponibile. Search Console aggrega i dati degli utenti reali (sul campo) dal rapporto Chrome UX, quindi questo è un modo semplice per capire quali problemi di LCP, CLS o FID stanno influenzando la tua esperienza utente e, in definitiva, il potenziale di posizionamento del sito.

Passa a "Esperienza della pagina" > "Core Web Vitals" e il grafico visualizzato mostrerà il numero di URL classificati come "Buono", "Necessario miglioramento" o "Scarso" per la proprietà del sito web. Per esempio:

Esempio di grafico Core Web Vitals di GSC

Vedi il grafico qui sotto sui tempi e le metriche di Google sulle soglie dei Core Web Vitals sopra.

Bene Necessita miglioramenti Povero
LCP <=2,5 secondi <=4s >4s
FID <=100 ms <=300 ms >300 ms
CLS <=0,1 <=0,25 >0,25

Da qui, possiamo valutare se la maggior parte degli URL è classificata o meno come "Buona", quindi superando tutte e 3 le metriche di Core Web Vitals, o se la maggior parte delle pagine è "Scarsa" o "Richiede miglioramenti", indicando che ci sono alcuni problemi tecnici in sospeso che devono essere risolti per farli passare.

Suggerimento utile: le pagine devono superare tutti e tre i parametri vitali per passare allo stato "Buono" e non è sufficiente che la maggior parte degli URL di un sito si trovi nell'intervallo "Richiede miglioramenti".

È quindi possibile approfondire ogni sezione per scoprire gli URL specifici interessati da problemi di velocità e che necessitano di un controllo. Questi sono raggruppati in base a quelli simili a livello di modello. Quindi, invece di provare a controllare tutti i diversi tipi di URL che un sito potrebbe avere, ad esempio home page, pagine di categorie, pagine di prodotti, post di blog, ecc., i problemi che gli utenti reali devono affrontare quando visitano il sito Web possono essere centrati solo su 1 o 2 di questi, il che significa che puoi concentrare i tuoi sforzi esclusivamente su questi modelli, che possono farti risparmiare molto tempo.

2. Usa PageSpeed ​​Insights con parsimonia

Sebbene PageSpeed ​​Insights (PSI) sia un utile strumento gratuito di Google che offre una panoramica di alto livello delle potenziali opportunità per risolvere i problemi, è davvero un modo pigro per controllare la velocità del sito se utilizzato in isolamento. Abbiamo visto molti SEO prendere i consigli, a volte parola per parola, e presentarli agli sviluppatori dei clienti o al team tecnico senza capire davvero il perché o il contesto dietro di essi.

Sfortunatamente, questo può spesso portare a rispondere a più domande, soprattutto se non stai approfondendo ulteriormente le opportunità e i consigli che lo strumento sputerà fuori.

Ad esempio, abbiamo tutti sentito parlare della raccomandazione di "Eliminare le risorse di blocco del rendering" per accelerare il caricamento dell'elemento LCP, ma cosa succede quando questa risorsa è fondamentale da avere sul primo disegno, come uno script di cookie banner o le risorse interessate sono risorse di terze parti? È probabile che gli sviluppatori respingano questo problema, poiché non saranno in grado di fare molto, quindi è davvero importante che tutti i consigli tecnici presi da PSI siano presi con un pizzico di sale e studiati ulteriormente prima di tornare a sviluppatori.

È anche utile sapere che PSI utilizza un dispositivo emulato insieme (Moto G4) con Lighthouse, ma i problemi possono variare notevolmente a seconda del dispositivo utilizzato dagli utenti reali più frequentemente, come nel caso dei test "di laboratorio". Spesso può significare che PSI non restituirà problemi o opportunità di test su quel dispositivo specifico, anche se sai che c'è un problema per gli utenti reali del sito dal rapporto Chrome UX.

Configurazione di prova predefinita di Lighthouse utilizzata da PageSpeed ​​Insights

Pertanto, consigliamo sempre di utilizzare PSI insieme ad altri strumenti di test della velocità in cui è possibile regolare di conseguenza la configurazione del dispositivo e della connessione.

3. Esplora strumenti alternativi di controllo della velocità

Oltre a utilizzare PageSpeed ​​e altri strumenti di Google, consigliamo anche di esplorare altri strumenti gratuiti e freemium per il test della velocità, come WebPageTest (WPT) o GTMetrix.

WebPageTest ha una gamma di utili funzioni e opzioni di configurazione che aiutano a testare la velocità a livello di pagina. La configurazione avanzata consente di regolare importanti impostazioni di test, come il browser e il tipo di dispositivo, nonché la posizione del test. Ciò ti consente di perfezionare il tuo controllo, soprattutto se sai dove si trova la maggior parte degli utenti del sito, nonché il tipo di dispositivo, il che significa che non ti affidi solo al dispositivo simulato preimpostato di Google.

Qui puoi anche regolare le impostazioni di connessione dalla connessione 3G Fast predefinita, nonché bloccare determinati URL se desideri testare aumenti delle prestazioni per script problematici. Ci sono molte altre opzioni di configurazione che non abbiamo elencato da esplorare, ma quelle sopra sono quelle che abbiamo trovato più utili durante l'auditing dei principali elementi vitali del web.

Le utili opzioni di configurazione avanzata di WebPageTest

Una volta eseguito un test, vai alla scheda Core Web Vitals per ottenere un'analisi dettagliata delle prestazioni per ciascuna metrica, inclusi filmati, timeline video, grafici a cascata, nonché un'analisi dettagliata dell'elemento che ha attivato l'evento, il tutto sono esportabili in una vasta gamma di formati e, soprattutto, gratuiti!

La visualizzazione pellicola è particolarmente utile per capire in quale punto del caricamento della pagina vengono visualizzati determinati elementi, il che può aiutare a stabilire la priorità di quali risorse potrebbero essere potenzialmente caricate più rapidamente. Verrà visualizzato molto chiaramente se ci sono cambiamenti visivi significativi per aiutare a individuare gli elementi che lo causano.

Esempio di pellicola che mostra un problema con CLS dovuto al caricamento di un banner dei cookie

GTMetrix ha funzionalità simili a WebPageTest, tuttavia, molte delle opzioni avanzate gratuite in WPT sono disponibili solo nei pacchetti a pagamento.

4. Conosci i grafici delle cascate

In termini di base, un grafico a cascata è una sequenza temporale di quando vengono richiesti file o risorse, quanto tempo hanno impiegato per scaricarli e quando sono visibili sulla pagina.

Guardare un grafico a cascata può sembrare un po' scoraggiante dall'offset, poiché ci sono molte righe, lunghezze delle barre e colori diversi che significano cose diverse, ma non lasciarti scoraggiare! Trascorrere del tempo a conoscere e comprendere i grafici a cascata è l'abilità più importante che un SEO tecnico dovrebbe avere per il controllo della velocità.

Se sei abituato a utilizzare WebPageTest per il controllo dei parametri vitali web, riteniamo che i loro grafici a cascata siano i più facili da usare. WebPageTest fornisce una chiave con codice colore sopra il grafico che indica le informazioni sulla connessione, i tipi di risorsa richiesti e altri eventi come l'esecuzione JS. Visualizza anche visivamente le risorse di blocco del rendering, oltre a evidenziare le risorse richieste che hanno una risposta 3xx o 4xx.

Suggerimento utile: prestare attenzione alla tonalità chiara e scura delle barre orizzontali sulla cascata, la tonalità chiara indica che la risorsa è stata richiesta dal browser, mentre la tonalità scura indica che la risorsa è in fase di download .

Tutto sommato, questo aiuta ad acquisire una comprensione più profonda dei problemi di prestazioni sul sito e, a sua volta, rende i tuoi consigli per risolverli più attuabili. Raccomandiamo l'articolo approfondito di Matt Hobbs su come leggere un grafico a cascata per saperne di più.


Se stai cercando consigli di esperti sulla risoluzione dei problemi di prestazioni sul tuo sito web, contattaci o visita la nostra pagina dei Servizi SEO tecnici per ulteriori informazioni su come Semetrical può aiutarti.