Blog

Come migliorare il punteggio di Google PageSpeed

come migliorare il page speed di google

Hai un sito web fatto con WordPress, Joomla, Drupal, altri CMS o semplicemente scritto a mano in HTML e CSS? Il tuo sito web è lento e poco performante? 
Vuoi velocizzare il tuo sito web e farlo risorgere per renderlo performante e migliorarne le conversioni? Google ha annunciato che darà sempre più importanza e priorità ai siti web veloci e performanti. E’ arrivato quindi il momento di velocizzare il tuo sito web e non restare indietro nelle SERP.

Per prima cosa facciamo un’analisi utilizzando il tool PageSpeed di Google che ci permette di verificare la velocità di un sito web, mostrandoci i punti deboli che dobbiamo andare a migliorare. Il tool serve inoltre ad analizzare e quindi ottimizzare il tuo sito web in termini di prestazioni e velocità per fornire agli utenti una migliore qualità di navigazione oltre che migliorarne l’engagement.

Velocizzare un sito web grazie a Google PageSpeed

Vai sul sito di Google PageSpeed ed inserisci l’url del sito web che vuoi velocizzare.
Dopo qualche secondo di analisi riceverai l’esito della scansione del sito web e ti verranno mostrati i problemi che Google ha riscontrato e che non permottono al tuo sito web di essere veloce. In questo esempio ho utilizzato il sito web di un cliente.

google page speed - desktop

google page speed - mobile

Come potete notare, i valori di velocità non sono sorprendenti e Google ci segnala gli errori che dobbiamo risolvere per velocizzare il sito web.

  • Sfrutta il caching del browser
  • Ottimizza le immagini
  • Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold
  • Dai la priorità ai contenuti visibili
  • Minimizza JavaScript
  • Minimizza HTML
  • Abilita la compressione
  • Minimizza CSS

Vediamo come risolvere questi alert uno ad uno.

Sfrutta il caching del browser

Questo segnale ci indica che dovremmo impostare una data di scadenza per le risorse statiche (file css, file js, immagini, etc etc) per far si che il browser prelevi questi file dal disco dove li ha precedentemente scaricati anzichè dalla rete, velocizzando il processo e fornendo quindi prima il risultato della lettura della pagina html.

Sui server linux possiamo agire andando ad inserire una direttiva sul file .htaccess in questo modo:


ExpiresActive On
ExpiresByType image/jpg “access plus 1 year”
ExpiresByType image/jpeg “access plus 1 year”
ExpiresByType image/gif “access plus 1 year”
ExpiresByType image/png “access plus 1 year”
ExpiresByType text/css “access plus 1 month”
ExpiresByType application/pdf “access plus 1 month”
ExpiresByType text/x-javascript “access plus 1 month”
ExpiresByType application/x-shockwave-flash “access plus 1 month”
ExpiresByType image/x-icon “access plus 1 year”
ExpiresDefault “access plus 2 days”

Ovviamente, in base al tuo sito web, setta una diversa scadenza in termini di tempo delle risorse statiche. Se alcuni tipi di file sono caricati più frequentemente, setta un tempo di scadenza più breve. Consiglio di non settare tempi inferiori a 1 mese o tempi superiori a 1 anno.

Ottimizza le immagini

Comprimere le immagini può far risparmiare alcuni byte di dati e quindi velocizzare il caricamento delle pagine web. Aprimo le immagini con un programma di editing e compriamole senza ovviamente perdere troppa qualità. Con le immagini JPG si può ovviamente utilizzare un livello di compressione del 60-65%, con le immagini png si può lavorare con i colori. E’ anche molto importante utilizzare immagini della stessa dimensione che viene utilizzata nella pagina web, indicando nel tag html sia la larghezza che l’altezza.

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

Questo alert ci informa sul fatto che alcuni file bloccano la visualizzazione dei contenuti in quanto si deve attendere il caricamento degli stessi. Above the fold è la parte che l’utente visualizza subito, senza dover scrollare verso il basso. Una soluzione potrebbe essere quella di spostare tutti i file di blocco nella parte bassa del sito, il footer, oppure caricare i file in maniera asincrona, in modo da non bloccare appunto il caricamento della pagina e mostrare subito i contenuti. In alternativa, alcuni file js possono essere inseriti inline nel codice html, facendo attenzione a non appesantire troppo la pagina utilizzando quindi soltanto poche linee di codice.

Dai la priorità ai contenuti visibili

Questo fa riferimento al punto sopra in cui si parla dei contenuti above the fold. Ottimizzando la posizione dei file di blocco si risolve anche questo problema.

Minimizza JavaScript

