Il tuo sito web è lento? Vuoi evitare la fuga degli utenti che attendono il caricamento dei contenuti? Vuoi rendere più fruibile la lettura dei contenuti ed altre azioni che si possono compiere all’interno del tuo spazio web? In questo articolo ti darò qualche consiglio per velocizzare il tuo sito internet in poche semplici mosse.

La prima mossa da fare come personal trainer del tuo sito è individuare cosa lo fa “ingrassare”, così da poter creare un piano alimentare completo per renderlo più leggero e veloce.

page speed in attesa di effettuare l'analisiGli strumenti che il web ci mette a disposizione per questo genere di attività sono moltissimi, il primo fra tutti che è quello che utilizzo anche io per i miei lavori è Page Speed di Google, integrato di recente anche in Google Analytics è possibile integrarlo anche nella console del proprio browser (Chrome, Firefox). In alternativa allo strumento messo a disposizione da Big G, possiamo utilizzare pingdom, strumento molto interessante che non ha niente di diverso da Page Speed, a parte l’integrazione con la console.

Una volta effettuata l’analisi, avrai a disposizione tutte le informazioni che riguardano il tuo sito, il perché è lento e il modo in cui risolvere le problematiche.

Gli errori più comuni sono:

  • Mancata ottimizzazione delle immagini
  • Mancata minimizzazione dei file HTML, CSS, JS
  • Mancanza di chiamate asincrone ai file javascript non indispensabili
  • Ordine errato di stili e script
  • Compressione non abilitata

Ora, affrontiamo passo passo l’ottimizzazione dei punti sopra elencati, così da rendere il tuo sito veloce e piacevole per l’utente finale e anche per te stesso.

Ottimizzazione delle immagini

Le immagini sono il più delle volte lo strumento fondamentale per stampare nella mente dell’utente ciò che stiamo scrivendo, se però sono impiegate male, sono solamente una pesante zavorra da affibbiare al tuo sito web.

dimostrazione del funzionamento di JPEGmini

Per ottimizzarle al meglio le proprie immagini, bisogna alleggerirle il più possibile mantenendo la qualità, come fare? Se non sei esperto di photoshop, dovrai forzatamente ripiegare sugli strumenti offerti dal generoso web, con la quale puoi cavartela benissimo, il migliore fra tutti, il quale mi ha salvato la vita più di una volta (in assenza di photoshop), è JPEGmini

Come potete vedere dalla dimostrazione sopra, l’ottimizzazione elevata applicata da JPEGmini non intacca la qualità e offre immagini 4 / 5 volte più leggere, una volta ottimizzate le immagini, potrete dire addio al lungo caricamento delle immagini.

Minimizzare i file HTML, CSS e Javascript

esempio di codice indentatoQuesta tecnica di alleggerimento ha i suoi vantaggi e i suoi svantaggi, dato che alleggerirà sensibilmente la velocità di caricamento del tuo sito, ma distruggerà il tuo minuzioso lavoro d’indentazione, riducendo il tuo codice ad un ammasso informe di righe e caratteri.
Il browser mentre elabora il contenuto del file, tralascia l’indentazione, ma gli spazi rendono il file più pesante e di conseguenza verrà impiegato più tempo per elaborarlo, per mantenere la leggibilità del codice e diminuire il tempo di caricamento, la prima cosa da fare, e la più ovvia, è quella di salvarti in locale una copia sempre aggiornata dei file che andrai a minimizzare, per comprimere puoi utilizzare HTML Compressor, un validissimo strumento con la quale puoi minimizzare i file HTML, CSS e JS senza alcun problema.

Utilizzare chiamate asincrone

Durante il caricamento di una pagina i file javascript tendono ad appesantire il procedimento, dato che il browser li esegue completamente prima di passare alla riga successiva di codice, come puoi bypassare questa procedura?

Aggiungendo l’attributo async alle chiamate javascript presenti nel vostro file; così facendo il browser caricherà parallelamente più elementi diminuendo sensibilmente il tempo di caricamento delle pagine.

N.B. con l’impiego di questo attributo è difficile capire la logica con cui verranno caricati gli script, siate prudenti

Il giusto ordine tra stili e script

Come accennato nel paragrafo precedente, l’ordine con cui si richiamano i fogli di stile o script è molto importante, quindi per poter snellire il caricamento della pagina, bisogna mettere prima i fogli di stile e gli script, se necessari, prima del tag </head> oppure ancora meglio prima del tag </body>.

Attivate il caching e la compressione (SERVER LINUX)

Chiedo scusa a te che mi stai leggendo e che usi un server windows, ma sto parlando del file .htaccess.

Il file in questione può darci un immenso aiuto, grazie al quale possiamo abilitare il caching e la compressione.

Una volta trovato il file, solitamente nella root, apritelo e aggiungete queste righe di codice con le quali attiverete il caching dei file:

Proseguendo andando semplicemente a capo inserite le istruzioni legate alla compressione:

 

Attenzione: Il metodo deflate viene utilizzato nelle versioni 2.x di apache, in quelle prima bisogna utilizzare il metodo gzip.

Conclusioni

In questo articolo ho riportato alcune delle tantissime modalità di alleggerimento del proprio sito web.
Tu cosa fai per velocizzare il tuo sito web?