Sei in » Home  » Internet
Scritto da G. Meneghelli - Letto 4084 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:

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

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

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






Web links




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


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


call_made 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'.


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


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


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


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








Altri articoli consigliati




  Strumenti per generare automaticamente codice CSS








Giampietro Meneghelli
Lidweb.it
Ultimo aggiornamento: 07/12/2018





Tags: Internet, Programmazione, CSS, JS, JAVASCRIPT, Compress





  Articolo precedente


Guide e tutorial online su Classic ASP .NET SQL

  Articolo successivo


13 Strumenti on line per l'analisi di siti web