HostingServerTutorial

PageSpeed di Google: controlla quanto è veloce il tuo sito web

Tra gli strumenti web che aiutano a monitorare un sito web, Google mette a disposizione il tool PageSpeed Insights. Strumento che misura il rendimento di una pagina web sia per i dispositivi mobile che desktop. Questo tool gratuito permette di analizzare il proprio sito web, individuando le problematiche e fornendo alcune indicazioni su come ottimizzare i tempi di caricamento di una pagina web.

PageSpeed assegna un punteggio che va da 0 a 100 punti, ovviamente un punteggio alto indica che il proprio sito web è ottimizzato. PageSpeed viene aggiornato di continuo quindi i parametri per assegnare il punteggio  vengono modificati, ma si può affermare che con un punteggio di 85 punti si può avere un buon rendimento.

CERCHIAMO DI CAPIRE L’IMPORTANZA DI PAGESPEED

La velocità nel caricamento di una pagina web è da sempre stato un problema che molti webmaster hanno dovuto affrontare, velocità molte volte troppo lenta causata da immagini troppo grandi e non ottimizzate o da codice “above the fold”.  La lentezza del caricamento di una pagina web può causare un prematuro abbandono da parte di un visitatore o se consideriamo un utente mobile che non ha a disposizione una connessione velocissima, può causare problemi nel trasferimento dei dati. Oltre a questi vantaggi di usabilità del sito web, Google “premia ” le pagina web con un elevato punteggio di PageSpeed.

Per testare la velocità di una pagina web è sufficiente andare a questo link, inserire l’url della propria pagina web e cliccare sul pulsante “Analizza”.

google-pagespeed

E’ possibile inoltre consultare i punteggi di tutte le pagine web presenti sul proprio sito su Google Analytics alla sezione Comportamento -> Velocità sito -> Suggerimenti  velocità.

google-pagespeed-guida

C’è da ricordare che Page Speed Insights non considera la connessione di rete, ma unicamente gli aspetti  del rendimento della pagina web come la configurazione del server, la struttura HTML della pagina, file Javascript e CSS.

Dopo aver effettuato l’analisi della pagina web, quando cioè all’assegnazione di un punteggio, in caso di problematiche, vengono indicati alcuni suggerimenti per poter migliorare il punteggio, e alcune linee guide su come risolvere tali problemi. Proviamo ad esaminarne qualcuno.

Ottimizza le immagini: La corretta formattazione e compressione delle immagini può far risparmiare parecchi byte di dati.

Questo messaggio compare quando le immagini del proprio sito web non sono compresse o non sono ridimensionate, cioè un’immagine di 200px viene visualizzata a 150px tramite CSS, il suggerimento è di ridimensionare l’immagine per come deve essere visualizzata, e comprimere le immagini utilizzando gli strumenti come jpegtran e OptiPNG.

Minimizza Javascript – Minimizza HTML – Minimizza CSS: La compattazione del codice HTML e dell’eventuale codice JavaScript e CSS incorporato in esso contenuto può far risparmiare parecchi byte di dati e velocizzare i tempi di download e analisi.

La minimizzazione delle risorse è necessaria per l’eliminazione di byte superflui nel codice, dunque la compattazione delle risorse consente di ridurre i tempi di esecuzione, analisi e download della pagina web. Alcuni strumenti che eseguono tali minimizzazioni sono CSSMinifier e JavaScript Minifier che vi permetteranno di ottenere un codice compattato o di utilizzare le API a disposizione.

Riduci i tempi di risposta del server.

Il tempo di risposta del server indica il tempo richiesto per caricare il codice HTML necessario perché il server inizi a mostrare la pagina web. Se visualizziamo questo messaggio è possibile vuol dire che i tempi di risposta superano i 200ms, soglia limite nei parametri di Google PageSpeed Insights. Le cause di questa lentezza possono essere molteplici, a partire dalla propria applicazione web e la lentezza dell’esecuzione di query di database, o blocchi di CPU o di memoria. Un server performante non presenterà questo problema, se non per problemi di logica della propria pagina web.

Sfrutta il caching del browser: Se viene impostata una data di scadenza o un’età massima nelle intestazioni HTTP per le risorse statiche, il browser carica le risorse precedentemente scaricate dal disco locale invece che dalla rete.

L’implementazione di strumenti di cache devono essere applicate a tutte le risorse statiche del proprio sito web come file javascript, css, html, così come per i file multimediali inclusi immagini e file PDF. Il consiglio per impostare correttamente la cache è di configurare l’”Expires” al minimo di una settimana al massimo di un anno.  Se si utilizza come linguaggio il php è possibile configurare il proprio htaccess utilizzando il modulo mod_expires.c

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg “access 1 year”

