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>