<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=228239434375765&amp;ev=PageView&amp;noscript=1">

16 OTTOBRE, 2017   |   Lettura 9 min

Come velocizzare il caricamento di un sito web

author

come-velocizzare-il-caricamento-di-un-sito-web.jpg

Immagina di fare una ricerca su Google riguardante un prodotto o un servizio che desideri tanto. Clicca sul risultato, vai sul sito e questo non si carica velocemente. Aspetti con pazienza che il browser inizi a mostrare la home page, ma niente, è troppo lenta. Colto da frustrazione, chiudi la finestra del browser e ricominci da capo. È quello che succede sempre ai proprietari dei siti lenti.

Un sito lento riceve meno visite e una conversione inferiore del 7% rispetto a un sito fotocopia più veloce da scaricare. Perché dunque è importante avere un sito veloce, che si carica in poche frazioni di centesimi? Be’, le ragioni sono diverse:

  • Un sito più veloce, come detto, genera meno frustrazione nell’utente e produce più visite
  • Un sito più veloce aumenta le conversioni nelle vendite e nelle richieste di contatto
  • Un sito più veloce si posiziona meglio su Google
  • Si legge meglio da mobile quando si usa la rete dati 3G e 4G anziché il Wi-Fi

Un secondo in più di lentezza costa in termini di performance e di guadagni. Il sito di Walmart ha tratto un aumento del 2% di conversioni in più per ogni secondo guadagnato. Amazon ha dichiarato di aver guadagnato l’1% in più per ogni secondo di miglioramento nella velocità del suo sito. Se lo dicono loro c’è da crederci.

Un altro studio ha dimostrato che circa la metà degli utenti si aspetta che un sito si carichi in due secondi o meno. 4 utenti su 10 abbandonano la pagina prima che si apra, se passano più di tre secondi. Metà degli utenti ammette di scegliere un sito tra i preferiti ponendo la sua velocità di caricamento come un elemento determinante per la fiducia.

Nonostante queste raccomandazioni, questi studi e queste dichiarazioni, i siti sembrano sempre più lenti. Il tutto di fronte a una velocità di navigazione che è sensibilmente aumentata negli ultimi dieci anni.

La velocità di scaricamento del sito come fattore di posizionamento

La scorsa primavera, il solito Gary Illies di Google ha annunciato alla platea del SMX che Google, introducendo l’aggiornamento Google Mobile First Index (che dà precedenza ai contenuti ottimizzati per il mobile) che la velocità di caricamento di un sito è compresa come fattore di posizionamento.

Che questo fosse nell’aria lo si era capito da anni, interpretando la tendenza del mercato delle ricerche, da anni orientato verso una preponderanza dell’utilizzo dei dispositivi portatili. Oggi la metà delle persone che effettuano una ricerca su Google, lo fanno a partire da uno smartphone o da un tablet.

Chi possiede un sito, insomma, deve assolutamente velocizzarlo, rendendolo fruibile per tutti quei lettori che si collegano da mobile. Chi offre una navigazione povera, non completa, né veloce, è destinato a perdere posizioni su Google e quindi lettori.

Come velocizzare il sito per ottenere più visitatori

Questo articolo intende essere più utile che lungo, proponendo una mini guida su come velocizzare il proprio sito. Applicando in breve questi concetti, che possono risultare avanzati e ostici per un profano, si ottengono dei risultati tangibili nella semplice navigazione.

Primo passo: misurare la velocità del sito

Per sapere quanto il nostro sito è veloce non basta usarlo da casa o dallo smartphone. La velocità è soggettiva, dipende dalla potenza del dispositivo, del server in quell’istante, dalla qualità della connessione. Detto ciò ci sono dei criteri oggettivi con cui misurarla, in modo da avere un riferimento prima di compiere una qualsiasi operazione di velocizzazione.

GT Metrix: strumento online tra i più apprezzati, immediato, facile da intuire, fornisce immediatamente un quadro della velocità del sito, indicando i punti critici. Un aspetto molto apprezzato è che propone immediatamente delle soluzioni (più sotto indicherò come metterle in pratica). GT Metrix scannerizza il dominio dando una visione complessiva, tradotta anche in un PDF scaricabile con tutti i problemi e i livelli di allerta.

GOOGLE PageSpeed Insights: tool nativo di Google che consente di calcolare il punteggio di velocità, abbastanza simile a GT Metrix, ma più semplice e intuitivo. A differenza dello strumento precedente, calcola la performance su mobile e su desktop, indirizzando al meglio il lavoro di velocizzazione sull’una o l’altra versione.

Come avrai notato le soluzioni proposte sono simili. La domanda che ci dobbiamo porre è la seguente. Considerando la grafica del sito, quanti di questi suggerimenti sono fattibili? È possibile raggiungere il punteggio di 100 in PageSpeed e GT Metrix?

