Dopo gli articoli “ridurre le richieste HTTP (parte 1): come utilizzare la cache del browser” e “ridurre le richieste HTTP (parte 2): come unire e combinare immagini, script, css” vorrei parlarti delle tecniche per l’ottimizzazione dei componenti più comuni di una pagina web: immagini, script e css.

In questo articolo non verranno descritti dei metodi per la riduzione delle richieste HTTP ma parlerò delle modifiche e degli strumenti che ti permetteranno di ottimizzare i componenti della pagina per velocizzarne le relative richieste HTTP.

Ottimizzare le immagini

Anche se l’ottimizzazione non riduce le richieste http, è comunque importante per abbassare i tempi di caricamento delle pagine.

Ottimizzare un’immagine non è immediato; spesso sono necessarie molte prove e test per individuare il giusto bilanciamento fra qualità e dimensione del file.

Generalmente la compressione di un immagine è un’operazione da eseguire manualmente prima di caricare l’immagine nel proprio sito. Per fare ciò esistono numerosi script e tool gratuiti. Eccone alcuni.

Compressione di file CSS e Javascript

Questa pratica (in inglese chiamata “minification”) consiste nel rimuovere dal codice tutti i caratteri non necessari in modo da ridurre la dimensione del file. Tecnicamente avviene quanto segue:

• vengono ristretti i nomi di variabili
• caratteri di spaziatura come tab, a capo e spazio vengono eliminati (dove possibile)
• vengono cancellati tutti i commenti

ATTENZIONE. Dopo la compressione il funzionamento degli script e i nomi delle funzioni rimangono invariati, quindi non è necessario modificare i file di template. In altre parole, i nomi delle variabili che vengono modificati sono i parametri locali delle funzioni, che non influenzano la modalità di chiamata delle funzioni.

Offuscare il codice Javascript

Offuscare il codice (in inglese “obfuscate”, “obfuscation”) significa comprimerlo e trasformarlo in modo che risulti illeggibile (per i programmatori) per evitare che venga effettuato il cosiddetto reverse engineering, il procedimento attraverso cui è possibile leggere, capire ed utilizzare il codice di uno script.

PRO: si raggiunge un ottimo livello di compressione, riducendo notevolmente la dimensione dello script.

CONTRO: è un procedimento molto complesso attraverso cui si rischia di generare bug e malfunzionamenti; pertanto si consiglia di limitarsi esclusivamente a comprimere il codice anziché offuscarlo.

Servizi web, librerie, software

Ecco un po’ di strumenti e servizi web per la compressione e l’offuscamento di file Javascript e CSS. Inizialmente trovi quelli riguardanti Javascript; in basso potrai vedere tutti quelli per la compressione di CSS.

YUI Compressor

YUI Compressor è la più famosa libreria (open source) per la compressione di file CSS e Javascript. La compressione Javascript elimina commenti, caratteri di spaziatura e accorcia i nomi delle variabili. La compressione CSS utilizza un compressore basato su espressioni regolari.

JSMin

JSMin è un filtro che rimuove commenti e caratteri di spaziatura dai file Javascript. Generalmente la dimensione del file viene dimezzata. Questa libreria incoraggia i programmatori a esprimersi liberamente evitando che si preoccupino di risparmiare spazio. In fondo alla pagina puoi trovare i link per scaricare l’eseguibile MS-DOS.exe oppure i codici sorgenti in C, C#, Java, JavaScript, Perl, PHP, Python, OCAML, Ruby.

DojoToolkit ShrinkSafe

Dojo, il famoso toolkit javascript, utilizza uno strumento per ridurre la dimensione, e quindi il tempo di caricamento, dei file Javascript. La particolarità sta nel fatto che invece di ricorrere alle solite espressioni regolari, Dojo Compressor è basato su Rhino, un javascript engine del progetto Mozilla. Quindi, poiché legge il flusso effettivo del codice javascript, può avere una visione migliore del contesto in cui una variabile viene letta e/o scritta, rispetto alle espressioni regolari.

Packer

Semplice servizio web per la compressione e l’offuscamento di codice Javascript. La libreria è disponibile anche per PHP e .NET. Download: http://dean.edwards.name/download/#packer.

JavaScript Obfuscator and Minifier

Librerie PHP per l’esecuzione da riga di comando. Richiedono la versione 5.2 (o superiore) di PHP CLI binary. Windows non è supportato e, a detta dello sviluppatore, non lo sarà mai.

jsobf: compressa e offusca codice Javascript.

jsfmt: effettua il processo inverso su un codice che ha subito compressione e offuscamento.

Download: http://web.2point1.com/2008/09/07/jsfmt-and-jsobf-available-for-download/.

Demo: http://timwhitlock.info/plug/examples/JavaScript/j_obfuscate.php.

SmartOptimizer

SmartOptimizer (precedentemente chiamata JSmart) è una libreria PHP che si occupa di comprimere, offuscare, memorizzare in cache, fondere più file o stampare gli script direttamente nella pagina.

pack:tag

Libreria JSP che compressa e combina risorse (come Javascript e CSS) e li memorizza nella cache del browser o in un file generato dinamicamente. Questo script si può inserire facilmente all’interno delle pagine e lavora in maniera trasparente sia all’utente sia allo sviluppatore.

ObfuscateJS

Progetto Java per la compressione e l’offuscamento di codice javascript. Si occupa di rimuovere caratteri di spaziatura e commenti, e di accorciare i nomi delle variabili locali.

JsCompress

Servizio web per la compressione di codice javascript. Si può scegliere di eseguire la compressione con JsMin o con Packer. Molto interessante.

Javascript Minifier

Servizio web (basato su JsMin) per la compressione di codice javascript. Puoi decidere se effettuare direttamente il download oppure visualizzare il risultato in una textarea.

Free Javascript Obfuscator

Servizio web che si occupa di comprimere e offuscare codice javascript. Offrendo diverse opzioni ti lascia libero di decidere completamente l’aspetto finale del codice.

Online Javascript Obfuscator

Servizio web per la compressione e l’offuscamento di codice javascript.

PHP CSS Compressor

In questo articolo vengono fornite alcune righe di codice PHP da inserire direttamente nei file CSS. Questo codice provvede automaticamente alla compressione del contenuto del file CSS. In fondo all’articolo vengono descritte le modifiche da apportare al file .htaccess in modo che il file .css venga elaborato come file .php.

CSS Compressor

Servizio web per la compressione di codice CSS. L’applicazione è un’applet Java.

CSS Tidy

Software, eseguibile da riga di comando, per la compressione di file CSS. La pagina del progetto è completa di tutta la documentazione necessaria per iniziare a utilizzarlo.

Conclusione

Imparare a utilizzarli tutti è impossibile. Quindi, prima perder tempo tra download e righe di codice ti consiglio di analizzare il tuo sito per individuare i componenti che ne influenzano maggiormente le prestazioni.

Ad esempio, se il tuo sito è una galleria di immagini gestita con un paio di file javascript la cosa migliore da fare è scegliere il miglior tool per ottimizzare le foto, considerando anche il loro formato. Se, invece, hai un sito dinamico che fa un largo uso di javascript e tecniche Ajax, comprimere (e offuscare) il codice dei tuoi file javascript sarà fondamentale per migliorare il caricamento e la reattività del tuo sito web.

Crediti

• Yahoo! Developer Network – Best Practices for Speeding Up Your Web Site
• Foto1: forty-nine: compressed work week di dead_squid
• Foto2: fog over Istanbul skyscrapers di WhatCouldPossiblyGoWrong?
• Foto3: MAGNIFYING GLASS di andercismo