Google Pagespeed Insights è un servizio gratuito offerto da Google utile a comprendere e dove e come ottimizzare il tuo sito per ridurne i tempi di caricamento.
ATTENZIONE:
PageSpeed non calcola il PageRank, PageSpeed fornisce informazioni relative alla velocità di caricamento del sito nonché all’esperienza utente per la navigazione da mobile.
Cominciamo sottoponendo il sito a Pagespeed Insihts:
developers.google.com/speed/pagespeed/insights
Il servizio valuterà il sito sia per gli utenti mobile che desktop e darà un punteggio da 0 a 100 evidenziando i problemi e proponendo le soluzioni da adottare.
Per comodità suggerisco di installare e configurare il plugin per wordpress di MAtt Keys, i dettagli8 sulle funzionalità, installazione e configurazione li trovate alla pagina ufficiale del plugin: https://it.wordpress.org/plugins/google-pagespeed-insights/ così da avere i dati del servizio offerto da big G direttamente nelle vostre pagine riducendo così i tempi di ottimizzazione
Le ottimizzazioni più comuni riguardano:
- Caching del browser.
- Tempo di risposta del server.
- JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold.
- Minimizza HTML , JavaScript e CSS.
- Compressione.
- Priorità ai contenuti visibili.
- Reindirizzamenti delle pagine di destinazione.
- Ottimizzazione immagini.
Abilitiamo la compressione GZip
LA compressione HTTP è una delle prime e più importanti raccomandazione di Google PageSpeed. Grazie alla compressione Gzip si possono ridurre i tempi di trasferimento delle risorse fino al 90%.
Per chi come me utilizza Plesk per gestire i siti nei Web Server il giochino è semplicissimo: basterà andare nel menu
Websites & Domains>Apache & nginx Settings.
Dall’elenco dei moduli va attivato, qualora non lo fosse mod_deflate e filter. Se invece non disponete di Plesk e di default il modulo non è attivo, per gli utenti Apache è sufficiente aggiungere le seguenti direttive al file .htaccess
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/opentype
# For Older Browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Gli utenti NGINX dovranno invece aggiungere a nginx.conf
gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;
Ottimizzazione Above the Fold
Questa è una delle primissime ottimizzazioni proposte da PageSpeed è
elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold .
Con Above the Fold si indende quella parte della pagina che viene visualizzata senza che l’utente abbia la necessità di muovere la barra di scorrimento del browser.
Quando un browser richiama una pagina JavaScript e CSS possona impedire la visualizzazione della pagina fino a quando non sono disponibili per il browser così da evitare rendering di solo html, quello che viene definito flash of unstyled content (FOUC). Come è facile immaginare spesso non sarà possibile rispettare questa richiesta al 100%
Tipicamente su WordPress troverete un plugin per ogni problema, perciò posso anticiparvi che si, un plugin esiste ma prima di tutto dobbiamo capire alcuni concetti così da aver ben chiaro cosa stiamo parlando prima di prendere iniziative.
Iniziamo occupandoci dei Javascript spostando fuori dal critical rendering path (percorso di rendering critico) i file non neccessari alla visualizzazione above the fold e lo faremo applicando l’attributo defer o async (introdotti con html5) agli elementi script che invocano le risorse JavaScript.
- async permette al browser di scaricare le risorse senza interferire con il pharsing html fino a che la risosrsa non sarà diponibile.
- defer interrompe il download della risorsa fino al completamento del parsing html per scaricare ed eseguire nell’ordine in cui compaiono nella pagina gli elementi javascipt.
Nel caso di async è necessario prestare attenzione alle risorse che utilizzano jQuery per evitare che queste vengano richiamate prima che jquery.js sia stato aggiunto al documento.
Adesso che conosciamo il significato dei tag async e defer possiamo procedere all’ottimizzazione.
I plugin che mi sento di consigliare sono: Async JavaScript o W3 Total Cache, in ogni caso uno non esclude l’altro perchè Async JavaScript garantisce la compatibilità W3 Total Cache, Autoptimize ed altri plugin utili all’ottimizzazione delle pagine del nostro sito WordPress.
Passiamo ora alla compressione dei file e direttive css e js. A questo scopo esistono numerosi plugin, di nuovo W3 Total Cache ma per chi non vuole avventurarsi in un plugin così complesso.
Mi sento di darvi un ulteriore consiglio: testate separatamente ogni plugin che andate ad installare per accertarvi che non si creino conflitti perchè spesos i plugin atti all’ottimizzazione delle pagine utilizzano le stesse risorse.
Per oggi è tutto ma non finisce qui, c’è ancora molto da dire, a breve la secoda parte su come ottimizzare il vostro sito WordPress per Google Pagespeed Insights