Come analizzare i risultati di Google PageSpeed ​​Insights

Dato che Google darà una spinta alla classifica dei siti Web veloci, probabilmente sei interessato a saperne di più sugli approfondimenti di Google PageSpeed?

…E non sono sorpreso perché è fonte di confusione!

Questo articolo ti aiuterà.

Perché la velocità della pagina del sito Web è importante?

Google vuole fornire agli utenti la migliore esperienza utente possibile.

Se il tuo sito web è lento, frustrerà gli utenti e creerà un'esperienza utente negativa. È così semplice. Le prestazioni influiscono sull'esperienza.

Google ha recentemente annunciato che nel 2021 i dati vitali web principali verranno utilizzati come parte del loro algoritmo di ranking. Questi dati vitali web principali sono indicatori di velocità e della velocità con cui le persone possono interagire con la tua pagina.

Fondamentalmente per questa tabella qui sotto non puoi essere "rosso"

Che cos'è Google PageSpeed ​​Insights?

È uno strumento gratuito fornito da Google che consente di inserire l'URL di una pagina Web ed eseguire rapidamente un test per verificare le varie metriche relative alle prestazioni.

Lo strumento assegna quindi alla tua pagina un punteggio che va da 0 a 100 punti. Il punteggio non riguarda proprio la velocità. Puoi ottenere un punteggio migliore se hai utilizzato i consigli tipici di Google sul miglioramento della velocità.

Ti mostra anche i parametri esatti che stanno rallentando la tua pagina e suggerimenti su come migliorarla.

È qui che le cose si fanno tecniche e i risultati sono un po' difficili da capire.

Come interpreti i risultati?

La prima cosa che vedi dopo aver eseguito un test è il punteggio delle prestazioni (desktop e mobile) per la pagina analizzata.

Questo sarà un numero compreso tra 0 e 100.

• Da 0 a 49 – Questo è male, non vuoi che il tuo punteggio sia 49 o meno
• Da 50 a 89 – Va bene, ma margini di miglioramento
• Da 90 a 100 – Se sei in questa scala sei nei buoni libri.

Mentre scorri verso il basso vedrai cosa sta causando un punteggio alto o basso:

Nota: vedere gli indicatori di colore prima di ogni sezione:

• Verde significa veloce
• Arancio significa moderato
• Rosso significa lento

Questo è il significato di ciascuna di queste sezioni:

Prima pittura ContentFul

Questo è il tempo necessario dalla navigazione a una pagina dal browser al momento in cui il contenuto inizia a essere visualizzato.

Fondamentalmente, è un indicatore che la pagina sta iniziando a caricarsi.

Ad esempio, potrebbe essere solo un cambio di colore che è il colore di sfondo della pagina, un'immagine visualizzata o un pezzo di testo.

Questo è importante perché quando un utente vede un'azione è più probabile che aspetti finché la pagina non è completamente caricata.

Orientamento:

Tempo per interattivo

Questo parametro mostra la velocità con cui una pagina diventa interattiva.

Ciò significa che la pagina mostra elementi sufficienti sullo schermo in modo che gli utenti possano effettivamente interagire con essa, ad esempio fare clic su un pulsante del menu.

A volte, i siti Web possono concentrarsi sulla visibilità, ovvero ottenere tutto visualizzato prima che tu possa interagire con il contenuto, il che potrebbe essere frustrante per l'utente.

Orientamento:

Tempo di blocco totale

C'è un divario tra il momento in cui il visitatore del tuo sito web vede il contenuto sullo schermo e il tempo in cui può interagire con esso.

Questo è il tempo di blocco totale!

È bene sapere se le persone non possono fare cose come fare clic con il mouse, toccare lo schermo o premere parole chiave prima che il sito Web sia interattivo.

Le attività lunghe sono attività che ti bloccano per più di 50 ms.

Tutto ciò che supera i 50 ms è considerato tempo di blocco.

Se non ci sono attività lunghe, vedrai 0 tempo di blocco, che è quello che vedi nelle statistiche sopra.

Spostamento cumulativo del layout

Un cambio di layout è quando un elemento visivo viene visualizzato sullo schermo ma poi si sposta.

