Nell’articolo precedente abbiamo parlato su come Google utilizza Insights, oggi invece vediamo alcune raccomandazioni di Google PageSpeed Insights.
1. Elimina le risorse di blocco della visualizzazione
Una delle raccomandazioni di Google PageSpeed Insights è quella di eliminare le risorse che bloccano la visualizzazione: ossia JavaScript e CSS che impediscono il caricamento rapido della pagina in tempi utili e soprattutto ragionevoli.
2. Ridurre al minimo la profondità delle richieste
Alcuni elementi devono essere caricati completamente prima che la vostra pagina diventi visibile, ma se non ottimizziamo il caricamento delle risorse la nostra catena di richieste risulterà complessa e molto lenta, tutto a discapito del nostro visitatore.
3. Numero ridotto di richieste e playload di rete piccoli
Più richieste i browser devono fare per caricare le vostre pagine, e maggiori sono le risorse che il vostro server restituisce in risposta, più tempo impiega il vostro sito web a caricare.
NB: Riduci al Minimo la Profondità delle Richieste Fondamentali, non si traduce in un “superato” o “fallito”.
4. Minimizza CSS e JS – Rimozione di CSS Inutilizzato
Minimizzare il vostro CSS significa condensare i vostri file eliminando caratteri, spazi e duplicazioni non necessarie.
5. Usa immagini di dimensioni adeguate e soprattutto immagini in formati più recenti
Il loro corretto dimensionamento permette di ridurre i tempi di caricamento.
Si consiglia l’utilizzo di immagini nel formato webp, le immagini trattare risulteranno estremamente compresse e soprattutto leggere.
6. Rimanda immagini fuori schermo
Ossia il browser invece di caricare ogni immagine di una pagina prima di visualizzare il contenuto che la precede, caricherà solo le immagini immediatamente visibili, caricando in un secondo momento le immagini trattate con !!!!lazy-load!!!!
7. Assicurati che il testo rimanga visibile durante il caricamento dei caratteri Web
Google consiglia di risolvere questo problema applicando la direttiva swap della Font Display API nel vostro stile @font-face.
Per farlo, accedete al vostro foglio di stile (style.css) e aggiungete quanto segue dopo l’attributo src sotto @font-face: font-display: swap.
8. Attiva la compressione del testo
È possibile comprimere il testo manualmente attraverso la modifica del vostro file .htaccess.
<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE application/json
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
</IfModule>
In ultimo ma non per ordine di importanza: Pubblica le Risorse Statiche con Criteri della Cache Efficaci
Nella versione 5, è etichettato come Pubblica le risorse statiche con criteri della cache efficaci.
È possibile ottimizzare il periodo di scadenza della cache utilizzando le intestazioni Cache-Control e Expires.
Enginx
location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 30d;
add_header Cache-Control "public, no-transform";
}
Apache
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">Header set Cache-Control "max-age=84600, public"
</filesMatch>