Google PageSpeed Insights è uno strumento utile per i webmaster e gli sviluppatori di siti web.
Questo strumento analizza i contenuti di una pagina web, quindi genera suggerimenti per renderla più veloce.
Purtroppo, però, questo strumento diventa quasi un’ossessione per l’ottimizzazione dei siti. Sempre più sviluppatori, infatti, passano ore ed ore a cercare di ottenere il punteggio di 100/100 in questo test.
Tempo che, spesso, non porta a nulla.
Infatti, possiamo dire che non è questo l’obiettivo di Google PageSpeed.
Molto più utile, invece, è il tempo dedicato ad attuare le raccomandazioni che PageSpeed consiglia.
Vediamo come.
Google PageSpeed Insights: cos’è
Si tratta di uno strumento utilizzato per testare le prestazioni dei siti web.
È, infatti, possibile inserire qualsiasi URL e farla analizzare.
In pochi secondi Google fornisce un punteggio complessivo del sito web testato, sulla base di diverse best practice di ottimizzazione delle prestazioni.
Ma non si ferma qui.
Oltre a questo risultato, infatti, sono indicati vari consigli per migliorare le prestazioni.
Tali punteggi sono calcolati tramite Lighthouse, lo strumento open source automatizzato di Google.
Questa piattaforma è in grado di valutare fattori come: prestazioni, accessibilità, applicazioni web progressive e così via.
Il punteggio 100/100
Molti proprietari di siti e sviluppatori puntano al raggiungimento del pieno punteggio, trascurando poi l’aspetto più importante dei risultati del test: le raccomandazioni.
Il dato più importante è la velocità effettiva del vostro sito web.
Un altro aspetto fondamentale per un sito è la performance percepita.
Google PageSpeed Insights, infatti, è uno strumento importantissimo, che riesce ad individuare i punti problematici del sito, in modo da poterlo ottimizzare e ridurre, cos’, i tempi di caricamento effettivi e percepiti.
Google e PageSpeed Insights
Le prestazioni di un sito influenzano la User Experience, ma anche la SEO.
Google, infatti, utilizza PageSpeed Insights per determinare le classifiche ed il posizionamento della SERP.
La velocità del sito è un fattore di classifica, ma non è l’unico.
Perciò, raggiungere il 100/100 non garantirà automaticamente un posto al vertice delle SERP.
Google PageSpeed Insights: Come migliorare le prestazioni
Innanzitutto, è necessario comprendere la differenza tra i Dati Reali (Field Data) e Dati di Prova (Lab Data) forniti da Google PageSpeed Insights.
Quelli reali mettono a confronto il sito con altri nel Chrome User Experience Report degli ultimi 30 giorni.
Per conoscere i tempi effettivi di caricamento del vostro sito , tuttavia, bisogna considerare sia i dati reali che i dati di prova.
Ma vediamo come migliorare il punteggio.
Elimina le Risorse di Blocco della Visualizzazione
Una delle raccomandazioni più frequenti che offre Google PageSpeed Insights è quella di eliminare le risorse che bloccano la visualizzazione.
Questo si riferisce in particolar modo a JavaScript e CSS, che rallentano il caricamento della pagina.
Sono due, in questo caso, le soluzioni da prendere in considerazione:
- Se non ci sono molti JavaScript e CSS, è possibile inserirli in linea per eliminare questo avviso, incorporando il JavaScript e/o CSS nel file HTML. Autoptimize è un plugin perfetto per questa operazione, ma vale solo per i siti molto piccoli.
- Posticipare il JavaScript. In questo modo, l’attributo defer scarica il file JavaScript durante il parsing HTML, ma lo esegue solo dopo che l’analisi è stata completata. Così gli script vengono eseguiti in ordine di apparizione sulla pagina.
Riduci al Minimo la Profondità delle Richieste Fondamentali
Questo aspetto ha a che fare con il Critical Rendering Path (CRP) e con il modo in cui i browser caricano le pagine.
Alcuni elementi devono essere caricati completamente prima che la pagina diventi visibile. Perciò, Google PageSpeed Insights mostra le catene di richieste sulla pagina.
Il diagramma mostra la serie di richieste che devono essere soddisfatte prima che la pagina diventi visibile. L’obiettivo è quello di ridurre al minimo il numero di richieste dipendenti, così come le loro dimensioni.
Alcuni modi per farlo sono:
- Eliminare le risorse che bloccano la visualizzazione
- Rimandare le immagini fuori schermo
- Minimizzare CSS e JavaScript
Ma è anche possibile ottimizzare l’ordine in cui vengono caricate le risorse, per abbreviare il CRP.
Mantieni un Numero Ridotto di Richieste e Dimensioni di Trasferimento Limitate
Più richieste i browser devono fare per caricare le vostre pagine, e più tempo ci vorrà per caricare il sito.
Per tale motivo Google raccomanda di ridurre al minimo il numero di richieste necessarie e di diminuire le dimensioni delle risorse.
Non c’è un numero ideale di richieste o di dimensioni massime da tenere in considerazione.
Si tratta di un insieme di obiettivi da tenere in considerazione per quanto riguarda:
- Dimensioni massime delle immagini
- Numero di web font utilizzati
- Quante chiamate inviate a risorse esterne
- Dimensione degli script e dei framework
Minimizza CSS e JavaScript
Minimizzare il CSS significa ottimizzare i file eliminando caratteri, spazi e duplicazioni non necessarie.
Google raccomanda questa prassi per ridurre le dimensioni dei file CSS e migliorare, così, la velocità di caricamento.
Plugin utili per questa operazione sono Autoptimize o WP Rocket, ideali per minimizzare i file CSS.
Così come per i file CSS, lo stesso vale per i file JavaScript.
Nel caso in cui ci fosse un CSS non utilizzato nel sito, Google raccomanda di rimuoverli per rendere il sito più veloce.
Una soluzione può essere quella di inserirli in linea o differire gli stili nel modo più logico per le pagine.
È anche possibile utilizzare uno strumento come Chrome DevTools per trovare i CSS inutilizzati che devono essere ottimizzati.
Riduci al Minimo il Lavoro del Thread Principale
Il thread principale è l’elemento primario del browser, e ha il compito di trasformare il codice in una pagina web. Quindi, analizza ed esegue HTML, CSS e JavaScript.
Inoltre, gestisce le interazioni con gli utenti. Perciò, quando il thread principale sta lavorando sul codice del sito, non può gestire anche le richieste degli utenti.
Google PageSpeed segnala, quindi, le pagine che impiegano più di quattro secondi per completare il thread principale e presentare una pagina web utilizzabile.
Alcuni dei metodi utilizzati per migliorare questo aspetto sono:
- Minimizzare il vostro codice
- Rimuovere il codice non utilizzato
- Implementare la cache
- Suddividere il codice in blocchi
Riduci i Tempi di Risposta del Server (TTFB)
Il Time to First Byte (TTFB) è la misura del tempo di cui necessita un browser per ricevere il primo byte di dati dal server del sito dal momento dell’invio di una richiesta.
Avere un TTFB basso, è positivo per le prestazioni del sito, perciò la riduzione dei tempi di risposta del server è tra le raccomandazioni di Google PageSpeed Insights.
Usa Immagini di Dimensioni Adeguate
Il corretto dimensionamento dei file multimediali, come le immagini, possono ridurre i tempi di caricamento.
Per risolvere questo problema, è possibile caricare le immagini nelle dimensioni appropriate, oppure utilizzare “immagini reattive”.
Ciò comporta la creazione di immagini di dimensioni diverse per vari dispositivi.
Questo è possibile con l’attributo srcset, che viene aggiunto ai tag < img> per specificare file immagine alternativi di dimensioni diverse.
I browser possono, quindi, leggere questo elenco, determinare quale sia l’opzione migliore per la schermata corrente e fornire quella versione dell’immagine.
Rimanda Immagini Fuori Schermo
Il processo di rinvio delle immagini fuori schermo è anche noto come “lazy loading”.
In tal modo, invece di far caricare al browser ogni immagine di una pagina prima di visualizzare il contenuto che la precede, caricherà solo le immagini immediatamente visibili.
Alcuni plugin di WordPress utili per il lazy load sono: a3 Lazy Load e Lazy Load di WP Rocket.
Codifica in Modo Efficace le Immagini
Una delle prassi più comuni di ottimizzazione delle immagini è la compressione, utile per ridurre le dimensioni dei file.
L’obiettivo è quello di raggiungere le dimensioni più piccole possibili dei file, senza rinunciare alla qualità.
Per questo compito sono utili plugin come Imagify e Smush.
Altre raccomandazioni che influiscono sul controllo delle immagini codificate in modo efficiente comprendono:
- Utilizzo di immagini di dimensioni adeguate
- Implementazione del lazy load
- Pubblicazione di immagini in formati più recenti, come WebP
- Utilizzo di formati video per i contenuti animati, come le GIF
Immagini in Formati più Recenti
Alcuni formati di file si caricano più velocemente di altri. Purtroppo, non stiamo parlando di quelli PNG o JPEG.
Il formato che ad oggi preferisce Google è il WebP.
Per convertire tutte le immagini già presenti sul vostro sito WordPress potete utilizzare plugin come Imagify e Smush. Entrambi, infatti, offrono una funzione di conversione a WebP.
Compressione del Testo
La raccomandazione Attiva la Compressione del Testo di Google PageSpeed Insights si riferisce all’uso della compressione GZIP.
In alcuni casi la compressione del testo viene attivata automaticamente sul server. Ma se, al contrario, non fosse questo il caso del vostro sito, ci sono due soluzioni.
Una è quella di installare un plugin con una funzione di compressione GZIP, come WP Rocket.
La seconda, invece, è quella di comprimere il testo manualmente. Questo comporta la modifica del vostro file .htaccess, il che lo rende un passaggio rischioso.
Per controllare la compressione del testo di un sito, uno strumento utile è GiftOfSpeed che vi dirà se la compressione GZIP è stata implementata con successo.
Evita di Usare un DOM di Dimensioni Eccessive
Il DOM è il modo in cui i browser trasformano l’HTML in oggetti.
Si tratta di una struttura ad albero costituita da singoli nodi che rappresentano ciascuno un oggetto.
Perciò, più grande è il DOM di una pagina, più tempo ci vorrà per caricarla.
Se, invece, la vostra pagina supera una certa dimensione del DOM, Google consiglia di ridurre il numero di nodi e la complessità dello stile CSS.
Una delle cause può essere il tema WordPress. I temi pesanti, infatti, tendono ad aggiungere grandi quantità di elementi al DOM, rallentando così il sito.
In questo caso, perciò, una soluzione è quella di cambiare tema.
Vive di fotografia e di parole. Amante dei libri e di scrittura, con la sua penna crea storie e racconti appassionanti per una storytelling avvincente ed originale.
Buongiorno,
molto esaustivo l’articolo, ed è proprio quello che serve a me, solo che non so come si fa esattamente tutto ciò.
Il mio sito ha tutti i problemi descritti sopra.
Articolo davvero interessante e completo. L’unica cosa che non iresco ancora a fare è ridurre il tempo di risposta del server. Immagino dipenda esclusivamente dall’ hosting scelto che nel mio caso è bluehost. Esistono altri modi?
Ciao Franco, grazie per l’elogio dell’articolo prima di tutto e ti confermo che la velocità di risposta del server dipende al 99% dal provider e dal servizio scelto per questo.
S