Prima di andare ad analizzare i punti che portano all’ottimizzazione della velocità si un sito web conviene rispondere a una domanda “Perchè il mio sito deve essere veloce?”.
Contents
Perchè un sito deve essere veloce?
Insomma le pagine non ci mettono molto a caricare, abbiamo tutti connessioni veloci ormai a cosa può mai servire perdere del tempo ad ottimizzare la velocità di un sito web? I due motivi principali sono l’attenzione dei motori di ricerca alla velocità di caricamento del sito, e la migliore usabilità per l’utente.
Google è attento alla velocità di un sito
Il primo motivo è la Seo, Google ha dichiarato che la velocità di caricamento delle pagine di un sito è un fattore di posizionamento, a cui sembra tenere particolarmente. Lo stesso Google ci fornisce anche lo strumento di controllo della velocità del nostro sito, di cui parleremo in seguito, Page Speed. Già solo questo motivo fa si che valga la pena ottimizzare la velocità del proprio sito.
User Experience
Rendere più veloce il proprio sito aiuta in realtà anche l’esperienza dell’utente, è vero che è aumentata la velocità delle connessioni a internet, però nello stesso tempo è aumentata anche l’impazienza dei visitori delle pagine web. Vuoi dirmi che non ti è mai capitato di andartene da un sito perchè troppo lento a caricare? O almeno di rinunciare a vedere un video perchè impiega troppo a caricare?
Non sempre la nostra connessione è ottimale, immaginiamo ad esempio quando ci muoviamo con il nostro smartphone sui mezzi pubblici. Non ci possiamo ormai più permettere di considerare solo il desktop e tralasciare l’aspetto dei dispositivi mobili. Da studi è stato dimostrato che con l’aumentare dei tempi di caricamento della pagina aumenta anche il numero di abbandoni della pagina stessa, un solo secondo può comportare una riduzione del 7% delle conversioni.
Velocità sito web: programmi utili
La seconda fase una volta capita l’importanza di ottimizzare la velocità del proprio sito web, è quella di capire quali programmi possano aiutarci
PageSpeed: il tool di Google
Il primo non può che essere PageSpeed, che è prima di tutto un’ottimo strumento, ma che soprattutto è di Google. Cioè se vogliamo veramente vedere con gli occhi del motore di ricerca, forse è proprio questo lo strumento che può darci la giusta valutazione. Per essere più chiaro, anche se sbagliasse nella sua analisi e un un’altra applicazione sul web facesse un’analisi più veritiera e completa, Google nella sua ottimizzazione con molta probabilità avrebbe a disposizione i dati che escono fuori da PageSpeed. Insomma se vogliamo vedere il nostro sito come è valutato da Google in termini di velocità possiamo farlo con questo tool, cosa che non è affatto da sottovalutare. Detto questo PageSpeed è in realtà anche un ottimo strumento, totalmente funzionale per valutare la velocità del proprio sito web.
Mobile e Desktop
PageSpeed divide la sua analisi in mobile e desktop e questo è molto utile, abbiamo già parlato dell’importanza dell’ottimizzazione sulla velocità proprio per i dispositivi mobili. Questo mostra anche l’attenzione che dà Google all’ottimizzazione mobile.
Lo strumento ci mostra una serie di ottimizzazioni da fare e cerca di mostrarci anche la soluzione al problema, quest’ultima non è sempre così chiara, ed è anche il motivo della creazione di questa guida.
In fondo ci dice quali sono invece le ottimizzazioni trovate sul sito web, sono quelle che PageSpeed trova e riconosce valide sul sito valutato.
PingDom
PingDom è un validissimo strumento di controllo del nostro sito. Perchè un ulteriore strumento? Perchè aiuta a fare un analisi più precisa, fornisce informazioni che PageSpeed non fornisce.
Una volta immesso l’indirizzo del sito e scelto il luogo geografico più vicino al nostro target, parte l’analisi del sito. Alla fine abbiamo un giudizio, simile a quello di PageSpeed, abbiamo subito a disposizione il numero delle richieste, il tempo di caricamento della pagina e il peso della pagina. Troviamo anche la voce “Faster than” che confronta il nostro risultato con quello degli altri siti testati.
Più in basso troviamo l’elenco delle richieste fatte il peso del file scaricato e il tempo di caricamento, di ognuna di queste richieste abbiamo tante informazioni aggiuntive. Di ogni singola richiesta non abbiamo solo i tempi di scaricamento, ma i tempi delle varie fasi della richiesta http (connessione, invio, attesa della risposta, e ricevuta). Questo elenco lo possiamo ordinare per tipo, url, dimensione o tempo di caricamento.
GTmetrix
GTmetrix è un altro strumento di controllo della velocità del proprio sito. Può essere molto utile, perchè riassume nelle sue statistiche i dati Yslow e PageSpeed. C’è l’elenco delle regole da applicare e una percentuale che indica quanto vengono applicate sul nostro sito.
Quelle che vedete al primo caricamento sono le regole di PageSpeed ma se andate a cliccare su Yslow (nel tab subito sopra) troverete le regole di Yslow e i dati di come siano state applicate sul nostro sito.
Timeline ci riporta l’elenco delle richieste e i tempi di attuazione, lo fa in maniera molto dettagliata e chiara. Con History possiamo invece vedere lo storico dei risultati per quel determinato sito. Se ci registriamo gratuitamente possiamo monitorare periodicamente il nostro sito impostandolo nella sezione Monitor.
WebPageTest
Altro interessante tool è WebPageTest, questo consente di definire anche il browser con cui testare il sito. Possiamo vedere la differenza tra la prima richiesta e la successiva, in modo da verificare i vantaggi del caching. Vediamo subito dopo le timeline del caricamento riportate per la prima visita e le successive
Cosa ottimizzare per rendere veloce il mio sito?
Ora che abbiamo capito perchè perdere tempo ad ottimizzare il mio sito e quali sono gli strumenti per farlo è arrivato il tempo di capire cosa ottimizzare.
Cosa posso migliorare del mio sito per renderlo veramente più veloce? Ecco una lista delle cose da compiere.
Riduzione chiamate HTTP
Le nostre pagine non sono composte solo da HTML ma da immagini, css, javascript, video. Questi elementi devono essere caricati e si fa con quelle che si chiamano richieste HTTP, ogni richiesta comporta del tempo aggiuntivo, in particolare per quanto riguarda javascript. Quindi obiettivo principale è quello di ridurre il peso di questi elementi e il loro numero. Per quanto riguarda il peso lo vedremo nei prossimi punti, per il numero di richieste si fa accorpando per quanto possibile i file da caricare, ad esempio i file .css possono divenire un’unico file, così come per i file javascript e in taluni casi anche per le immagini (Image Sprite).
Un’ottima soluzione se si hanno molte richieste di immagini è quella di un caricamento parallelo, tramite il caricamento delle immagini da un altro server (Amazon, MediaFire o altro), come avviene per file css e javascript caricati tramite CDN.
Javascript e Css che bloccano la pagina
Il messaggio che troviamo su PageSpeed è “Elimina Javascript e CSS che bloccano la visualizzazione nei contenuti above-the-fold”
Stiamo parlando dell’ottimizzazione del caricamento dei css e dei file javascript. È buona norma disporre in alto le chiamate css all’interno del tag head e alla fine le chiamate ai file javascript, vicino alla chiusura del tag body. In questo modo il caricamento del file javascript non bloccherà il caricamento della pagina, mentre il file css è essenziale per la corretta visualizzazione della pagina. Un browser è in grado di scaricare in parallelo più di un file, ma non più script, al momento dello scaricamento del file javascript viene bloccato ogni caricamento parallelo sino a quando non sarà terminato il caricamento dello script.
Il caricamento dello script non è parallelo, il browser attende fino a che non è terminato il caricamento del file javascript. Se scaricare il file javascript richiedesse 2s in quell’arco di tempo la restante pagina HTML non sarebbe caricata ma attenderebbe il caricamento del javascript.
Questa è la normale prassi, scoprirete in realtà che questa voce non si spegne neanche quando questi concetti saranno stati attuati. Questo perchè Google vorrebbe che si caricasse all’inizio il css che è fondamentale per vedere la singola pagina, quindi un css molto piccolo, e solo successivamente il restante codice css.
Lazy Loading
Significa caricamento pigro, le immagini o i video vengono caricati solo al momento in cui realmente serve, cioè quando sono visibili sullo schermo. Così in una pagina con molte foto, il caricamento di queste potrebbe avvenire solamente nel momento in cui si arriva in quella sezione della pagina.
La pagina HTML è completamente caricata nel momento in cui sono caricati tutti gli elementi, compresi video e immagini, compresi quelli che magari non sono immediatamente visibili all’utente ma ci arriverà solo successivamente scrollando la pagina. Ecco perchè queste immagini possono essere caricate in quel momento in modo da rendere più veloce la fase iniziale di caricamento.
Compressione gzip
Il messaggio che troviamo su PageSpeed è “Abilita la compressione”
Abilitare la compressione gzip, comprimere file html, css, javascript e immagini, comprimere vuol dire ridurre lo spazio e quindi caricare le pagine in modo più veloce. Stiamo riducendo il peso delle risposte HTTP, i due problemi avevamo detto sopra che erano numero e peso, ora ci stiamo concentrando sul peso.
In questo caso bisogna modificare il nostro file .htaccess aggiungendo questo:
Header unset Last-Modified Header set Vary "Accept-Encoding" AddOutputFilterByType DEFLATE text/css text/html text/javascript text/plain text/xml AddOutputFilterByType DEFLATE font/opentype font/otf font/ttf image/svg+xml image/x-icon AddOutputFilterByType DEFLATE application/vnd.ms-fontobject application/x-font-ttf AddOutputFilterByType DEFLATE application/x-font application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-opentype application/x-font-otf AddOutputFilterByType DEFLATE application/javascript application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml application/xml application/rss+xml
Non spaventarti, se non sei abituato a giocare con il file .htaccess e usi wordpress, mostrerò più tardi i plugin adatti. In ogni caso anche se può spaventare ad una prima occhiata il codice è abbastanza ridondante e si limita ad abilitare un modulo di Apache mod_deflate che serve per la compressione e subito dopo la definizione dei vari tipi di file css, html, javascript, xml, font. Nelle vecchie versioni di apache invece veniva abilitato il modulo mod_gzip invece che mod_deflate.
In questo modo le chiamate HTTP avranno durata più breve in quanto il browser riceverà i contenuti compressi, più leggeri sino a circa il 70% e quindi sarà più veloce.
Se avete deciso di intervenire direttamente sul file .htaccess, aggiungete queste righe di codice sotto a quelle già esistenti nel file .htaccess. Nel caso stiate usando wordpress sicuramente le troverete, altrimenti, se il file .htaccess non esistesse potrete crearlo sulla root del sito.
Ecco cosa dovreste trovare nel vostro file .htaccess se utilizzate wordpress:
# BEGIN WordPress
RewriteEngine On
RewriteBase /progettazioneweb/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /progettazioneweb/index.php [L]
# END WordPress
Questi sono i mod_rewrite, che consentono a wordpress di creare le friendly url, in quanto consente la riscrittura dell’url.
Potete tranquillamente incollare il codice sotto il commento “END WordPress” .
Basta un piccolo errore nel file .htaccess per mandare offline tutto il sito, quindi vi consiglio di copiare da qualche parte il codice precedente per poi ripristinarlo in caso di problemi.
Infine per controllare che la compressione sia operativa possiamo utilizzare GIDNetwork, mettete l’indirizzo del vostro sito e testate. Come vediamo dall’immagine oltre a verificare che sia compressa la pagina web ci dice il tipo di compressione e il grado di compressione, con peso precedente, peso attuale e percentuale di compressione.
Caching Browser
Il messaggio che troviamo su PageSpeed è “Sfrutta il caching del browser”
Si intende salvare contenuti, come immagini, css, javascript sul disco del visitatore del sito in modo da non doverli riscaricare quando ritorna sul sito una seconda volta. Quindi nel momento in cui un utente visiterà il mio sito questi contenuti saranno salvati sul suo disco e le volte successive che tornerà a visitarmi prenderà questi contenuti direttamente dal suo disco invece che dalla rete ciò vuol dire che il browser dovrà effettuare meno richieste HTTP e quindi come abbiamo detto sopra il caricamento della pagina sarà più veloce.
Anche in questo caso dobbiamo andare a modificare l’ormai famoso file .htaccess aggiungendogli le indicazioni circa cosa deve salvare.
Header append Cache-Control "public" ExpiresActive On ExpiresDefault "access plus 1 month" ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/bmp "access plus 1 year" ExpiresByType image/webp "access plus 1 year" ExpiresByType video/ogg "access plus 1 year" ExpiresByType audio/ogg "access plus 1 year" ExpiresByType video/mp4 "access plus 1 year" ExpiresByType video/webm "access plus 1 year" ExpiresByType image/x-icon "access plus 1 week" ExpiresByType image/vnd.microsoft.icon "access plus 1 week" ExpiresByType image/svg+xml "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 3 months" ExpiresByType font/eot "access plus 3 months" ExpiresByType font/opentype "access plus 3 months" ExpiresByType font/truetype "access plus 3 months" ExpiresByType application/x-font-ttf "access plus 3 months" ExpiresByType application/font-woff "access plus 3 months" ExpiresByType application/x-font-woff "access plus 3 months" ExpiresByType font/woff "access plus 3 months" ExpiresByType application/font-woff2 "access plus 3 months" ExpiresByType text/html "access plus 1 day" ExpiresByType text/css "access plus 1 week" ExpiresByType text/javascript "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-javascript "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" ExpiresByType application/pdf "access plus 4 months" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType text/xml "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType application/json "access plus 0 seconds" ExpiresByType application/ld+json "access plus 0 seconds" ExpiresByType application/schema+json "access plus 0 seconds" ExpiresByType application/vnd.geo+json "access plus 0 seconds" ExpiresByType application/rss+xml "access plus 1 hour" ExpiresByType application/rdf+xml "access plus 1 hour" ExpiresByType application/atom+xml "access plus 1 hour"
Nuovamente non vi spaventate, perchè parleremo dei plugin di wordpress e perchè anche in questo caso il codice è lungo, ma abbastanza chiaro. In ogni riga potete vedere che si mette cosa deve essere salvato e per quanto tempo, la scadenza (years, months, weeks, days, hours, seconds).
Chiaramente tutto dipende da quanto frequentemente aggiorniamo, immagini, video, javascript e css, se gli aggiorniamo in maniera più frequente possiamo mettere tempi di scadenza più brevi.
Minify Css, javascript e HTML
Il messaggio che troviamo su PageSpeed è “Minimizza Javascript”, “Minimizza Css”, “Minimizza HTML”
Minificare i file css, javascript e HTML, vuol dire eliminare tutto ciò che non serve. Quando si scrive codice gli sviluppatori lo fanno in modo umano, mettendo gli spazi e andando a capo, in modo da poter agire sul codice in maniera semplice. Tutto questo non serve al browser e rende i nostri file più pesanti, quindi con la minificazione si toglie tutto ciò che non serve per la lettura di questi file e si alleggeriscono.
Esistono tantissimi tool online per minificare file css, javascript e HTML.
Ottimizzazione immagini
Il messaggio che troviamo su PageSpeed è “Ottimizza immagini”
Si tratta di ottimizzare la dimensione delle immagini. La compressione delle immagini ne riduce notevolmente il volume. In PageSpeed cliccando su “Mostra come risolvere il problema”, ci viene dato un elenco di immagini da comprimere e ci mostra anche quanto sarebbe il risparmio. A volte si tratta anche di riduzioni dell’80-90%.
Lo strumento non si limita solo a mostrarci l’elenco delle immagini da comprimere, ma ce le prepara anche, le comprime e ce le offre compresse. In fondo all’analisi di PageSpeed troverete “Scarica contenuti ottimizzati quali immagine, JavaScript e risorse CSS per questa pagina“, cliccate sul link e potete scaricare le vostre immagini compresse, volendo anche javascript e css. Non dovete fare altro a questo punto che caricare queste nuove immagini al posto di quelle vecchie e il gioco è fatto.
Chiaramente prima di tutto questo dovremmo cercare di usare immagini con la giusta dimensione, inutile avere immagini di 1000 px se dobbiamo metterle in un div di 300 px, conviene ridimensionare l’immagine prima e non farlo fare al browser. Questo perchè l’immagine di 1000 px sarà sicuramente più pesante di quella di 300 px e inoltre al browser diamo anche il compito di ridimensionarla. Quindi se sappiamo che il contenitore dell’immagine non sarà mai più grande di 300 px ridimensioniamo direttamente noi l’immagine. Avremo un’immagine più piccola e alleggeriremo anche il browser dal compito di doverla ridimensionare.
Plugin wordpress per rendere più veloce un sito
È arrivato il momento di parlare di plugin, alcuni voi scommetto che hanno saltato tutto e sono andati dritti qui. Ora vedremo alcuni plugin utili e le impostazioni che devono avere settate
W3 Total Cache
Più difficile da configurare ma consente di fare operazioni più complesse.
Funziona alla grande, anche se è un po’ difficile da configurare ma di certo ha dei risultati eccezionali.
In alternativa si possono usare:
- Far Future Expiration Plugin: questo plugin si occupa di ottimizzare la parte di caching del sito, praticamente aggiunge la scadenza dei file, come abbiamo visto sopra.
- Autoptimize: Comprime file css, js e html e li minifica unendoli insieme Inoltre mette i file css nell’head e sposta i file javascript in fondo alla pagina.
Configurazione w3 Total Cache
Nella dashboard al termine della nostra configurazione potremmo fare il check Compatibility che verifica la compatibilità con l’ambiente e ci mostra molte informazioni.
Page cache
Andiamo in impostazioni e iniziamo ad impostare la page Cache, si tratta di una copia esatta della pagina visualizzata dal visitatore, alla visita successiva viene visualizzata senza dover eseguire le query sul database necessarie per ricaricare la pagina. Questo rende chiaramente molto più veloce il caricamento ed influisce sulla risposta del server. Possiamo anche decidere il metodo di creazione delle cache
Minify
In questa sezione possiamo impostare la minificazione dei file css, javascript e dell’HTML. Portiamo il minify mode a Manual.
Database cache
Possiamo applicare le cache al database, questo può ridurre i tempi di caricamento della pagina
Browser cache
Siamo nella parte più importante andiamo ad abilitare la cache del Browser
WP Smush
Consente la compressione delle immagini presenti e quelle che inseriremo in futuro, appena installato e attivato ci chiederà se attivarlo per le nuove immagini, la nostra risposta sarà affermativa. In questo modo al caricamento delle nuove immagini wp-smush gestirà la compressione.
Per le immagini esistenti già sul sito possiamo andare nella voce “Media” e cliccare su WP SMUSH, qui troverà le nostre immagini non ancora compresse e ci dirà se vogliamo comprimerle. Se non volessimo comprimerle tutte potremmo cliccare su Media Library e comprimere quelle che vogliamo, oppure direttamente dalla libreria cliccando sull’immagine che vogliamo comprimere, trovermo all’interno della descrizione il pulsante di WP Smush.
Di ogni immagine registra il dato di quanto è stato risparmiamo in KB e in percentuale rispetto all’originale.
WP-Optimize
Pulizia del database, soprattutto per siti dai grandi contenuti, ottimizza le tabelle, le ripara e rende quindi il database più leggero. Permette anche di settare l’intervallo di tempo in cui deve fare queste ottimizzazioni.
Remove query string from static resources
Rimuove la query che si trova soprattutto nei nome dei file javascript e css esterni che dà fastidio ai motori di ricerca
a3 Lazy Load
Se vogliamo utilizzare il caricamento delle immagini sfruttango lazy loading, questo potrebbe essere il plugin che fa per noi. Una volta installato lo troviamo tra le impostazioni qui dobbiamo innanzitutto controllare se è su on la voce “Enable Laxy Load” e poi su “Lazy Load Images” possiamo andare a vedere le diverse sezioni in cui attivarlo.
Possiamo anche fare in modo che le immagini con una determinata classe, vengano skippate. In questo modo aggiungendo questa classe alla nostra immagine verrà caricata normalmente al caricamento della pagina.
La stessa identica cosa la possiamo fare per i video e gli iframes
di Massimiliano Salerno