Warning: Creating default object from empty value in /membri/ragnarokkr/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156

Warning: Creating default object from empty value in /membri/ragnarokkr/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156

Warning: Creating default object from empty value in /membri/ragnarokkr/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156

Warning: Creating default object from empty value in /membri/ragnarokkr/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156

Warning: Creating default object from empty value in /membri/ragnarokkr/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156

Warning: Creating default object from empty value in /membri/ragnarokkr/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156
Google Closure Vs. YUI Compressor: soluzioni per ottimizzare i propri siti web | Ragnarøkkr's Workshop

Guida

Nel blog è possibile leggere anche gli articoli provenienti dal mio vecchio sito Ragnarøkkr's Blog (categoria vecchi articoli).

Se desideri leggere l'articolo originale, clicca sul titolo del post.

Se vuoi leggere l'articolo direttamente da questo blog, clicca sul link accanto aContinua a leggere in fondo al riassunto dell'articolo.

Antipixel

  • BlogItalia - La directory italiana dei blog
  • Il Bloggatore
  • Smilla Magazine
  • Bloggers - Meet Millions of Bloggers
  • OnePlusYou Quizzes and Widgets
  • OnePlusYou Quizzes and Widgets

Advertise




Sito affiliato al network

Maruko [マルコ] Media

Altri siti affiliati al network

iNaSlice

Google Closure Vs. YUI Compressor: soluzioni per ottimizzare i propri siti web

google-vs-yahoo

Premessa

Dalla comparsa dei primi semplici siti web composti da pagine HTML statiche ad oggi, lo scenario ha subito un’enorme evoluzione e sviluppo. Oggi giorno i siti non sono più semplici pagine collegate tra di loro per mezzo di link, ma sono vere e proprie applicazioni distribuite sulla rete. Un insieme di fogli di stile, librerie Javascript, pagine HTML dinamicamente generate, via via sempre più complesso ed articolato.

Tutta questa complessità introdotta per rendere i siti web più user-friendly, creare interfacce più dinamiche e visivamente accattivanti, e aggiungere sempre più funzionalità, porta con sé un grande inconveniente: l’aumento, a volte anche piuttosto pesante, della quantità di codice e tempo necessari per il caricamento del sito stesso.

Il sito di Google.com nel 1998. Dimensione 2 KiB~

Il sito di Google.com nel 1998. Dimensione 2 KiB~

Il sito di Google.com nel 2010. Dimensione 34 KiB~

Se a questo si aggiungono le problematiche quali distanza, qualità delle connessioni, velocità dei server che ospitano il sito, e molti altri fattori variabili, si comprende facilmente come la necessità di rendere il più leggero e snello possibile il codice da scaricare, sia una parte fondamentale del processo di creazione di un sito web.

Scrivere il codice e verificarne la correttezza sono parti importanti nel processo di sviluppo, ma non sono le uniche. Proprio come per la struttura ed i colori che si andranno ad utilizzare in un sito bisogna scegliere attentamente quali strumenti e metodi usare, anche per l’ottimizzazione di un sito è necessario analizzare e scegliere attentamente quali metodologie e programmi utilizzare per ottenere validi risultati.

L’ottimizzazione del codice di un sito web, è un processo che può essere eseguito sia lato client (sul computer dello sviluppatore), sia lato server (elaborato dal server web prima di ritornare il risultato all’utente), oppure può essere una combinazione di entrambe (ripartendo in modo ottimale quali compiti devono essere eseguiti prima di caricare il codice sul server, e quali dovranno essere a carico del server web). Altri metodi si possono affiancare a questi, ma prevedono un approccio differente per l’ottimizzazione delle risorse.

In questo contesto si prenderà in esame l’ottimizzazione del codice lato client.

Yahoo! YUI Compressor

Questo programma da linea di comando, scritto in codice Java dai programmatori di Yahoo!, ha l’obbiettivo di comprimere il più possibile il codice Javascript e CSS presente in un file.

