Sull’uso dei compressori di codice CSS e Javascript
Lunedì 22 Febbraio 2010 - 08:29
di Kiko
Le applicazioni web diventano sempre più complesse e sempre più potenti. Dietro la potenza (molto apprezzata dagli utenti) e dietro la complessità del codice c’è molto lavoro e molto codice. In particolare, la necessità di offrire all’utente tanta interazione si traduce nell’uso di moltissimo codice Javascript, sempre più legato a framework e librerie. Se non si programma in modo attento si rischia di rendere le web application molto pesanti e quindi anche molto lente, perdendo nella pratica tutti i vantaggi che deriverebbero da queste nuove tecnologie.
Una soluzione, lontana però dagli argomenti squisitamente tecnici e che fin qui pare funzionare in modo dignitoso, riguarda i compressori di codice. Il loro lavoro è semplice: prendere il sorgente originale, eliminare tutti i caratteri non necessari (spazi bianchi in primis) mantenendo intatta la funzionalità del codice. Si riesce così a risparmiare un po’ di kilobytes a tutto vantaggio dei tempi di download delle pagine web. Un discorso equivalente si può fare pure per i CSS.
Dal momento che, usando un framework, la tendenza è quella di affidarsi alla versione minificata dello stesso, comprimete il codice CSS e Javascript da voi prodotto? E se sì ottenete reali benefici?
Sarebbe anche interessante capire quale delle tante soluzioni disponibili per la compressione è quella che ritenete più valida. Al riguardo segnalo a chi non lo conoscesse uno strumento chiamato CompressorRater che consente di svolgere dei test comparativi tra i principali compressori Javascript.
Categoria: CSS, Scripting | Permalink
Commenti
1
Io da anni oramai uso uno script php fatto in parte da me e in parte scopiazzato, al quale passo i nomi dei file css e js, questo li incorpora in un unico file minimizzato e gzippato, poi il file viene salvato in una directory di cache, e se non cambiano i files viene letto sempre quello.
A parte il risparmio di kbyte la cosa che va evidenziata è che viene fatta un’unica richiesta per i css e una per i js, perchè oltre al discorso spazio, proprio a causa dell’utilizzo di framework le cui funzionalità vengono estese dai plugin c’è il rischio di trovarsi una decina di chiamate get solo per il javascript, e anche se ogni file è minimizzato e quindi poco pesante da scaricare, causa comunque un’attesa lunga a causa delle innumerevoli chiamate, le quali hanno necessariamente un tempo di latenza dovuto alla richiesta e alla risposta del server.
2
wow, gianiaz
perchè non linki un bel zip con questo script e ce lo fai scaricare?# - postato da user - 22 Febbraio 2010 - 11:00
3
Mi accodo a @user ;-)
Che ne dici di condividere questa risora @gianaz? Ti scoccia?
Grazie, in ogni caso ci hai dato un ottimo spunto di riflessione.
# - postato da daweb - 22 Febbraio 2010 - 11:29
4
Ciao ragazzi, non per non darvi il mio codice, ma oramai è integrato nel mio cms e fa dei riferimenti a percorsi e classi che sarebbe assurdo includere solo per questo compito, vi posso dare però l’articolo e lo script originale dai quali sono partito, e che sono perfettamente funzionanti da soli.
La risorsa è vecchiotta, quindi sicuramente è uscito di meglio, ma fa il suo sporco dovere in un unico file :-)
Qui l’articolo : http://rakaz.nl/2006/12/make-y.....files.html
E qui il sorgente diretto: http://rakaz.nl/projects/combi.....mbine.phpsCiao :-)
5
L’idea di @gianiaz mi pare eccellente. Non avevo infatti considerato le richieste GET. Mi sa che devo provare anche io questa strategia e valutarla con YSlow!
6
C’è un progetto su GitHub che fa esattamente quello proposto da gianiaz:
http://github.com/Schepp/CSS-J.....S-Booster# - postato da Daniele De Nobili - 22 Febbraio 2010 - 12:22
7
Ragazzi ho postato i link, ma il mio commento risulta in attesa di approvazione, forse perchè ci sono dei link? mbo..
8
Io uso Jquery con il framework MVC Jamal, più qualche plugin e il codice scritto da me. Considerato che il vantaggio di un framework MVC è di tenere separate le viste dai modelli e dai controllori, alla fine mi ritrovo con una ventina di file. Se li includessi separatamente, il numero di richieste schizzerebbe in orbita. Ho fatto un helper e una shell per integrare Jamal con CakePHP che mi permettono d(fra le alter cose) di prendere tutto e comprimerlo in un unico file con Packer. Appena ho tempo dovrei postarlo sulla Bakery.
# - postato da Andrea - 22 Febbraio 2010 - 14:22
9
GzOutput per tutta la vita.
Comprime, cacha e incorpora in un unico file css e/o javascript.
dico solo che è di Andrea giammarchi…# - postato da Filippo buratti - 22 Febbraio 2010 - 14:56
10
Minify
http://code.google.com/p/minif.....y/E’ tanto semplice quanto completo, sia nella parte js che css. Sin integra con una semplitià pazzesca e gestisce la cache.
Io mi domanderei per quali siti ha senso una cosa del genere, nonostante sia un sostenitore a volte basterebbe usare con discrezione framework css e javascript.
Conviene ammazzarsi nel risparmiare 30Kb quando spesso i grafici non si curano di dare la giusta compressione alle foto? e L’uso degli sprite per ridurre le chiamate?
Se sto facendo un portale dove ho centinaia di accessi al giorno è un discorso, ma per il sito di un’azienda con 100 visite al giorno? Magari chi ha un server proprio o un’housing è più sensibile a queste tematiche visto che il discorso banda ha anche risvolti economici.
Naturalmente se lo si integra nei propri framework/cms la cosa diventa automatica e quindi non costa fatica.
# - postato da TaTaC - 23 Febbraio 2010 - 10:03
11
Giusta riflessione, ultimamente mi sono scontrato proprio con le foto e ho maledetto il mio lavoro di ottimizzazione su php!
12
Concordo anche io con quanto dsetto da TaTaC, se poi ci metti pure che spesso codice Javascript scritto male blocca il PC per parecchio tempo, sembra che questi sistemi siano inutili.
Epperò un paio di link me li sono copiati pure io :-DM.
# - postato da Marco Grazia - 24 Febbraio 2010 - 18:34
13
[…] Su HTML.it continuano le piccole riflessioni. Questa settimana ho preso di mira i compressori di codici Javascript e CSS e l’ottimizzazione di PHP. […]
# - postato da Il punto della settimana #19 « Francesco Corsentino .net - 27 Febbraio 2010 - 07:33