Ad esempio, stai leggendo le notizie e c'è un cambiamento di layout, quindi la posizione in cui si trova l'articolo è cambiata.

Questo è un comportamento imprevisto dal punto di vista dell'utente.

Più alto è il punteggio, peggio è.

Indice di velocità

Questo è difficile da capire ma prezioso.

Quindi immagina 2 siti Web caricati entrambi in 1,5 secondi.

Se esplorassi i 2 siti Web mostrati nell'immagine sopra, quale si caricherebbe più velocemente?

Entrambi caricati completamente in 1,5 secondi, ma poiché il primo sito ha iniziato a mostrare alcuni elementi in precedenza, sembrava essere più veloce per l'utente.

Se misuri solo il tempo per caricare sono gli stessi.

L'indice di velocità è un punteggio calcolato in base alla "velocità" di caricamento completo di un sito Web.

Una registrazione video del carico viene utilizzata per mostrare visivamente quando i bit vengono caricati.

A vari intervalli, la quantità di contenuto visibile sullo schermo (above the fold) viene confrontata con il contenuto visualizzato su un sito Web completamente caricato per calcolare la percentuale di contenuto visualizzato per quel particolare periodo.

Questo processo viene ripetuto alcune volte.

Il tempo si basa solo su ciò che l'utente può vedere sullo schermo (la finestra). Non importa cosa c'è sotto la piega.

Quindi... è bene provare con diversi viewport.

Se hai 2 siti Web e uno mostra elementi visivi prima dell'altro, finirà con un punteggio dell'indice di velocità inferiore.

Più basso è, meglio è.

La più grande vernice contenta

Questo è il tempo necessario per il rendering completo dell'elemento più grande della pagina.

Quando la pagina viene caricata, il primo elemento diventa l'elemento più grande, ma questo viene sostituito quando vengono aggiunti elementi più grandi.

L'ultimo elemento di una pagina potrebbe essere l'elemento più grande della pagina (ad esempio un'immagine grande) oppure potrebbe non esserlo.

Nota: non stiamo parlando di quanto spazio occupa sullo schermo.

Ecco 2 esempi.

Il momento in cui il sito Web ha iniziato a essere visualizzato fino al momento in cui è stata visualizzata l'ultima immagine sulla pagina sarebbe considerato la pittura più ricca di contenuti. Questo perché l'immagine occupa più spazio nella pagina!

Ma…

Nel caso sotto l'immagine "Instagram" era l'immagine più grande visualizzata, quindi la vernice più ricca di contenuti è quando è stata caricata la penultima schermata.

L'ultima schermata è scontata. Tutto ciò che è stato aggiunto a quella schermata era il "pulsante di riproduzione di Google", che era un'immagine più piccola di quella di "Instagram".

Secondo Google, se desideri fornire una buona esperienza utente, l'LCP dovrebbe avvenire entro 2,5 secondi dal primo caricamento della pagina.

Orientamento:

Opportunità

La sezione Opportunità mostra i suggerimenti che potrebbero aiutare a migliorare il tempo di caricamento della pagina.

Ogni suggerimento mostra anche la riduzione stimata del tempo di caricamento della pagina se hai implementato il consiglio.

Diagnostica

La diagnostica evidenzia le migliori pratiche nello sviluppo web che dovresti considerare di implementare.

Tuttavia, anche se apporti questi miglioramenti, non influiranno direttamente sul punteggio di rendimento della tua pagina.

Riepilogo

Migliorare la velocità del tuo sito web significa fornire ai visitatori un'esperienza migliore. Avere un sito che si carica rapidamente rende più felici sia gli utenti che i motori di ricerca, ma influisce anche sulla tua capacità di convertire i visitatori in clienti.

Uno strumento come Google PageSpeed ​​Insights è incredibilmente utile perché ti mostra da dove iniziare e su quali problemi concentrarti per migliorare le prestazioni del tuo sito web.

Speriamo che questo articolo ti abbia aiutato a capire come funziona questo strumento e cosa significano effettivamente i risultati del test in modo da poter iniziare a ottimizzare le tue pagine web per creare un'esperienza straordinaria per i tuoi visitatori.