La compressione o minificazione (dal termine anglosassone minification) avviene eseguendo diversi passaggi sul codice, atti a valutare la metodologia più appropriata da applicare al sorgente analizzato. In linea generale, questo è quello che avviene quando si esegue il programma con un file Javascript:

  1. analisi della struttura del file sorgente (viene usato il motore di scripting Javascript Rhino, creato da Mozilla)
  2. rimozione di tutti i commenti (opzionale) e spazi vuoti inutili ai fini dell’esecuzione
  3. sostituzione di tutte le variabili locali con nomi di variabile lunghi da un minimo di 1 ad un massimo di 3 caratteri alfanumerici

Il terzo punto viene anche definito offuscamento del codice, dove in pratica si perde pesantemente in chiarezza di lettura del codice, ma si guadagna molto in termini di spazio occupato. Il programma, inoltre, cerca sempre di mantenere invariato il codice di quei costrutti del linguaggio, dove è noto che alterazioni potrebbero causare possibili errori di esecuzione, riducendo molto i possibili rischi, penalizzando minimamente le dimensioni finali del codice minificato.

Per quanto riguarda il codice CSS, invece, il programma sfrutta tutta una serie di espressioni regolari finemente ottimizzate per cercare di ridurre il più possibile lo spazio finale occupato dal foglio di stile.

YUI Compressor è open-source, quindi liberamente scaricabile ed analizzabile in ogni sua minima parte.

Interfaccia: linea di comando
Sistema operativo: Tutti quelli che supportano Java (dalla versione 1.4 in poi)
Versione attuale: 2.4.2 (1,6 MiB~)
Sito web: http://developer.yahoo.com/yui/compressor/

Google Closure Compiler

Questo compilatore, parte dei Google Closure Tools, va oltre ed invece di comprimere ed offuscare solamente il codice Javascript, ci mette anche del suo. Prende, cioè, il codice sorgente e lo ricompila in nuovo codice Javascript, rimuovendo tutte le parti di codice non necessarie, e successivamente comprimendo il tutto. Oltre a ciò, il compilatore esegue anche un controllo della sintassi, dei riferimenti alle variabili, e dei tipi di dati usati, avvisando prontamente ogni volta che incontra un problema.

A differenza del prodotto di Yahoo!, questo compilatore non funziona sui file CSS, ma alla fine di questo articolo è possibile trovare il link ad un servizio che permette di comprimere i file CSS. Oppure, più semplicemente, si possono abbinare entrambe le applicazioni di Google e Yahoo! per ottenere il miglior risultato.

Come per il compressore di Yahoo!, anche questo è scritto in linguaggio Java ed è disponibile come programma eseguibile da linea di comando. Inoltre, Google mette a disposizione lo stesso programma anche sotto forma di applicazione web oppure web service attraverso l’utilizzo di API pubbliche.

Interfaccia: linea di comando, applicazione web, API pubbliche
Sistema operativo: Tutti quelli che supportano Java (versione 6 o superiore richiesta)
Versione attuale: 20100917 (3,4 MiB~)
Sito web: http://code.google.com/intl/it-IT/closure/compiler/

Google Closure Compiler Vs. YUI Compressor

Per vedere la validità di entrambe i prodotti, è stata presa come test la famosa libreria jQuery nella sua ultima versione 1.4.4 non minificata, ed è stata compressa con entrambe i compressori. Questi i risultati ottenuti:

jQuery 1.4.4 originale non compressa: 183184 bytes

jQuery 1.4.4 originale non compressa: 183184 bytes

jQuery 1.4.4 compressa con Google Closure: 78234 bytes

jQuery 1.4.4 compressa con Google Closure: 78234 bytes

jQuery 1.4.4 compressa con YUI Compressor: 86849 bytes

jQuery 1.4.4 compressa con YUI Compressor: 86849 bytes

Come si può vedere, il margine di compressione è piuttosto elevato, attestandosi oltre il 50% in meno della dimensione originale, e senza l’utilizzo di alcuna ulteriore opzione di ottimizzazione dei rispettivi programmi. Ovviamente, come si può osservare dagli screenshot, tutto ciò a scapito della leggibilità (da qui deriva il termine offuscamento del codice).