ExpiresByType image/jpeg “access 1 year”

ExpiresByType image/gif “access 1 year”

ExpiresByType image/png “access 1 year”

ExpiresByType text/css “access 1 month”

ExpiresByType text/html “access 1 month”

ExpiresByType application/pdf “access 1 month”

ExpiresByType text/x-javascript “access 1 month”

ExpiresByType application/x-shockwave-flash “access 1 month”

ExpiresByType image/x-icon “access 1 year”

ExpiresDefault “access 1 month”

</IfModule>

Se invece utilizziamo IIS è possibile modificare il web.config della propria applicazione inserendo il seguente codice:

<system.webServer>

<caching>

<profiles>

<add extension=”.js” policy=”CacheUntilChange” kernelCachePolicy=”CacheUntilChange” location=”Any” />

<add extension=”.css” policy=”CacheUntilChange” kernelCachePolicy=”CacheUntilChange” location=”Any” />

<add extension=”.jpg” policy=”CacheUntilChange” kernelCachePolicy=”CacheUntilChange” location=”Any” />

<add extension=”.gif” policy=”CacheUntilChange” kernelCachePolicy=”CacheUntilChange” location=”Any” />

<add extension=”.png” policy=”CacheUntilChange” kernelCachePolicy=”CacheUntilChange” location=”Any” />

<add extension=”.bmp” policy=”CacheUntilChange” kernelCachePolicy=”CacheUntilChange” location=”Any” />

<add extension=”.ico” policy=”CacheUntilChange” kernelCachePolicy=”CacheUntilChange” location=”Any” />

</profiles>

</caching>

</system.webServer>

Abilita la compressione: La compressione delle risorse con gzip o deflate può ridurre il numero di byte inviati tramite la rete.

Una riduzione significativa delle dimensioni dei file presenti sul proprio sito web è la compressione tramite il formato gzip. I file così compressi riducono notevolmente  i tempi di download delle risorse. Per abilitare la compressione gzip sul proprio sito web scritto in php, è possibile modificare il file htaccess:

<IfModule mod_gzip.c>

mod_gzip_on       Yes

mod_gzip_dechunk  Yes

mod_gzip_item_include file      \.(html?|txt|css|js|php|pl)$

mod_gzip_item_include handler   ^cgi-script$

mod_gzip_item_include mime      ^text/.*

mod_gzip_item_include mime      ^application/x-javascript.*

mod_gzip_item_exclude mime      ^image/.*

mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

</IfModule>

<IfModule mod_deflate.c>

AddOutputFilterByType DEFLATE text/css application/x-javascript text/html text/richtext image/svg+xml image/jpg image/png image/gif text/plain text/xsd text/xsl text/xml image/x-icon

</IfModule>

Se invece utilizziamo applicazioni web scritte in asp.NET possiamo modificare il applicationHost.config aggiungendo il seguente codice:

<httpCompression

directory=”%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files”>

<scheme name=”gzip” dll=”%Windir%\system32\inetsrv\gzip.dll” />

<dynamicTypes>

<add mimeType=”text/*” enabled=”true” />

<add mimeType=”message/*” enabled=”true” />

<add mimeType=”application/javascript” enabled=”true” />

<add mimeType=”*/*” enabled=”false” />

</dynamicTypes>

<staticTypes>

<add mimeType=”text/*” enabled=”true” />

<add mimeType=”message/*” enabled=”true” />

<add mimeType=”application/javascript” enabled=”true” />

<add mimeType=”*/*” enabled=”false” />

</staticTypes>

</httpCompression>

Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold: Questo messaggio viene visualizzando quando per visualizzare il contenuto di una pagina web, è necessario caricare dei file CSS o JavaScript. Per quanto riguarda i file JavaScript è possibile inserire l’attributo async .

<script async  src=”file.js” />

Generalmente conviene spostare tutti i file JavaScript alla fine della pagina in modo da permettere il caricamento della pagina. E’ inoltre possibile incorporare le risorse di piccole dimensioni  sia CSS che JS direttamente nella pagina web.

Alcune soluzioni hosting che propone Keliweb come Hosting WordPress, Hosting Joomla e Hosting PrestaShop includono il modulo server side di Google PageSpeed, integrando totalmente tutte le ottimizzazioni del tuo sito web automaticamente.

Back to top button