La risposta è sincera: il punteggio di 100 è irraggiungibile nella maggior parte dei casi, perché spesso si ricorre a fonti esterne per l’attivazione di alcuni servizi. Ad esempio, se inserisco nel sito i tasti di condivisione sui social, dovrò fare riferimento a delle icone che vengono ospitate su server esterni, il che produce una “chiamata” che genera una latenza. Però si può raggiungere un punteggio prossimo a 90, ottenendo ottimi risultati, tangibili dal punto di vista della navigazione. Ecco dunque come fare.

Minimizzare le richieste http

Una pagina web si compone di diversi elementi, da caricare in tempi differenti: immagini, script, fogli di stile css, risorse esterne. Per caricare ciascuno di questi elementi viene fatta una richiesta http. Più ce ne sono, maggiore è il tempo di caricamento e di visualizzazione completa della pagina. Il miglior modo per visualizzare la pagina nel più breve tempo possibile è quella di semplificare al massimo la grafica.

  • Usare i fogli di stile
  • Combinare più fogli CSS in uno solo
  • Ridurre script e farli caricare nel footer, evitando la latenza nella sezione head

Con Wordpress si può usare il plugin premium, che vale i soldi spesi, WP Rocket, che sposta molti degli script nel footer.

Ridurre le risposte del server

L’obiettivo che abbiamo è quello di velocizzare al massimo il sito, scendendo sicuramente sotto la soglia critica dei 3 secondi.  Per farlo dobbiamo essere certi di aver ospitato il sito su un server veloce, senza limitazioni di banda. Inutile prendere un hosting al risparmio, low cost, se poi non è in grado di gestire il lavoro richiesto.

Abilitare la compressione

Se vogliamo posizionare il sito su Google o fare inbound marketing sfruttando i contenuti, grandi contenuti, bisogna produrre delle pagine molto ricche di testo o di immagini. Il peso di queste inevitabilmente si alza, elevando anche i tempi di risposta.

Attivando la compressione attraverso una versione in ZIP (archivio compresso) si riesce a ridurre i tempi di risposta http. Fortunatamente per mettere in pratica la compressione possiamo utilizzare un tool: GZIP. Quasi tutti i server consentono di attivare la compressione GZIP.

Sui siti ospitati su server IIS Windows è sufficiente attivare l’opzione da IIS (il server), ma bisogna avere gli accessi. La maggior parte dei siti è ospitata su server Linux, come quelli realizzati in Wordpress, Prestashop, Joomla. Su server APACHE basati su Linux è sufficiente apportare delle modifiche al file .htaccess, collegandosi via FTP (sempre fare una copia di backup) aggiungendo quanto segue.

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

In Wordpress lo stesso risultato può essere ottenuto sempre lavorando sul file .htaccess, attivando la compressione con mod_deflate anziché mod_gzip.

Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x–javascript
AddType x–font/otf .otf
AddType x–font/ttf .ttf
AddType x–font/eot .eot
AddType x–font/woff .woff
AddType image/x–icon .ico
AddType image/png .png

Oppure in alternativa cercando un plugin che faccia il lavoro (spesso inserito all’interno di più ampi plugin di cache e compressione): w3 Total Cache, Wp Super Cache. Nel primo è indicato alla voce “Browser Cache” (Enable http compression), nel secondo alla voce “Miscellaneous”, “Compress pages so they’re serve more quickly to visitors”. Un plugin che lavora solo sulla compressione è https://it.wordpress.org/plugins/gzip-ninja-speed-compression/.

NOTA BENE: prima di utilizzare questi codici, assicurati di averli incollati prima su un foglio di blocco Note di Windows o sul TextEdit del Mac, usando la versione "converti in formato testo". 

Abilitare la cache del browser (browser caching)

Quando si visita un sito, gli elementi che troviamo nella pagina vengono scaricati nel nostro disco fisso, sotto forma di file temporanei. In questo modo, alla visita successiva, il browser caricherà la versione del file trovata nel computer anziché quello trovato online, riducendo sensibilmente i tempi di caricamento.

Se il server prende gli elementi da caricare sulla cache la velocità si riduce drasticamente, anche della metà. Gli utenti alla prima visita ovviamente non troveranno una versione salvata, ma per tutti quelli che tornano più di una volta, per un motivo o per l’altro, potrai riservare una versione nettamente più veloce.

Il punto è che sono disponibili per la cache non solo le immagini, ma soprattutto gli script e i fogli di stile (CSS), i PDF, i video, file multimediali. Per tutti questi può essere stabilito un termine di scadenza per la cache, in modo da ripulire la vecchia versione, con quella che abbiamo eventualmente caricato.

Questo sistema è perfetto per quei siti che archiviano molti dati e quindi storicizzano intere sezioni o non fanno cambiamenti drastici dal punto di vista grafico lungo intervalli di tempo inferiori ai sei mesi.

Sempre via .htaccess possiamo inserire questo snippet di codice:

## EXPIRES CACHING ##
<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>
## EXPIRES CACHING ##

Questo codice utilizza il metodo EXPIRES, ma può essere specificata la scadenza tramite il metodo Cache-Control. Usarli entrambi è ridondante. Cache-control ci assicura maggior controllo su tutta la cache, ottenendo forse un miglior risultato.

