Come funziona Google PageSpeed Insights e ottieni il 100/100

Stai valutando tutti gli strumenti che google ti ha messo a disposizione per gestire al meglio i tuoi siti web? O meglio ancora vuoi valutare la velocità del tuo sito web e migliorare la velocità del tuo sito web ? Scopri come funziona google pagespeed insights e ottieni il 100/100 !

Collaborando con vari clienti sia privati che agenzie spesso ci capita di ricevere richieste da parte di alcuni utenti che ci domandano perchè il loro sito web non è al 100/100 sul famoso tools di google pagespeed insights.

Non avere un punteggio massimo, non è poi la fine del mondo per un sito web ma capisco alle volte la frustrazione di un cliente che si è fatto fare il sito web, magari spendendo anche un bel po’ e poi ritrovarsi insoddisfatto.

Passiamo a noi e iniziamo a spiegare cosa è google pagespeed e come funziona, poi daremo alcuni suggerimenti per migliorare il vostro sito web.

Definizione di google pagespeed insights

Google’s PageSpeed Insights (PSI) è lo strumento ufficiale di casa Google per valutare le prestazioni delle tue pagine web. In questo articolo liberamente tradotto da questa fonte cerchiamo di analizzare nel dettaglio le modalità e i criteri di assegnazione dei punteggi.

PageSpeed Insights si avvale di  una tecnologia open-source chiamata Lighthouse, assieme ai dati raccolti da Chrome User Experience Report (CrUX) uno strumento di telemetria rilasciato da Google per studiare le statistiche d’utilizzo reali di Chrome, grazie ai report forniti dagli stessi utenti. 

Collegandosi a questa indirizzo web è possibile immettere la URL e ricevere una dettagliata valutazione sui seguenti aspetti (sia per dispositivi mobile che desktop):

  • Performance
  • Accessibility
  • SEO
  • Best Practices
  • Progressive Web App

Vi consigliamo di guardare alla velocità del vostro sito, più che ai punteggi.

Punteggi con strumenti come Pingdom, GTMetrix e Google PageSpeed ​​Insights possono a volte portare fuori strada. Soprattutto perché alcuni di loro non supportano ancore nemmeno HTTP/2.

Ciò che conta davvero è garantire che il vostro sito carichi velocemente e che anche le prestazioni percepite siano all’altezza.

Le prestazioni percepite sono date dalla velocità con cui il vostro sito web viene percepito come carico da parte degli utenti.

Consigli per migliorare punteggio google pagespeed insights

Quando vai ad effettuare un’ analisi, questa ti indica non solo il punteggio ma anche gli eventuali errori che ci sono o le eventuali modifiche che puoi apportare al tuo sito web.

Facendo una scansione di un template per un test, otteniamo un risultato del genere:

come-funziona-google-pagespeed-insights

Come puoi notare all’inizio ci segnala delle modifiche da effettuare, la prima è abilitare la compressione gzip, ma questo tipo di compressione in molti hosting condivisi non si può effettuare automaticamente, quindi , bisogna farla manualmente.

Puoi effettuare questa compressione gzip in due modi, uno se puoi installare il plugin di caching che supporta l’abilitazione Gzip.

WP Rocket ad esempio aggiunge automaticamente le regole di compressione Gzip nel file .htaccess usando il modulo mod_deflate.

Anche W3 Total Cache permette di abilitare Gzip nella sezione delle prestazioni .

L’altro metodo è modificare il file htaccess, aggiungendoci queste righe alla fine del file.

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

Ottimizzare ora l’immagine, un’altra azione fondamentale da effettuare in ogni sito web.

Puoi utilizzare dei plugin per effettuare queste operazioni di ottimizzazione immagini e renderle più leggere e ridimensionate agli articoli e al sito web.

Un plug-in può effettivamente provvedere a ottimizzare l’intera libreria multimediale di WordPress, oltre che ottimizzare automaticamente i file media al momento del caricamento.

Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold

Un’altra modifica che puoi apportare è quella del file javascript e css.

Quando un browser carica una pagina Web, le risorse JavaScript e CSS di solito impediscono la visualizzazione della pagina finché non vengono scaricate ed elaborate dal browser.

Alcune risorse devono essere scaricate ed elaborate prima di visualizzare qualsiasi cosa.

Tuttavia, molte risorse CSS e JavaScript sono condizionali, cioè vengono applicate solo in casi specifici, o semplicemente non sono necessarie per il rendering dei contenuti above the fold.

Per offrire l’esperienza più rapida possibile per i vostri utenti, dovreste cercare di eliminare tutte le risorse che bloccano il rendering che non sono necessarie a visualizzare il contenuto above-the-fold.

Per quanto riguarda il Render-blocking Javascript, Google fornisce tre suggerimenti:

  • Se non avete molto codice JavaScript, per eliminare questo avviso è possibile inserirlo inline. Potete inserire inline JavaScript con un plug-in come Autoptimize. Tuttavia, ciò è praticabile solo per siti molto piccoli.
  • Il secondo è caricare il vostro codice JavaScript in modalità asincrona. Il caricamento asincrono di Javascript consiste essenzialmente nello scaricare il file durante il parsing HTML e mettere in pausa il parser per eseguirlo solo al termine del download.
  • Il terzo suggerimento è quello di posticipare JavaScript. Anche l’attributo defer scarica il file durante il parsing HTML, ma lo esegue solo dopo che il parsing stesso è stato completato. Inoltre, gli script con questo attributo vengono eseguiti in ordine di apparizione nella pagina. Maggiori informazioni sulle differenze tra async e defer.

Ora non ci resta che andare ad esaminare il file css, per risolvere questo problema installeremo il plug-in gratuito Disable Google Fonts.

L’autore del plugin, Milan Dinić, lo ha aggiornato di recente e ora include il nuovo font di Twenty Seventeen, Libre Franklin.

Dopo aver installato il plugin, i vostri Google Fonts ovviamente non funzioneranno.

Quindi dovrete andare su Google Fonts e prelevare il codice da incorporare manualmente. Selezioniamo le stesse dimensioni dei font incluse di default nel tema Twenty Seventeen.

Quindi dovrete aggiungerlo al vostro file footer.php, subito prima del tag . Nota: così facendo si incapperà nel cosiddetto FOUT, che è ciò a cui ci si riferise quando si parla di flash di testo non stilizzato.

Ma così di si libererà anche del problema del blocco del rendering. Sarete voi a decidere se nei vostro sito il FOUT sia un’esperienza accettabile per i vostri visitatori.

Come potete vedere le modifche sono un po’ complicate ma qualche beneficio lo si ottiene, basta seguire le indicazioni di google pagespeed insights ed effettuarle man mano.