Salve a tutti
E' un pò di tempo che vi seguo ma non ho mai avuto il tempo di scrivere.
Dunque, ho deciso di fare questa "guida" (per modo di dire) sul come comprimere e/o pulire il codice html e css.
Chi, come me, ha pagine di 400/500 righe tra Javascript, CSS e Html sa benissimo quanto sia importante comprimere il codice il più possibile. In un sito dinamico poi il problema viene amplificato due volte.
Quindi, di seguito, elencherò i metodi che conosco per comprimere e pulire l'html e i css.
Innanzitutto, la prima cosa da fare è validare tutte le pagine del proprio sito -che siano HTML o XHTML- passandole al w3c validator, mezzo che bene o male conoscete tutti.
La stessa cosa vale anche per i css.
Una volta fatto, passiamo all'ottimizzazione vera e propria:
CSSTidy
CSSTidy è il fratello del celebre HTMLTidy (di cui parlerò più avanti).
La funzione che svolge è quella di comprimere il css raggruppando i selettori, comprimendo le proprietà (es. background), rimuovendo l'ultimo punto e virgola e così via.
Tutto questo può essere fatto direttamente online, e precisamente a questo indirizzo.
Per farlo partire basterà incollare il css nella textarea a sinistra o inserire l'indirizzo del css vicino "CSS from URL:" e premere su "Process CSS".
Prima però ci sono delle impostazioni (a destra) da settare.
In particolar modo se utilizzate degli hack come il box model o volete conservare i commenti, dovete spuntare "Preserve CSS" (che in compenso eliminerà molte delle ottimizzazioni possibili).
Le altre impostazioni si spiegano da sole.
Queste sono le impostazioni che utilizzo io:
Compression (code layout): High (o Highest quando so che non lo modificherò più)
Sort properties, Compress colors, Compress font-weight, Remove unnecessary backslashes, Remove last ; SI
Preserve CSS, Sort selectors NO
le altre sono più comodità che vere ottimizzazioni.
Una volta fatto, controllate il nuovo css e salvatelo.
Comprimere le pagine html con GZip
Non starò a spiegare cos'è gzip o come funziona la compressione "al volo" con mod_gzip perchè sarebbe un discorso troppo lungo. Quindi andrò direttamente alla pratica, ovvero "come comprimere le pagine con gzip via php senza conoscere php".
Comprimere le pagine via gzip è utile sia a diminuire il traffico del vostro sito che a mandare pagine molto più leggere al client. Il difetto principale (l'unico, in verità) è che il continuo comprimere/decomprimere occupa la CPU sia del server che del client. Ma IMHO i pregi sono di molto superiori ai difetti e questo problema si pone raramente.
Comprimere le pagine è facilissimo via php, l'unica cosa che dovete fare è cambiare l'estensione delle vostre pagine da .html a .php e aggiungere questo codice all'inizio di ogni pagina che volete comprimere:
"GIA' FATTO?!! INCREDIBILE!"Codice PHP:<?php
ob_start("ob_gzhandler");
?>
Ebbene, sì.
Ovviamente per farlo funzionare il vostro server deve avere php e l'estensione php_gzip installate ma praticamente il 98.9% degli hosting ce l'hanno, compreso qualcuno free (altervista, netsons...).
Comprimere i css con GZip e gestire la cache
Comprimere i css con Gzip è più difficile perchè i browser non riconoscono un css se salvato come php senza l'header adatto.
Vi dico subito che Netscape 4 non decomprime correttamente i css compressi con gzip, quindi per farlo funzionare vi servirà un secondo css non compresso e un browser sniffing in javascript o php.
Anche se non so se ne vale veramente la pena
Quindi, una volta salvato il css come file php dovete aprirlo e aggiungere questo codice prima di ogni altra cosa:
Codice PHP:<?php
ob_start("ob_gzhandler");
header("Content-type: text/css; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?>
Che non è altro che una rivisitazione del primo con l'aggiunta dell'header giusto (content-type: text/css) e della gestione della cache che potete modificare come vi pare cambiando 60 * 60.
Adesso, per farlo "digerire" alla pagina html dovete importarlo usando @import (ma dai?), ovvero:
Ottimizzare e pulire il codice con HTML Tidycodice:<style type="text/css"> @import url(nome_css.php); </style>
HTML Tidy è un software consigliato dal W3C per "pulire" il codice HTML/XHTML. Potete scaricarlo cliccando qui.
Per una pulizia veloce potete utilizzarlo online andando al validator del W3C mettendo il segnetto di spunta a "Clean up Markup with HTML Tidy".
Ho finito, se conoscete altri metodi postateli qui.
Consigli:
1)Importate sempre il css (con <link> o @import) e non inseritelo direttamente nell'head così che nel caso modificaste la pagina il css rimarrà nella cache.
2)Raggruppate i selettori se sono parecchi e hanno tutti almeno 2 o 3 valori uguali
3)Le tabelle sono tabelle, servono a raggruppare valori non a creare layout... cercate di utilizzare i div, sono molto più leggeri e richiedono anche molto meno codice.
4)Utilizzate gli Javascript in modo strategico (preload e via dicendo)
5)Eliminate tutti i <font> e via dicendo e utilizzate i CSS
E non dimentichiamoci Ajax, lo sto studiando da poco ma sta diventando pian piano il mio miglior amico
Spero di esservi stato utile.
Ciao
Rispondi quotando