Utilizzarlo significa inserire un limite nel quale il file dovrebbe essere servito via cache e il mondo in cui questo è servito. La max-age che definiamo rappresenta proprio questo periodo.

# Un mese per tutti gli elementi statici
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2628000, public"
</filesMatch>

La max-age è espressa in secondi: 2628000 nell’arco di un mese.

Posso settare tempi differenti:

  • Un minuto: max-age=60
  • Un’ora: max-age=3600
  • Un giorno: max-age=86400
  • Una settimana: max-age=604800
  • Un mese: max-age=2628000
  • Un anno: max-age=31536000

Combinando perciò i codici (sempre in htaccess) per due o più elementi di diverso tipo:

# Un anno per I file immagine
<filesMatch ".(jpg|jpeg|png|gif|ico)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>

# Un mese per css e js
<filesMatch ".(css|js)$">
Header set Cache-Control "max-age=2628000, public"
</filesMatch>

Con Wordpress il lavoro manuale viene sostituito da plugin piuttosto impattanti, che riscrivono il file htaccess, adattandosi tanto al server Apache, quanto al Nginx.

NOTA BENE: prima di incollare questi codici nel file .htaccess, assicurati di aver fatto un backup del file, e di averli passati nel blocco note di Windows o nel TextEdit del Mac, nella modalità "converti in formato solo testo".

Minimizzare le risorse

Un altro metodo per velocizzare il sito, seguendo i consigli forniti da Google SpeedTest Insights e GT Metrix, è quello di minimizzare al massimo gli script Java e i CSS. Questo perché essi hanno molti spazi bianchi e commenti che ne fanno aumentare la taglia.

Sulla stessa lunghezza d’onda può essere minimizzato il codice HTML, usando l’estensione di Chrome del PageSpeed Insights, che restituisce una versione html ripulita di codice in eccesso.

Per minimizzare i fogli di stile utilizzare servizi online come http://www.phpied.com/cssmin-js/ o http://developer.yahoo.com/yui/compressor/ - per minimizzare i file JavaScript invece si può usare https://codebeautify.org/javaviewer in alternativa al precedente servizio.

Ottimizzare le immagini

Immagini troppo pesanti possono comportare un eccessivo rallentamento del sito. Dobbiamo fare attenzione al “peso” delle immagini, nonché alle misure. Se carichiamo un’immagine troppo grande, oltre alla pesantezza in MB, influirà anche la misura.

Se è troppo larga e troppo alta, il browser dovrà per forza ridimensionarla. Questo ridimensionamento fa perdere tempo. Se dobbiamo visualizzare un’immagine 800x600, non carichiamone una di misura 2400x1800 settando poi le misure di visualizzazione. Molto meglio ridimensionarla PRIMA del caricamento.

Per alleggerirla si possono usare programmi come Photoshop o Gimp, con l’opzione “Salva per Web” o tool online come http://compressimage.toolur.com/ - ricordando che Google Insights fornice già una versione “compressa” da scaricare e ricaricare sul sito.

Per le immagini preferire sempre il formato JPEG, lasciando il PNG al logo. Usare GIF solo per creare delle grafiche o animare delle immagini. Mai usare file in formato TIFF e BMP, che sono o troppo pesanti o troppo sgranati.

Wordpress ha un suo specifico plugin gratuito, che fa questo lavoro in modo eccellente: https://wordpress.org/plugins/wp-smushit/.

Consigli finali per velocizzare il sito

Se stai usando Wordpress affidati ai plugin più popolari, ma attenzione: i plugin sono un’arma a doppio taglio, caricarne troppi non fa altro che rallentare il caricamento delle pagine.

Disattiva e cancella tutti quelli che a vario titolo non usi o sono inutili e ridondanti per l’utente. Se vedi dei problemi di rallentamento, prova a disattivarne qualcuno, identificando la causa del rallentamento.

Evitare anche troppi redirect. Se stai ristrutturando il sito e devi spostare vecchi URL su nuovi, limitati alle pagine con maggior traffico. Non usare loop di redirect e indirizzamenti intermedi.

Fai sempre in modo che la versione mobile sia raggiungibile e leggibile a una velocità più alta di quella del desktop o quantomeno equivalente.

Se sei pratico di inglese puoi leggere la completa guida riepilogativa di Google https://developers.google.com/speed/.


 
Sito troppo lento? Ecco come renderlo più intelligente!


Ti è piaciuto l'articolo? Non dimenticare di condividerlo


Oppure lascia un commento


Pepyta
Dove siamo
Lugano

Ander Group SA
Via Campagna 13
CH-6982 Agno - Lugano
+41 91 966 99 66

Zurigo

Ander Group AG
Beethovenstrasse 5
CH-8002 Zurich
+41 44 493 94 94

Losanna

Ander Group SA
Av. du Theatre 7
CH-1002 Lausanne
+41 21 944 00 44

Partner
Social