Olimpo Informatico

[rebelia]

prendo spunto dalla seconda sfida dell'olimpo per vedere come e' stato possibile in quei lavori risparmiare preziosi bytes, alleggerendo anche di parecchio il lavoro, senza penalizzare il risultato finale

codice
e' possibile risparmiare un bel po' di peso o creando le pagine attraverso un linguaggio dinamico per chi ne e' capace, oppure usando le inclusioni (vedere link a fondo pagina) per riutilizzare in tutte le pagine le parti comuni come ad esempio l'header, il footer ed il menu

decorazioni
usando decorazioni squadrate, senza sfumature ed ombreggiature, e' stato possibile aumentare anche di molto la percentuale di compressione; e' utile fare delle prove per vedere quale tra le estensioni piu' usate (jpg, gif e png) permette il miglior rapporto qualita'/peso, perche' non sempre e' facile determinare in anticipo quale sia la scelta migliore

immagini
per forza di cose le immagini sono state usate poco, perche' richiedono un sacco di peso, soprattutto se rapportato alla quantita' totale a disposizione; anche qui e' utile valutare bene quale sia la dimensione ottimale per avere un'immagine decorosa (cioe' che non vadano perduti troppi particolari) e quale la compressione piu' adatta per non perdere troppi particolari; e' IMPORTANTE ridimensionare le immagini PRIMA di caricarle nel sito e non attraverso la dichiarazione delle dimensioni nel codice!

nel senso: se ho uno spazio da 300x150 pixel e' meglio ridurre la foto a quelle misure prima di caricarla nel sito anziche' caricare un'immagine piu' grande e poi "obbligarla" a prendere quelle misure dando altezza e larghezza nel tag img oppure nel css, perche' il peso rimarrebbe alto senza alcun guadagno estetico, anzi spesso - se le proporzioni non sono corrette - si rischia di ottenere un'immagine distorta

eventualmente si puo' inserire nel layout una miniatura o cmq una versione ridotta dell'immagine e poi dare la possibilita' di visualizzarne o scaricarne una versione a definizione piu' alta a chi fosse interessato (nel caso e' un servizio utile segnalare il peso dell'immagine linkata)

colori ed effetti speciali
tutto quel che e' possibile colorare via css fa risparmiare peso, perche' il codice pesa *sicuramente* meno di qualsiasi gif per quanto leggera sia! a seconda del layout che abbiamo in mente, si ottengono effetti interessanti anche annidando piu' div l'uno nell'altro oppure giocando con l'effetto hover (per ora solo a:hover, non essendo hover supportato da ie per altri elementi)

trucchi
il codice e' stato concentrato su una sola riga: ogni a-capo e' un carattere in piu' da conteggiare!

ai files sono stati dati nomi composti da un solo carattere

i testi sono stati curati in modo da usare il minimo delle parole, senza stravolgere il senso del discorso

per le immagini che si fondevano con lo sfondo, sono stati scelti colori websafe (vedi tabella a fondo pagina), in quanto rimangono piu' uguali a se stessi dopo la compressione; per evitare fastidiosi stacchi, e' opportuno fare qualche prova con piu' browsers e possibilmente con piu' monitor (basta caricare in rete il lavoro e mandare il link ad un paio di amici che ci segnaleranno eventuali problemi)

***

anche senza arrivare ai limiti escogitati per i lavori qui sopra (un nome da un solo carattere non e' una buona scelta), creando un sito e' importante curarne accuratamente il peso ed un esercizio come quello della sfida permette di scoprire non solo i trucchi per migliorare le prestazioni, ma anche i punti deboli dei lavori, dove va "sprecato" il maggior peso e dove invece si riesce a risparmiare

questo perche' malgrado le connessioni veloci siano sempre piu' numerose, esistono ancora molte persone che si connettono con il modem a 56k e comunque un sito veloce a scaricare e' sempre molto gradito: chiarezza, ordine e leggerezza valorizzeranno al meglio i nostri contenuti

***

tabella websafe: si tratta di 216 colori che si considera rimangano uguali a se stessi su qualsiasi piattaforma; cio' era vero soprattutto con le vecchie schede a 256 colori, ora un po' meno con l'aumento esponenziale delle nuove schede video, ma - come si e' visto - esistono occasioni in cui sapere quali sono questi colori puo' tornar utile

cliccate sull'immagine per ottenere la versione ingrandita, che puo' essere salvata in locale per consultazione; quelli segnati sono i relativi colori esadecimali utilizzabili nel codice/nel css; in quest'ultimo caso e' possibile contrarre i codici nel caso di caratteri uguali a coppie: ad esempio, #ffffff diventera' #fff, #cc0000 diventera' #c00 e #33cc66 diventera' #3c6



per chi invece fosse interessato agli includes, se ne e' parlato qui e qui, mentre in questa discussione si e' parlato di asp e php, i linguaggi normalmente usati per creare le pagine web dinamiche

segnalo anche questo utilissimo sito che permette di controllare esattamente quale sia il peso della pagina e restituisce un rapporto che indica sia il tempo di scaricamento alle varie velocita' che il peso diviso per immagini, codice, css; le pagine sono valutate una ad una

per chi usasse l'estensione web developer di firefox, il link si trova sotto tools - view speed report

[mirrors]

Grazie
Molto interessante ed utile.
Che ne pensi di quei programmi che compattano il codice?
Qualche webmistress me ne ha sconsigliato l'uso.
Certo il codice indentato è più leggibile ma, come dici...
Un abbraccio.
Giorgio
PS: Dove hai preso la tabella per i colori con il codice esadecimale? Grazie ancora

[rebelia]

grazie a te

la tabella l'ho recuperata da qualche parte in rete, scusa ma non ricordo proprio dove

per quanto riguarda la compattazione del codice, te lo sconsiglio vivamente: e' un buon esercizio per rendersi conto di dove si puo' risparmiare, ma ti assicuro che ci sono sistemi molto piu' efficaci e che non inficiano un eventuale rimaneggiamento delle pagine

nelle prove fatte non ci sono stati grossissimi problemi soprattutto perche' stiamo parlando di pagine veramente piccole, ma se inizi ad avere pagine un po' piu' lunghe c'e' da impazzire!Q

se davvero vuoi risparmiare peso, lavora piuttosto con i css (formattazione tutta esterna) e sull'ottimizzazione delle immagini

[mirrors]

Grazie.
I CSS esterni sono una gran cosa, è vero.
Però, almeno posso eliminare qualche spazio nel codice..no?
La pagina non è poi così grande.
Un abbraccio.
Giorgio

[rebelia]

beh, togliendo spazi qua e la' puoi, ma il "guadagno" e' davvero risibile; valuta tu se ti conviene, in linea di massima secondo me no, perche' io l'ho usato per recuperare bytes, quindi unita' di misura davvero infinitesimali considerando che ci vogliono 1024 bytes per un kb

secondo me rischi di avere piu' disagi che guadagni da una scelta simile