Come risparmiare banda del proprio sito riducendo le dimensioni dei file javascript e attivando la compressione HTTP da Wordpress
Il 28 Dicembre 2007 il mio sito aveva finito la banda messa a disposizione dal mio server di hosting Blooweb: ben 40 GB mensili. Se questo, da un lato, non poteva che farmi contento perché significava che avevo un discreto numero di visitatori quotidiani, da un altro correvo il rischio di rendere inaccessibile il mio sito per ben 3 giorni consecutivi. Fortuna che i ragazzi del servizio di assistenza tecnica mi sono venuti incontri e gentilmente mi hanno concesso qualche giga in più per arrivare a fine mese! Il problema però rimaneva: se qualche mese prima arrivavo a 20-25 GB di banda mensile adesso in soli 31 giorni superavo la quota di 40 GB. Cosa era accaduto in questo periodo? Sicuramente un aumento del numero di utenti era stata una delle cause ma qualcos’altro era latente nel codice html del mio sito.
Analisi del log degli accessi
Dalle statistiche mensile di Awstats ho scoperto che se le pagine html/xhtml occupano al mese 10 GB di banda (in teoria questo valore dovrebbe essere direttamente proporzionale al numero di articoli che scrivo), quello che mi sconcertava era che i file Javascript occupavano ben 15.31 GB complessivi! Una cifra davvero spropositata.
Ecco allora che era venuto il momento di porre rimedio alla situazione.
Analisi del codice HTML
Come prima cosa ho analizzato il codice html della homepage e ho preso nota dei file javascript che caricava.
Così ho visto che nell’header caricava:
mentre nel footer
Rispettivamente abbiamo, quindi:
prototype.js?ver=1.5.1.1 -> 94.05 KB
addicted_live_search/js/prototype.js -> 53.86 KB
addicted_live_search/js/live_search.js -> 692 bytes
audio-player/audio-player.js -> 767 bytes
syntax/Scripts/shBrush*.js -> 42.13 KB
Eliminare le ridondanze
Come vedete il plugin Addicted To Live Search caricava il file prototype.js che è lo stesso che nativamente usa Wordpress. Cambia solo la release: se Wordpress usa la versione 1.5.1.1, questo plugin usava la 1.5.0_rc0 (attualmente esiste la release 1.6).
Come primo passo, quindi, era inevitabile che modificassi il plugin “Addicted To Live Search” in modo da non caricare inutilmente due volte lo stesso framework javascript. Quindi ho editato il file live_search.php e commentato la riga relativa al framework prototype:
Con questa piccola modifica ho risparmiato 53.86 KB che, moltiplicato il numero di visite mensili, è sicuramente un valore non trascurabile, dato che questi codici javascript vengono caricati ad ogni singola pagina!
Per intenderci meglio, se un sito ha un numero giornaliero di pagine viste pari a 1.000, al mese abbiamo 31.000 pagine viste che moltiplicato quasi 54 KB, abbiamo un risparmio netto di oltre 1,6 GB di banda mensile (in questi calcoli ho considerato trascurabili gli effetti cache dei browser)! Con 100.000 visite al mese, avremmo un risparmio di 5,4GB di banda. Insomma, a conti fatti, risparmiare 54 KB non sembra poi una operazione inutile!
Comprimere i file Javascript
A questo punto bisognava risolvere anche il problema dell’eccessiva dimensione del file Prototype.js: ben 94.05 KB. Per farlo non ho fatto altro che comprimere il contenuto di questo file con uno dei tanti compressori di file javascript che si trovano in giro per la rete, in grado di ridurne le dimensioni, il tempo di caricamento di una pagina e, conseguentemente, la banda complessiva occupata!
Per scegliere quale fosse il miglior compressore per il file Prototype.js 1.5.1.1 ho eseguito diversi test con i seguenti 3 popolari compressori javascript online: Dean Edwards’ Javascript Compressor, Dojo ShrinkSafe e MemTronic’s HTML/JavaScript Cruncher & Compressor.
I risultati sono visualizzati in questa tabella riepilogativa:
| Original | Dean Edwards’ | ShrinkSafe | MemTronic’s | |
|---|---|---|---|---|
| file size(kb) | 94.0 | 39.2 | 64.5 | 40.4 |
| gzipped size(kb) | 20.6 | 16.7 | 18.4 | 20.4 |
Anche se per pochi kilobyte, ho deciso, quindi, di prendere in considerazione Dean Edwards’ Javascript Compressor. Come risultato ho ottenuto, quindi, una riduzione delle dimensione di oltre il 50%, da 94.05 KB a 39.23 KB, per un risparmio complessivo di ben 54,82 KB.
Ovviamente, per continuare ad adottare questa soluzione, ad ogni upgrade della propria piattaforma di blogging Wordpress, ci si dovrà ricordare di comprimere il nuovo file JS, operazione che consta in appena 2 minuti di attività.
UPDATE: Se però volete risparmiare tempo ed evitare di dover, ogni volta, comprimere i nuovi file Prototype.js che vengono rilasciati insieme alla distribuzione di Wordpress, potete, allora, fare riferimento all’ottimo lavoro svolto da John-David Dalton che ha compresso per noi le versioni di Prototype 1.4, 1.5, 1.5.1.1, 1.6.0. Quello che dovrete fare voi è scaricare il file protopacked_v2.17.zip, scompattarlo e vi troverete una ricca collezione di framework Prototype/Scriptaculous. In particolare questo package contiene la release 1.4, 1.5, 1.5.1.1, 1.6.0 di Prototype e la release 1.7.1_beta3, 1.8.0 di Scriptaculous. Se sul vostro sito usate anche Scriptaculous allora dovete far riferimento al file Protoculous, che altro non è che la combinazione in un unico file di Prototype and Scriptaculous.
In generale, però, una volta scompattato il pacchetto zip, aprite la cartella “files” e vi troverete 3 cartelle: qui scegliete di aprire la cartella “compressed“, quindi la cartella “prototype” e, infine, entrate nella directory “v1.5.1.1“. Qui, vi troverete, dinanzi a due differenti versioni compresse dello stesso file Prototype.js:
prototype-1.5.1.1-packer.js : compresso con Dean Edward’s Packer 3 \w con le opzioni “Base62 encode” e “Shrink variables”
prototype-1.5.1.1-shrinkvars.js : compresso con Dean Edward’s Packer 3 \w con la sola opzione “Shrink variables”.
La differenza sta nelle dimensioni: il prototype-1.5.1.1-packer.js è grande neanche 40 KB mentre prototype-1.5.1.1-shrinkvars.js arriva fino a 60 KB. Io, per il mio sito, ho usato prototype-1.5.1.1-packer.js che ho, ovviamente, rinominato in prototype.js e, quindi, salvato nel percorso “wp-includes/js” sostituendo il precedente file.
Quindi, in definitiva, ad ogni aggiornamento di Wordpress, quello che dovrete fare è, andare su Prototype: Core e scaricare la versione desiderate del framework Prototype compresso.
Attivare la compressione HTTP da Wordpress
Un’altra cosa da fare è quello di andare nel Pannello di Controllo di Wordpress e, nella sezione Opzioni/Lettura, spuntare la voce “WordPress deve comprimere gli articoli (gzip) se il browser lo richiede“.
Infatti, Wordpress permette di comprimere in formato Gzip (attivando la compressione HTTP), se il browser del visitatore lo supporta, in modo da alleggerire la dimensione della pagina e diminuirne il tempo trasferimento facendo lavorare un po’ di più il computer dei vostri lettori.
In pratica, quindi, quando un visitatore richiede una pagina questa viene creata dal server, compressa in Gzip ed inviata al browser del nostro lettore che provvederà in automatico a scompattarla e successivamente a visualizzarla.
Fate attenzione però che, se usate dei plugin che velocizzano il blog mediante lavoro sulla cache, come WP-Cache o WP Super-Cache (di fatto l’evoluzione di WP-Cache) e attivate la compressione Gzip, i plugin potrebbero non funzionare.
In particolare, nel caso di WP-Cache, per far convivere entrambe le soluzioni, dovrete modificare il file wp-cache-phase1.php seguendo la procedura indicata da Davide Salerno.
In definitiva questa operazione dovrebbe influenzare il valore della banda occupata dalle pagine HTML/XHTML static page (che, ne mio caso, a Dicembre 2007 era di ben 10.80 GB senza alcuna compressione attiva!)
C’è da dire che la compressione Gzip era sempre stata attiva sul mio sito: presumo quindi che, in seguito all’ultimo grande cambio release alla versione 2.3 di Wordpress, questo opzione deve essere stata disabilitata per errore. Sono curioso, ora, di vedere quanto possa influenzare sulle banda complessiva.
Non resta che attendere
Per ora, mi sono fermato così. Al momento ho risparmiato complessivamente, per ogni pagina caricata ben 109 KB di Javascript, e un valore imprecisato di kilobyte attivando la compressione html, che al mese significa (sempre riportando un valore medio di 100.000 pagine) un risparmio di quasi 11 GB di bandwidth!
Al momento, gli altri file javascript non li ho compressi e forse, ad una analisi successiva, potrei anche rimuovere i plugin ad essi correlati (sostituendoli con altri più leggeri). Per il momento ho intenzione di aspettare 15 giorni per capire se tutte queste modifiche sono state sufficienti per recuperare un po’ di banda. Se così non fosse potrei provare a comprimere tutti i file Javascript e, magari, spostare su un altro server le immagini JPG, GIF e PNG che complessivamente occupano 4.81 GB di banda.
Infine, potrebbe anche essere utile comprimere i file CSS (nel mio caso arrivo a circa 18.14 KB complessivi): in questo caso vi suggerisco Compressor, una applicazione online in grado di comprimere sia codice Javascript o i fogli di stile CSS.
Intanto, per fosse interessato, metto a disposizione il file Prototype.js 1.5.1.1 compresso di Wordpress 2.3.2: lo potete scaricare qui.
Il passo
non è attivabile con il plugin Super Cache e con tutti i plugin che velocizzano il blog mediante lavoro sulla cache.
2 gennaio 2008 alle 11:41 | Rispondi a Sergejpinka
Molto interessante, grazie per aver condiviso queste preziose informazioni. A proposito: io ho compresso il file prototype.js 1.6.0 (ultima versione disponibile) ottenendo un risparmio superiore al 50%, tuttavia i miei menù (che utilizzano quella libreria) non funzionano più. Tu ci hai provato?
2 gennaio 2008 alle 12:10 | Rispondi a Maxime
(Update) ho risolto comprimendo il file con Dojo ShrinkSafe invece che con Dean Edward’s Javascript Compresso. La compressione è stata nettamente inferiore, ma almeno funziona tutto…
2 gennaio 2008 alle 12:16 | Rispondi a Maxime
@Sergejpinka: grazie, aggiorno subito l’articolo
2 gennaio 2008 alle 12:21 | Rispondi a Antonio Troise
@Maxime: grazie dell’informazione molto utile. Di quanto è stato inferiore la compressione?
2 gennaio 2008 alle 12:27 | Rispondi a Antonio Troise
@Antonio: con Javascript Compressor il file è passato da 121kb a circa 50kb (ma di fatto non funzionava più). Con Dojo Shrinksafe è stato ridotto a “soli” 88kb, però funziona perfettamente.
2 gennaio 2008 alle 12:58 | Rispondi a Maxime
Sbaglio oppure la compressione GZip aumenta notevolmente il carico di CPU sul server? In molti shared hosting questo è un danno superiore alla banda risparmiata
2 gennaio 2008 alle 13:09 | Rispondi a PseudoTecnico
@Maxime: Grazie mille… molto strano che non funzionava il file Javascript con Javascript Compressor.
2 gennaio 2008 alle 13:33 | Rispondi a Antonio Troise
@PseudoTecnico: sicuramente, ma, in questi casi bisogna fare un compromesso tra prestazioni e e banda. E, dato che il mio sito, dal punto di vista prestazionale era ottimo, ho dovuto lavorare sulla diminuzione drastica della banda da usare. E’ vero che non ho un server dedicato e potrei, in via del tutto teorica, rallentare altri siti che usano le mie stesse risorse, ma credo che, almeno sul mio hosting, non vi sia questo genere di problemi. Inoltre, pagare più del doppio di quello che pago ora, per avere solo 20 GB di banda mensile in più, è al di fuori della mia portata.
2 gennaio 2008 alle 13:38 | Rispondi a Antonio Troise
In America, dove la banda mensile è praticamente regalata persino ai porci, il vero problema è risparmiare sul carico della cpu. Comprimere i file è una delle cose che, al momento, devo evitare quanto più possibile per non far esplodere il mio blog.
Comunque facci sapere tra 15 giorni i risultati… è molto interessante come test.
Ciao,
Emanuele
2 gennaio 2008 alle 14:03 | Rispondi a Emanuele
Ciao.. ho letto il tuo articolo molto interessante ma non ho capito solo una cosa.. vorrei ottimizzare anche il mio di blog (ho a disposizione solo 10 GB di banda, quindi devo molto ottimizzarlo..) non ho capito come hai fatto a sapere i vari utilizzi della banda e capire dove ottimizzare…
grazie
4 gennaio 2008 alle 10:52 | Rispondi a MyLostBlot
Per fortuna che ora WP sta passando a jQuery.
4 gennaio 2008 alle 13:54 | Rispondi a Folletto Malefico
@MyLostBlot: il servizio di hosting dove risiede il mio sito, nel pannello di controllo, ho la possibilità di seguire le statistiche di accesso con Awstats. In teoria, se non ce l’hai installato sul tuo, basterebbe che ti potessi scaricare il file access.log del tuo webserver e farti le statistiche in locale sul tuo PC. Dal tuo pannello di controllo non hai strumenti di questo genere?
4 gennaio 2008 alle 17:35 | Rispondi a Antonio Troise
Ciao Sono Mimmoby Complimeti per il blog prima di tutto, tengo a precisare che tutta questa storia per me e come trovare il fatilico
ago nel pagliaio, quindi mi cimento a scoprire insieme a voi tutti come veramente risparmiare questa famosa banda, in quanto il mio server mi sta insanguinando con richieste mensili di banda,Pensate sono partito Senza limite con 18 GB di traffico incluso.
sono arrivato udite udite fino a 70 Gb veramente mostruoso, da un lato sono contentissimo per il valore del mio sito per quanto riguarda le visite al mio sito, ma del resto sono scontento per le mie tasche, dovrò rinunciare su qualcos’altro sicuramente.
Volevo solo capire se si possa fare anche con un sito letteralmente
in ASP come il mio grazie.
Grazie per aver inventato questo Blog Mimmoby
http://www.ceglieincucina.com
18 gennaio 2008 alle 12:30 | Rispondi a mimmoby
@mimmoby: I concetti di base si possono applicare anche su siti realizzati in asp, ma probabilmente cambieranno i file che dovrai comprimere e le modalità con cui attivare la compressione delle pagine html. Purtroppo io non ho molto esperienza su sit realizzati in asp e quindi non so dirti come poter risolvere il tuo problema. Cmq, se hai file javascript che carichi ad ogni pagina, puoi comprimerli con uno dei tool online che ti ho elencato nell’articolo.
18 gennaio 2008 alle 15:49 | Rispondi a Antonio Troise
@Antonio Troise: Ciao scusami per il ritardo nel riponderti.
Comunque spero che tu ai creato questo blog per aiutare chi a bisogno giusto?
Vi dico solo una volta compresso il files come posso proseguire
con il nuovo codice compresso?
non saprei il passaggio.
Grazie ancora di tutto e per la tua generosità.
Mimmo
19 gennaio 2008 alle 19:32 | Rispondi a mimmoby
ma sei ancora su blooweb.it o ti sei spostato su pair.com???
7 febbraio 2008 alle 03:44 | Rispondi a jack
@jack: No sempre su Blooweb … perchè?
7 febbraio 2008 alle 08:30 | Rispondi a Antonio Troise
Ma utilizzi un server dedicato o un hosting (penso il paccheto professional mega di Blooweb)?
Mi interessa per farmi un idea numero-vsitatori/risorse-server per scegliere un buon hosting
ciao
5 marzo 2008 alle 04:57 | Rispondi a jack
@jack: Esattamente sono su semplice servizio di hosting… per ora sono riuscito ad attestarmi sul pacchetto MEGA e spero di non dover andare oltre perché poi il rapporto qualità/prezzo si sbilancia perché, per quello che mi serve, pagherei il doppio solo per avere qualche giga in più di banda. Comunque Blooweb è un buon servizio di hosting e sin’ora non ho mai avuto molti problemi.
5 marzo 2008 alle 13:55 | Rispondi a Antonio Troise
Grazie,sei molto gentile
5 marzo 2008 alle 19:06 | Rispondi a jack
[...] Uno dei motivi, forse il principale, per cui questo blog è una chiavica è dovuto al fatto che ci sono troppe richieste HTTP. 12 richieste Javascript sono tante! Molte di queste sono da associare ai numerosi plugin installati, e molti di questi sono anche di grosse dimensioni che a volte superano i 50k. Magari ci sono diversi plugin che utilizzano lo stesso JS e quindi questi vengono richiesti al server più volte. Ad esempio, un metodo per diminuire il numero queste richieste e relative dimensioni potrebbe essere quello di comprimere i vari JS. [...]
25 marzo 2008 alle 12:58
Intanto complimenti per l’interessantissimo articolo.
perdona la domanda [forse] stupida ma..
sarebbe possibile richiamare la libreria prototype hostata su un altro server?
voglio dire..so che si può, ma poi funzionerebbe?
perché eventualmente risparmierei davvero tonnellate di banda da una parte, usando quella di un altro server con traffico illimitato..
Ti ringrazio, spero di leggere presto una tua risposta
8 aprile 2008 alle 03:44 | Rispondi a Onepeg
@Onepeg: Si funziona senza problemi, l’importante è che ti ricordi di mettere la URL completa. L’unico inconveniente è che, se il sito su cui risiede il JS non è altrettanto veloce come quello su cui risiede il tuo sito, ne risentirebbe il sito in generale. Volendo potresti caricarci anche tutte le immagini, ad ulteriore risparmio della banda (anche se forse è una situazione un po’ limite).
Ricordo che una volta Richard Tallent si chiese se Google potesse mai ospitare i framework Javascript sui suoi server in modo da consentire di incorporarli nei propri progetti con una url tipo:
http://static.google.com/prototype/1.5.1.1/prototype.jsa tutto vantaggio in termini di prestazioni e velocità di caricamento delle applicazioni. Ovviamente se il server di Google va giù o, magari, viene violato, in un colpo solo verrebbero coinvolte le applicazioni di mezzo pianeta…
L’idea non è nuova visto che è la stessa strategia proposta agli sviluppatori da Yahoo! per la YUI Library: chi vuole usare la libreria nei propri progetti può far riferimento alle versioni hostate sui server di Yahoo!.
Al momento non c’è nulla di ufficiale da parte di Google, anche se sembra che qualcuno, sempre usando Google Code, ha per certi versi messo già in pratica l’idea.
Ciao,
Antonio
8 aprile 2008 alle 09:46 | Rispondi a Antonio Troise
[...] Prototype compressi per Wordpress per risparmiare banda e velocizzare il caricamento delle pagineCome risparmiare banda del proprio sito riducendo le dimensioni dei file javascript e attivando la c…Wordpress 2.1.3 e 2.0.10Sitemap.xml e gli Strumenti per i webmaster di GoogleWordPress Italy – Il [...]
8 aprile 2008 alle 12:45
[...] gli articoli che vi segnalo maggiormente c’è Come risparmiare banda del proprio sito riducendo…. e Comportamento anomalo nella copia via rete di singoli file tra Leopard e Windows. Buona [...]
6 settembre 2008 alle 11:59