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.

13 CommentiDi' la tua

Il tuo indirizzo email non sarà mostrato pubblicamente. I campi obbligatori sono contrassegnati da *

[...] 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. [...]

Il punto della settimana #19 « Francesco Corsentino .net
Il punto della settimana #19 « Francesco Corsentino .net

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 :-D M.

Marco Grazia
Marco Grazia

Giusta riflessione, ultimamente mi sono scontrato proprio con le foto e ho maledetto il mio lavoro di ottimizzazione su php!

Kiko
Kiko

Minify http://code.google.com/p/minify/ 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.

TaTaC
TaTaC

GzOutput per tutta la vita. Comprime, cacha e incorpora in un unico file css e/o javascript. dico solo che é di Andrea giammarchi...

Filippo buratti
Filippo buratti

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.

Andrea
Andrea

Ragazzi ho postato i link, ma il mio commento risulta in attesa di approvazione, forse perché ci sono dei link? mbo..

gianiaz
gianiaz

C'é un progetto su GitHub che fa esattamente quello proposto da gianiaz: http://github.com/Schepp/CSS-JS-Booster

Daniele De Nobili
Daniele De Nobili

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!

Kiko
Kiko

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-your-pages-load-faster-by-combining-and-compressing-javascript-and-css-files.html E qui il sorgente diretto: http://rakaz.nl/projects/combine/combine.phps Ciao :-)

gianiaz
gianiaz