Minimizzare un file javascript vuol dire eliminare qualsiasi indendazione di codice e quindi anche gli spazi. In questo modo si riduce di parecchio la dimensione del file js. Ai browser non interessa se il tuo codice è ben indendato o scritto tutto in un’unica linea di codice. Minimizzare i file js ci consente di recuperare diversi byte e quindi favorire la velocizzazione delle pagine web. Possiamo usare questo tool per minimizzare file javascript.

Minimizza HTML

Allo stesso modo possiamo anche comprimere le pagine HTML e risparmiare byte per velocizzare il caricamento delle pagine web. Possiamo usare questo tool. Ovviamente avere un file html compresso crea sicuramente difficoltà nel fare le modifiche.

Minimizza CSS

Stesso discorso per i file CSS. Possiamo usare questo tool.

Abilita la compressione

Abilitare la compressione GZIP delle pagine ha dei grandissimi vantaggi in termini di velocità. Ci consente di risparmiare tantissima banda e quindi gli utenti da mobile ci ringrazieranno sicuramente. Un altro fondamentale vantaggio è che velocizza il processo di lettura delle pagine da parte del browser che ci fornisce prima i risultati della lettura. Questo mix migliora la UX cioè la User Experience. Gzip è un metodo di compressione che riduce i tempi di risposta di circa il 70%. Sempre in un server linux, aprimo il file .htaccess ed inseriamo le seguenti direttive:


AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE image/jpg
AddOutputFilterByType DEFLATE image/jpeg
AddOutputFilterByType DEFLATE image/gif
AddOutputFilterByType DEFLATE image/png
AddType image/svg+xml .svg
AddOutputFilterByType DEFLATE image/svg+xml

Queste operazioni possono essere fatte su qualsiasi sito web, indipendentemente dalla piattaforma o CMS utilizzato. Chiaramente devi conoscere bene le direttive htaccess e magari codice HTML, CSS e javascript. Non amo utilizzare plugin wordpress che appesantiscono ulteriormente le pagine. Se proprio dovete perchè non siete in grado di sporcarvi le mani con il codice o perchè non avete accessi ftp, vi consiglio di utilizzare questi plugin.

  • Autoptimize che comprime e concatena i file js, css e html
  • W3 Total Cache per il caching delle pagine, del database
  • WP-DBmanager per ottimizzare, pulire e fare backup del database

Ed ecco a voi il risultato delle ottimizzazioni. Google sarà sicuramente molto contento 🙂
sito web ottimizzato per Google PageSpeed

Sono Danilo Vaccalluzzo, vivo e lavoro a Bologna dove mi occupo principalmente di realizzazione siti web, web marketing, SEO Strategies, per privati ed aziende.

danilotrix – who has written posts on Realizzazione siti web, software gestionali, SEO.


Categories

Lorenzo
ciao, la tua guida è ottima ma ho due problemi: 1) ho minimizzato quasi tutti i file javascript del sito con quel tool ma mi dice ancora di minimizzare javascript.. 2) come inserisco quelle stringhe su .htaccess? se le aggiungo e apro il sito da errore 500 errore interno al server. ho inserito le stringhe per la compressione sotto rewrite, ovviamente tra e tutto ok, ma quando inserisco quelle per la cache sul browser mi da errore..il file .htaccess è codificato us-ascii, mentre se inserisco le stringhe per la cache la codifica diventa utf-8 perchè c'è un carattere utf-8..può essere quello il problema? e poi un altro problema..non riesco a capire come eliiminare JS e CSS che bloccano la visualizzazione nei contenuti above-the-fold..potresti aiutarmi? grazie in anticipo
adsshock.com
->

ExpiresActive On
ExpiresByType image/jpg “access plus 1 year”
ExpiresByType image/jpeg “access plus 1 year”
ExpiresByType image/gif “access plus 1 year”
ExpiresByType image/png “access plus 1 year”
ExpiresByType text/css “access plus 1 month”
ExpiresByType application/pdf “access plus 1 month”
ExpiresByType text/x-javascript “access plus 1 month”
ExpiresByType application/x-shockwave-flash “access plus 1 month”
ExpiresByType image/x-icon “access plus 1 year”
ExpiresDefault “access plus 2 days”
->

->

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE image/jpg
AddOutputFilterByType DEFLATE image/jpeg
AddOutputFilterByType DEFLATE image/gif
AddOutputFilterByType DEFLATE image/png
AddType image/svg+xml .svg
AddOutputFilterByType DEFLATE image/svg+xml
->
Domenico Biancardi
Ho l'impressione che sia praticamente impossibile ottenere il 100% con un sito in produzione. Ho visto che anche la tua home riesce ad ottenere 84% sul desktop. Comunque grazie per i consigli proverò a metterli in pratica.
Niko
Ciao, per chi dovesse ricevere un 500 internal server error con il codice del caching, è dovuto all'utilizzo di un carattere diverso da " (viene utilizzato ” e “) Questo codice in .htaccess funzionerà benissimo ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 2 days"

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *