Hai bisogno di assistenza per WordPress? WebHosting.it ti può aiutare.
In questo articolo si parlerà prettamente di ottimizzazzione e su come ottenere ottime performance sul tuo sito. Se il tuo obiettivo è quello di velocizzare il caricamento del tuo sito e delle tue pagine web, questa guida fa per te.
Il mio nome è Antonio Abate Chechile e mi occupo di Web Marketing per le PMI. Con questo articolo voglio aiutare imprenditori e professionisti che non hanno vaste conoscenze informatiche, ma che vogliono un sito più veloce.
Ti darò suggerimenti utili per migliorare la velocità del tuo sito e ti indicherò soluzioni per fornire un’esperienza piacevole ai tuoi visitatori.
Perché è importante avere un sito web più veloce?
Perchè se no lo fai perderai potenziali clienti e soldi.
Secondo Econsultancy, maggiori sono i tempi di attesa, più son le possibilità che gli utenti abbandonino il tuo sito per non farvi mai più ritorno.
Questo grafico è la prova del 9: i siti veloci effettuano maggiori conversioni.
Prova gratis e senza impegno uno dei nostri piani hosting per 14 giorni. Non è richiesto nessun dato di pagamento!
Prova gratis
Si può facilmente dedurre che il tempo di attesa incida particolarmente sulla permanenza dei visitatori, e delle conversioni. In effetti io sono il primo a cliccare sulla “X” quando il sito impiega troppo a caricarsi. Semplicemente mi annoio, oppure vado di fretta.
Ciò accade anche per i tuoi visitatori.
Se ti occupi di manutenzione caldaie, ha senso aspettare 6 secondi per mostrarmi la tua pagina contatti? Se devo richiedere un preventivo, ha senso aspettare affinchè la pagina si carichi? O è meglio proseguire con le mie ricerche e richiedere un servizio altrove?
Puoi anche dirmi “se vuoi, aspetti”, vero, ma il 90% non aspetterà.
E ciò è dimostrato dal grafico seguente. Mostra la relazione tra tempo (in secondi) e il numero di abbandoni.
Per questo motivo, ottimizzare un sito web serve in primis a fornire un’esperienza utente piacevole, e per fornire le informazioni con più rapidità ai tuoi potenziali clienti. Oltre i 2 secondi di attesa, le conversioni iniziano a diminuire.
Che tu abbia un sito aziendale, un e-commerce, una piattaforma web o un blog, non permettere ai tuoi visitatori di lasciare il tuo sito.
E tu? Riesci a battere i 2 secondi?
Se la tua risposta è NO, ho per te diverse tecniche per ottimizzare il tuo sito.
Il primo passo per ottimizzare il tuo sito è fare un salto a casa di Google ed usare il tool Google PageSpeed Insights.
A questo punto inserisci l’URL del tuo sito e clicca su Analizza.
Ma prima di continuare io ho da dirti un po’ di cose su PageSpeed. È bene ricordare che PageSpeed - così come altri tools - sono in grado di determinare solo le performance di quell’URL, e non dell’intero sito. Può capitare che una tua pagina sia più veloce di un’altra, che la homepage di example.com presenti meno errori ma stai attento perché i valori non si riferiscono a tutte le pagine del tuo sito.
Forse example.com è al top, ma può capitare che example.com/about sia una delle peggiori pagine esistenti sul web.
Il mio consiglio è quel di testare tutte le pagine del tuo sito, ma… che fare se le pagine sono 500?
"Sono troppe, ci metterei 1 anno intero per analizzarle ed ottimizzarle!“
Hai ragione, è disumano. Ma fin troppo comune.
Se ti ritrovi in questo caso, ti suggerisco di testare solo le pagine che ricevono più traffico, le pagine principali del tuo sito (pagina “chi siamo”, contatti, sezione blog, portfolio, ecc.), e le pagine di vendita e/o acquisizione contatti.
A questo punto, analizza gli URL da te scelti usando PageSpeed Insights e dai un’occhiata ai risultati.
Nota: nel mio caso utilizzero un sito preso a caso. Si tratta di un bar Neozelandese di Wellington, il cui URL è http://www.stjohnsbar.co.nz
Un tool che deve usare sempre un qualsiasi consulente è PageSpeed Insights. È un tool di Google, nato per fornire analisi su come ottimizzare i siti web e l’esperienza utente. Ho detto esperienza utente, ottimizzazione, non velocità.
PageSpeed Insights non misura la velocità del tuo sito, non fa nessuna menzione al tempo di caricamento. Bensì fornisce spunti ed identifica gli errori che incidono maggiormente (in negativo) sulla qualità del tuo sito.
Ti dirà molto su cosa migliorare, ma non accennerà alla “Velocità”.
Ti darà consigli sull’Above the Fold (la parte visibile senza fare lo scroll del mouse), sull’ottimizzazione delle risorse (css, js e immagini) ed alcuni consigli sull’Esperienza Utente (UX).
Non farti ingannare dal nome PageSpeed, perchè questo tool non mostra affatto come velocizzare il tuo sito. Anche se seguendo tutti i consigli di PageSpeed otterrai indirettamente un aumento della velocità del tuo sito, ciò non vuol dire che il tuo sito batterà i 2 secondi. Devi anche considerare che se il tuo sito fa uso di plugin e che richiedono risorse esterne, non potrai MAI avere un sito ottimizzato al 100%.
Ci sono altri fattori che incidono sul tempo di caricamento delle tue pagine, ma per ora, concentriamoci sull’ottimizzazione usando questo tool.
Quando analizzi il tuo sito, otterrai 2 sezioni: Desktop e Mobile. Il mio consiglio è di soffermarti particolarmente sull’ottimizzazione da mobile, dato che la maggior parte del traffico proviene da dispositivi come smartphone e tablet.
Io ho analizzato il sito http://www.stjohnsbar.co.nz/, e questo è il risultato da mobile [score 64/100]
E da PC [score 69/100]
Per il sito scelto da me, fornirò una soluzione per ogni problema rilevato da PageSpeed. Trattandosi di errori comuni, è molto probabile che anche tu abbia ottenuto uno score simile.
Gli errori critici sono quelli evidenziati in rosso da PageSpeed, quelli urgenti. Di solito in questa sezione compaiono tutti quegli errori che possono infastidire i tuoi visitatori, o farli diventare impazienti.
Concentrati sempre su questa sezione, perché nella maggior parte dei casi PageSpeed mostrerà qui ciò che rallenta il tuo sito.
Nel mio sito di esempio, ho riscontrato gli errori:
PegeSpeed mi ha mostrato un problema non sempre facile da risolvere: l’Eliminazione di JavaScript e CSS che bloccano la visualizzazione nei contenuti above the fold.
Si tratta di una situazione comunissima e che può presentarsi in qualunque momento, alla modifica più piccola. Molto probabilmente, anche il tuo sito presenta (o presenterà) questo problema.
Per spiegarti brevemente, “Render” significa “Caricamento. Se un elemento è troppo pesante, impegherà più tempo a caricarsi, allungando di conseguenza il tempo di scaricamento dell’intera pagina sui browser.
La soluzione più banale è quella di inserire il caricamento degli script più pesanti alla fine del tag della tua pagina HTML.
Così facendo, ti assicurerai che gli script vengano caricati all’ultimo, lasciando spazio alle altre risorse (per lo più grafiche), permettendo ai visitatori di visualizzare “un abbozzo” della tua pagina.
Puoi controllare con Pingdom quali files e script rallentano il caricamento della tua pagina (usa il grafico):
In alternativa, Google ci suggerisce una soluzione che nella maggior parte dei casi aggira il problema, ma non risolvendolo del tutto. Anzi, ne crea uno nuovo.
Inserire gli script nell’della pagina non migliora il caricamento, soprattutto se il file .js è di grandi dimensioni. Ed agendo in questo modo, si creerà un altro problema: l’intervento dei programmatori non sarà facile, soprattutto se il sito è soggetto a frequenti modifiche. Pensa alle situazioni di emergenza e trovarsi più di 7000 righe di Js in una pagina html.
È meglio mantenere i files separati, che caricarli sulla pagina.
Per piccoli script può anche funzionare… ma vi sognereste mai di trascrivere tutta la libreria jQuery nell’head? Personalmente, no.
Il CSS Render Blocking è un po’ differente dal JS Render Blocking.
Se Google PageSpeed ti segnala CSS Render Blocking, significa che i tuoi file CSS impiegano troppo tempo a caricarsi. Ciò si traduce in una schermata bianca iniziale per l’utente. Quest’ultimo avrà davanti a se una schermata bianca fino a quando tutti i file CSS saranno caricati.
Solo dopo il caricamento l’utente potrà iniziare a vedere qualcosa, e a navigare.
Purtroppo, questo è il male di tutti i mail: una schermata bianca per più di 2 secondi non fa un bell’effetto, anzi, se hai un e-Commerce fa scappare a gambe levate dei potenziali clienti!
Ma qual è la differenza tra CSS Render Blocking e JS Render Blocking?
Nel JS Render Blocking gli script più pesanti bloccano le risorse ritardando il caricamento delle risorse visibili (ciò che il visitatore può vedere con i propri occhi. Nel CSS Render Blocking, invece, la grandezza e il numero dei file CSS richiesti dalla pagina causa dei ritardi. Più grandi e numerosi sono i file CSS richiamati, più un visitatore attenderà.
Per questo motivo, se la tua pagina HTML richiede 9 file CSS cerca di accorpare tutto il codice in un unico file .CSS. E se puoi, inserisci nell’head dei piccoli file .css racchiusi tra i tag
Inoltre, ti consiglio di alleggerli: i temi WordPress, i Plugin, i framework come Bootstrap 3 contengono molto CSS, che la maggior parte è superfluo e caricato inutilmente dalla tua pagina HTML.
Quindi, per risolvere il Render Blocking CSS, riduci il numero dei file CSS ed elimina il superfluo.
Per un caricamento più rapido, le pagine possono essere compresse. Per compressione si intende fornire ai visitatori una versione della pagina HTML compressa e di dimensioni minori, affidando al browser l’incarico di estrarre i dati e mostrarli ai visitatori.
Il browser richiederà al server se è possibile ricevere la pagina in un formato compresso ”(Accept-Encoding: gzip, deflate)“. Se la risposta del server sarà affermativa ”(Content-Encoding: gzip)“ allora il browser scaricherà la pagina compressa, l’estrarrà e la mostrerà all’utente finale.
Se la compressione non è abilitata, il browser richiederà la pagina in chiaro, standard.
È un po come i file allegati della nostra email. Ci sono volte in cui il mittente spedisce gli allegati in chiaro, altre volte in cui ci spedisce tutti i files in un archivio in formato .zip da scaricare.
A questo punto, sarà compito tuo aprire l’archivio, estrarre i dati e leggere il contenuto. Okay, lo stesso principio viene applicato dal tuo browser. Scarico la versione compressa della pagina, la estraggo e la elaboro (mostro a te).
Qual è il vantaggio nell’abilitare la compressione?
Prova gratis e senza impegno uno dei nostri piani hosting per 14 giorni. Non è richiesto nessun dato di pagamento!
Prova gratisLa velocità.
Files compressi occupano meno spazio, e sono più facili da scaricare, anche in presenza di connessioni lente. Per abilitarla, puoi utilizzare l’ottimo plugin W3 Total Cache ed abilitare la compressione GZIP.
In alternativa, se sei più esperto, puoi inserire questo codice nel tuo .htaccess:
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.*
L’effetto è garantito 🙂
In questa sezione sono racchiusi gli errori per i quali non è necessario intervenire prontamente, ma che nel complesso rallentano le performance del nostro sito.
Diciamo che sono le piccolezze, che messe tutte insieme fanno un macigno.
In ogni caso, vediamo come risolverle per il nostro povero sito preso di mira.
Se PageSpeed ti indica di minimizzare i tuoi files, molto probabilmente è perchè contengono un grande quantitativo di spazi, daccapo e commenti.
Non servono a nulla sotto il punto di vista dell’elaborazione (sono ignorati dai browsers), ma facilitano il compito del programmatore sulla comprensione dei files.
Eppure questi elementi hanno un certo peso, e sappiamo che più un file è pesante, maggiore sarà il tempo richiesto per caricarlo completamente. Puoi ridurre, anzi, “alleggerire” i tuoi file utilizzando semplici tools che trovi online.
Nota bene che Minimizzare e Comprimere sono due cose totalmente diverse.
Per minimizzare i tuoi file CSS, puoi utilizzare il tool CSS Minifier. Fai un copia dei tuoi files .css, dalli in pasto a CSS Minifier e copia-incolla l’output.
Stessa cosa vale per i file JS utilizzando il tool JSCompress.
E per l’HTML puoi utilizzare il tool HTML Minifier.
Comprimere e minimizzare i files va bene, ma fai attenzione. Nonostante i files ottenuti saranno più leggeri, ciò andrà a discapito della leggibilità.
Consiglio comunque di mantenere sempre una copia dei files non minimizzati, per permettere ai programmatori di apportare subito le modifiche.
Abilitare la cache sta a significare un concetto molto semplice: permettere agli utenti di memorizzare informazioni sul tuo sito. Più precisamente, il tuo browser tenta ogni volta di salvare informazioni sulle pagine che visualizzi o che interagisci.
Di default è così.
Il browser assume che i siti e le pagine web da te consultate possano essere rivisitate in futuro. Per questo motivo, il browser memorizzerà alcuni dati sul tuo pc (smartphone o tablet) al fine di migliorare la tua esperienza utente e permetterti di visitare il sito ad una velocità maggiore.
La maggior parte delle volte i files più utilizzati (talvolta i più pesanti) vengono salvati localmente sulla tua macchina (PC).
Ovviamente, se il browser riesce a salvare i dati sul tuo pc, è perchè il sito lo permette. Ed abilitare la cache sul tuo sito serve proprio a dare questo “permesso” ai vari browsers degli utenti.
Devo dire che non tutti i siti abilitano la cache e ciò può essere un problema, perchè un sito sprovvisto di cache rallenta lo scaricamento sia per il primo accesso, sia per gli accessi futuri.
Se usi WordPress e vuoi attivare la cache per il tuo sito, puoi utilizzare il plugin W3 Total Cache, reputato da molti il migliore in circolazione.
Altrimenti, trova un modulo o plugin per la cache. In alcuni CMS (come Drupal) questa funzione è abilitata di default.
Sapevi che le immagini occupano spazio? E che ciò è direttamente proporzionale alle dimensioni e qualità dell’immagine?
Molte immagini contengono informazioni aggiuntive non visibili dall’utente. Contengono del superfluo, e anche in questo caso, il superfluo pesa. Ottimizzare le immagini è qualcosa che consiglio assolutamente di fare.
Ottimizzare le immagini significa ridurne il peso, ed eliminare il superfluo. Molte immagini contengono informazioni che non hanno particolare interesse per l’utente. Possono essere i commenti, la data di creazione, e vari metadati di scarsa importanza.
Oltre ad ottimizzare e ad alleggerire le immagini, ti consiglio anche di non inserire troppe immagini nell’Above the fold.
Te lo spiego con un’immagine. Ogni pagina web si carica adottando questa prassi:
L’HTML è il primo elemento ad essere caricato. A seguire il CSS.
Per ultimo le immagini, partendo da quella nella posizione più alta fino ad arrivare all’ultima. Adesso immagina se la tua immagine principale (situata nell’above the fold) dovesse impiegare diversi secondi a caricarsi.
I tuoi visitatori potrebbero scappare, non visitare affatto il resto della tua pagina, o non leggere l’offerta della tua landing page.
Io utilizzo TinyPng per comprimere le immagini. Per me è il migliore ed è in grado di comprimere immagini PNG e JPG.
PageSpeed Insights è un ottimo tool, ma come abbiamo accennato prima, non misura la velocità complessiva di un sito.
È vero però che seguendo le indicazioni di PageSpeed potrai ottenere un miglioramento indirettamente. Ma la velocità non dipende solo da quanti errori riesci a risolvere, ma anche dal server e alla connessione del tuo pc.
In questa sezione utilizzeremo altri tools, e vedremo di aumentare la velocità del nostro sito.
Abbandoniamo per un attimo Google PageSpeed Insights ed utilizziamo un altro potentissimo tool: GTMetrix.
Anche in questo caso, analizziamo il nostro sito di riferimento.
I risultati sono i seguenti:
Possiamo subito notare che la velocità effettiva è pari a 4.6 secondi. Vale a dire che da quando premi INVIO sulla tua tastiera, il server impiegherà 4.6 secondi per mostrarti la pagina interamente caricata.
GTMetrix ha assegnato a questo sito un voto “D” sia a PageSpeed che YSLow.
GTMetrix è un tool che accorpora e confronta questi 2 tools messi a disposizione rispettivamente da Google e Yahoo, e ne analizza le richieste.
La differenza tra i due, seppur minima, è che ogni tool assegna uno score diverso in base ai parametri di ciascun tool, ma non significa affatto che ottenere uno score 100/100 su PageSpeed ti aiuti a migliorare il posizionamento del tuo sito, così come uno score A/100 di YSlow non ti aiuta ad ottenere un posizionamento migliore su Yahoo.
GTMetrix semplicemente offre la possibilità di comparare i risultati di questi due tools.
Qual è il più affidabile? Entrambi.
Non esiste il tool più affidabile, o il più preciso, o quello “che ti fa saltare di posizione”. Prendi in considerazione entrambi i tools perché il tuo obiettivo principale deve essere sempre quello di fornire la miglior esperienza utente. Agevola i visitatori, non i motori di ricerca.
Dopo aver ottimizzato il tuo sito seguendo i consigli di PageSpeed e YSlow, spostati sulla scheda "Waterfall” (cascata).
In questa scheda puoi vedere con i tuoi occhi cosa fa il tuo sito mentre i visitatori aspettano. Questa è il grafico delle richieste del nostro sito:
Seguendo la legenda, possiamo notare che il sito in questione fa aspettare molto per semplici richieste.
Questa volta ci spostiamo su un altro tool, Pingdom.
Inserisci il tuo sito e seleziona località più fisicamente vicina al server che ospita il tuo sito. In questo caso, ho scelto “Melbourne, Australia”.
E questi sono i risultati. Possiamo da subito notare che questo sito effettua 69 richieste.
Sono troppe.
Troppe richieste fanno spazientire l’utente. Un visitatore potrebbe annoiarsi per la lentezza del tuo sito, o rimanere in uno stato di “ansia”. Anche se le connessioni sono rapide, la quantità è una carta che gioca a tuo sfavore.
Prendendo il grafico precedente, abbiamo detto che più il server è lontano e minori sarà la velocità del nostro sito. Ciò corrisponde alla parte verde, dove il browser cerca di ottenere dati dal server.
Ogni connessione ha un certo tempo di attesa, e molto dipende dalla distanza del server. Il punto è che ogni connessione impiega a sua volta un certo tempo, e 69 richieste per un tempo medio di 0.1 secondi equivale ad un tempo di caricamento pari a 6.9 secondi circa (in realtà questo è un dato approssimativo, perché un server è capace di effettuare un tot di richieste contemporaneamente senza andare in crash).
Per questo motivo, cerca sempre di diminuire il tempo di attesa medio per una singola connessione, e anche di tener basso il numero complessivo delle richieste.
Puoi farlo unendo i file CSS e JavaScript in files unici, accorpando le immagini (se consecutive), o diminuendo il numero dei plugin (specialmente quelli che fanno uso di risorse esterne, in primis i plugin social).
Ottimizzare un sito non è facile. E a volte anche io mi trovo in difficoltà con i siti dei miei clienti, che spesso mi chiedono di ottimizzare o crearne dei nuovi molto veloci.
Vuoi un consiglio? Non soffermarti sul semplice Google PageSpeed Insights, ma vai oltre ed utilizza più tools. Migliora il tuo sito volta per volta al fine di fornire un’esperienza utente più che ottima.
Prova gratis e senza impegno uno dei nostri piani hosting per 14 giorni. Non è richiesto nessun dato di pagamento!
Prova gratisSono onesto con te: raggiungere la velocità zero è praticamente impossibile, ma ciò non deve essere una scusa per non provarci.
In bocca al lupo per tutto!
P.s. Tu? Quali tecniche/tools usi per ottimizzare i tuoi siti? Scrivilo nei commenti
