Oggi ragionavo sul fatto che nelle mie interfacce grafiche faccio un uso massiccio di gradienti, bordini di un 1px di dimensione e piccole altre tecniche per aumentare il contrasto tra gli elementi e dargli un aspetto un po’ più 3d.
Questo approccio, sebbene mi soddisfi a livello di risultato finale, in termini di complessità della proposta grafica la aumenta di molto trasformando la conversione in HTML talvolta in un piccolo incubo. L’affermazione “Dio sta nei dettagli” quando hai da finire il lavoro entro… ADESSO! è difficilmente accettabile (più volte inaccettabile) e si finisce per omettere qualche particolare chiudendo entrambi gli occhi.
Fortunatamente la situazione tecnica si semplifica (vedremo eh, proviamo a fare un gradiente multiplo in CSS…) sempre di più e con CSS3 un buona parte di quegli effetti sarà possibile riprodurla tramite il foglio di stile.
Oltre a semplificare la conversione della grafica, sicuramente anche la dimensione della pagina finale HTML ne beneficerà non dovendo scaricare tutto quel contenuto di immagini. Al contrario però il peso dei CSS andrà ad aumentare.
Molto si è parlato dell’ottimizzazione delle pagine web ultimamente e risolte le sottigliezze tecniche su JS e numero di richieste HTTP contemporanee, le vere panacee sono un buon utilizzo del caching (di cui max ci ha già parlato) ed avere la possibilità di comprimere durante la trasmissione CSS, JS e HTML tramite gzip.
Il concetto è semplice: il browser quando fa una richiesta al server indica attraverso ad un header (Accept-encoding) che è in grado di interpretare contenuto compresso e compresso con quale algoritmo. Il server legge questa informazione e se trova compatibilità di argomenti comprime il contenuto e lo manda al browser con dimensioni notevolmente ridotte (si parla credo del 30% dell’originale, alla fine si tratta di testo…).
Mi stavo appunto informando su questo argomento quando mi sono imbattuto in un articolo che parla del fatto che nonostante “tutti” i browser abbiano questa capacità, circa il 15% degli utenti (dati estratti da Google) manda un header non appropriato alla reale capacità del loro browser e la conseguenza è che il server non comprime i contenuti. Bhé, visto che la banda è tutto, qualcuno in Google ha ben pensato che forse tutto questo spreco è inutile e ha deciso di trovare un modo per evitarlo forzando la compressione.
In pratica solo se il browser manca di mandare l’informazione di compressione, la pagina caricata crea un IFRAME che richiede al server un documento SEMPRE compresso. Se il browser non riesce a leggerlo, ok, ci hai convinti, non sei capace, se invece riesce a leggerlo, ecco che le chiamate successive al server verranno automaticamente compresse al di la di quello che afferma il tuo browser.
Questa cosa non so perché mi ha in qualche modo affascinato nella sua perfezione di ragionamento (e ciò dovrebbe indicare il mio attuale stato mentale). Detto questo, augurando al mondo che l’ottimizzazione non diventi un fanatismo mi chiedo se scrivere testualmente un gradiente in CSS (che come avrete capito è la mia ossessione) talvolta non sia più dispendioso che creare un’immagine di 1px di largezza e alta 20px per poi ripeterla all’inifinito in modo un po’ vintage e creare proprio un bel bottone 🙂
Mah ahimè da tempo mi sono arreso al fatto che in verità non è nelle mie possibilità controllare tutto questo. It’s the evolution baby!
