Google PageSpeed Insights: 9 How to!!!

05 Feb 2020 | M.A.D.R.

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>

Conversione Array Multidimensionale a Array 2D (dot notation)

05 Feb 2020 | M.A.D.R.

Come ben sappiamo gli array multidimensionali hanno una filosofia di memorizzazione "Bellissima", flessibile e soprattutto di facile comprensione. I problemi nascono quando abbiamo molti nested child in posizioni scomode, infatti basti pensare l'...

Flat Database: Evoluzione per piccoli progetti

05 Feb 2020 | M.A.D.R.

Quante volte abbiamo avuto bisogno di un database per piccoli progetti, e nello spazio gratuito non disponiamo di un blasonato DBMS. Oggi vediamo insieme come sfruttare la potenzialità di un database su file, meglio conosciuto con il nome di Fla...

WordPress e Sicurezza

05 Feb 2020 | M.A.D.R.

Quando si tratta della sicurezza di WordPress, ci sono molte cose che potete fare per chiudere a chiave il vostro sito per impedire che hacker e vulnerabilità o il vostro blog. L’ultima cosa che vorreste che succedesse è svegliarvi una matti...

Google PageSpeed Insights: 9 How to!!!

05 Feb 2020 | M.A.D.R.

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 PageS...

Google PageSpeed Insights: Ottimizzazioni

05 Feb 2020 | M.A.D.R.

Google PageSpeed Insights&nbsp;è senza dubbio uno strumento utile per i webmaster, gli sviluppatori e i proprietari di siti di ogni tipo. Cos'è PageSpeed ? É uno strumento utilizzato per testare le prestazioni dei siti web basato su punteg...

Attacco DDoS: Perchè, Effetti e Come Proteggersi

05 Feb 2020 | M.A.D.R.

Un attacco DDoS è sorprendentemente facile da eseguire ed ogni anno il numero di attacchi è in costante crescita. Gli attacchi DDoS possono sembrare un inevitabile effetto collaterale della propria presenza online; più il vostro sito ha succe...

Backend: cos'è, a cosa serve e come si costruisce?

05 Feb 2020 | M.A.D.R.

Backend: cosa serve e come si costruisce. Sin dagli albori dello sviluppo web qualsiasi progetto si vedeva suddiviso in due porzioni: lato server e lato client. Il primo rappresentava l’insieme delle attività dell’applicazione che rimanev...

G Suite e il Tuo Business

05 Feb 2020 | M.A.D.R.

Un prodotto senza il quale non potremmo vivere è sicuramente G Suite! Per non parlare delle altre caratteristiche, come l’archiviazione su Google Drive e l’accesso a strumenti come Google Docs e Google Sheets. Oggi descriveremo dettagliat...

Soluzioni complete per ogni esigenza