Sei in » Home » Internet

7 Siti per comprimere file CSS e Javascript

Scritto da G. Meneghelli - Letto 4465 volte - Ultimo aggiornamento 07/12/2018

Servizi web per comprimere online fogli di stile CSS e codice Javascript per ridurne le dimensioni.

Introduzione

Per una migliore ottimizzazione dei tempi di caricamento di un sito web, può essere utile comprimere un file CSS o Javascript mantenendone inalterato la sua funzionalità.

Minify vs. Compression

Abbiamo due tecniche per risparmiare spazio con il codice: Minify vs. Compressione.
Minify altera il contenuto del codice e ne riduce le dimensioni eliminando spazi, caratteri, formattazione indesiderati e nidificando le regole possono per evitare la ripetizione di selettori che hanno una parte in comune. Il risultato di un file che ha meno caratteri del suo rispettivo originale e quindi occupa meno byte.
La compressione non altera necessariamente il contenuto del codice ma ne riduce le dimensioni del file compattando il file.

Esempi pratici

La compressione avviene togliendo tutti gli spazi e i ritorni a capo del file testuale.

Le applicazioni web proposte riducono le dimensioni del file che contiene il codice. Il risultato è un file testuale privo di spazi ed interlinee.

Per esempio:

Foglio di stile esteso:

/********************/
/*** INTESTAZIONE ***/
body {
FONT-FAMILY: verdana;
FONT-SIZE: 8px;
BACKGROUND-COLOR: #003366;
margin-left:auto;
text-align:center;
}
/* COMMENTO */

che diventa compresso:

body{FONT-FAMILY:verdana;FONT-SIZE:8px; BACKGROUND-COLOR:#036;margin-left:auto;text-align:center}

Dati compressione effettuata:
- byte prima compressione 182
- byte dopo compressione 97
- compression ratio 47%

(Test con YUI Compressor)

Ovviamente dovrete tenere il sorgente del file perché, con questo tipo di compressione, perderete la leggibilità del codice.

Se invece volete compattare il codice mantenendone la leggibilità e di conseguenza e la facilità di modifica, consiglio il sito CSS Optimize.
L'ottimizzazione può essere fatta su vari livelli: da compressione massima fino ad arrivare a compromessi tra ottimizzazione e leggibilità.

body {
    FONT-FAMILY: verdana;
    FONT-SIZE: 8px;
    BACKGROUND-COLOR: #003366;
    margin-left:auto;
    text-align:center;
}

Esempio di nidificazione delle istruzioni per evitare la ridigitazione di un selettore comune:

input:

.homepage {
color: #333;
background: white;
.content {
p {
font-size: 110%;
}
}

output:

.homepage {
color: #333;
background: white;
}
.homepage .content p {
font-size: 110%;
}

Siti per decomprimere CSS

Se vogliamo riportare un file CSS compresso (minify) in una versione più leggibile (unminify) possiamo utilizzare uno di questi siti:

Unminify2.com
Free tool to unminify JS, CSS, HTML online

Unminified
Online tool to unminify (uncompress or unpack) CSS, JavaScript and HTML code

Unminify.com
Free tool to unminify (unpack, deobfuscate) JavaScript, CSS, HTML, XML and JSON code, making it readable and pretty.

Web links

Dean.edwards.name/packer
Comprime codice CSS e Javascript online. Non richiede registrazione.

CSS Compressor
Servizio online per comprimere codice CSS. Non richiede registrazione. (iceyboard.no-ip.org)

CSS Compressor and Minifier
Servizio online di compressione codice CSS con molte opzioni. Per utilizzarlo basta incollare il codice all'interno del box e premere il pulsante 'Compress & Minify'.

Javascript compressor.com
Servizio online per comprimere codice Javascript. Non richiede registrazione.

Minify Javascript Compressor
Comprime online codice Javascript e JS. Non richiede registrazione.

Online JavaScript/CSS Compression Using YUI Compressor
Tool online basato su YUI Compressor per comprimere codice CSS/Javascript. Non richiede registrazione. (Refresh-sf.com)

JS & CSS Minifier
Compressore di file Javascript e CSS. La pagina è in italiano. (by Websiteplante.com)