Cosa molto importante da tenere a mente è di utilizzare questa procedura solo a test ultimati, in quanto il debugging del codice minificato risulterebbe molto difficoltoso e confusionario ma, soprattutto, verificare sempre che il codice minificato che andrà in produzione funzioni correttamente, in quanto questa procedura non garantisce al 100% che il risultato sia esente da problemi di esecuzione. Mai dare per scontato che se il sorgente originale funziona, anche il rispettivo file compresso funzioni altrettanto correttamente (cosa sempre più vera man mano che il progetto diventa più complesso).

Infine, facendo un test veloce su di un server in locale è possibile constatare quali siano gli effettivi vantaggi della compressione di file Javascript e CSS. Se poi si prova ad immaginare questo scenario, adattato alla realtà di un vero server web, dal quale non viene scaricato solo un file Javascript, ma decine di file tra JS e CSS, si capisce quale sia la vera forza di questo procedimento. Minor tempo di download, minor banda di rete utilizzata, maggior reattività del sito che diverrà operativo più velocemente, utenti finali meno stressati nell’attesa che il sito si carichi, miglior posizionamento nei risultati di Google.

Tempo di download jQuery 1.4.4 non compressa: 50ms

Tempo di download jQuery 1.4.4 non compressa: 50ms

Tempo di download jQuery 1.4.4 - Google Closure: 22ms

Tempo di download jQuery 1.4.4 - Google Closure: 22ms

Tempo di download jQuery 1.4.4 - YUI Compressor: 31ms

Tempo di download jQuery 1.4.4 - YUI Compressor: 31ms

Microsoft Ajax Minifier, CSS Compressor e PHP Code Compressor

Per completezza, segnalo anche Microsoft Ajax Minifier (attualmente alla versione 4.0) che fornisce un’applicazione console eseguibile da linea di comando capace di comprimere sorgenti Javascript e CSS, e offre inoltre la possibilità di essere incorporato all’interno della suite Visual Studio, più questi due progetti: CSS Compressor & Minifier e PHP Code Compressor.

Il primo è un servizio online che permette di comprimere il codice CSS secondo i parametri impostabili dall’utente, mentre il secondo è uno script PHP installabile in locale o su di un server remoto, che permette di comprimere i sorgenti scritti in PHP, rimuovendo commenti e spazi vuoti, ma senza offuscare il codice sorgente.

[EDIT]

Aggiungo anche i link a Javascript Compressor e Online JavaScript/CSS Compression Using YUI Compressor segnalati da Joel (grazie :) ) in modo da darvi la possibilità di valutare anche questi due servizi.

Conclusione

Quel che è stato esaminato qui è solo una minima parte di ciò che è possibile fare per ottimizzare il proprio sito web. Altre soluzioni, ad esempio, prevedono che la compressione avvenga direttamente lato server, in modo totalmente trasparente per l’utente finale.

Per ora vi lascio a sperimentare queste ottime applicazioni, e se qualcuno desidera commentare per testimoniare l’effettiva validità di questo approccio in qualche suo progetto, è il benvenuto. Buona programmazione! :)


  • Joel

    Personalmente uso questo, per quanto riguarda i .js

    http://javascriptcompressor.com/

    e quest’altro per quanto riguarda i CSS

    http://refresh-sf.com/yui/

    l’ultimo è basato sull’YUI compressor e funziona anche con i .js ma ho riscontrato qualche problemino quindi l’ho abbandonato in favore del primo. Proverò anche quello di google, dato che pare più performante. Grazie per la dritta ;)

  • http://ragnarokkr.altervista.org/ Marco Trulla

    Ciao Joel,

    sì è vero, le applicazioni offerte da Google e Yahoo! sono piuttosto performanti e, con le dovute regolazioni che i molti parametri permettono, si possono ottenere degli ottimi risultati.

    Purtroppo, come anche tu fai notare, non è tutto oro quello che luccica, e qualche problema nella fase di minificazione, come avevo sottolineato anch’io nel articolo, può insorgere, quindi rinnovo il consiglio di controllare sempre il risultato di quest’operazione prima di procedere alla pubblicazione online.

    Grazie mille per i link (che aggiungerò all’articolo) e per la tua visita :)