Salta il menu

Occhio al peso!

Notizia del 26/04/2007

Gironzolando per la rete, mi sono imbattuta in un sito che mi ha lasciato a bocca aperta e non per la grafica o i contenuti, ma perché la barra di stato continuava a macinare non solo kilobytes su kilobytes, ma addirittura megabytes su megabytes!

Ora: lavorando in internet ho sottoscritto un abbonamento flat abbastanza veloce e ho potuto permettermi di attendere senza troppi patemi la fine del caricamento della pagina, ma penso ai poveri utenti che ancora navigano a 56k - e credetemi ce ne sono! Dove abito io l'ADSL copre solo in parte il territorio - e che decidono di cliccare il link che porta a questo sito: c'è di che svenarsi per pagare la bolletta :D

Attenzione al peso delle pagine web!

Qui sopra la schermata della barra di stato con la freccia che indica il peso (oltre 12mb) e il tempo (quasi 3 minuti); in alto la mia connessione.

***

Naturalmente non dirò di che sito si tratta, non mi pare corretto (forse neanche riuscirei più a tornarci, visto che era navigazione casuale), ma vorrei prendere spunto da questa piccola [dis]avventura per tornare a parlare dei sistemi per risparmiare peso e dei metodi di controllo a nostra disposizione per evitare tali grossolani errori.

  • Il codice: cerchiamo di eliminare codice inutile (per la cella di una tabella ci vogliono tre tag, per un div ne basta uno) e di esportare tutto quel che si può, come per esempio css e Javascript.
  • Le immagini: verifichiamo sempre il peso delle immagini e chiediamoci se serve caricarla così grande oppure se la possiamo ridurre; inoltre vale sempre la pena di fare un controllo incrociato salvando - almeno la prima della serie, tanto per renderci conto del risultato - nei tre formati .jpg, .gif e .png: anche se siamo abituati a considerare il formato png più pesante, non sempre ciò è vero e vale la pena di verificarlo, scegliendo poi il formato che ci da il miglior rapporto qualità/peso. Ricordo che con .jpg si può risparmiare peso aumentando la percentuale di compressione, mentre con .gif lo si può fare diminuendo il numero dei colori: praticamente tutti i programmi di grafica e fotoritocco forniscono il controllo di queste voci tra le opzioni avanzate di salvataggio.
  • Grafica del sito: se sappiamo a priori che le immagini saranno una parte predominante del nostro sito, vale la pena di studiare una grafica il più leggera possibile, in modo da non appesantire ulteriormente le pagine. Qui un esempio di sito dove le foto la fanno da padrone e la grafica è stata volutamente mantenuta ai minimi termini.
  • Verifiche:
    • a differenza di quanto succede in altri campi, il modo migliore per verificare la bontà di un sito è di navigarlo nelle peggiori condizioni possibili, perciò cercate di testarlo con un vecchio pc e una connessione lenta: avrete immediatamente la percezione della leggerezza o meno delle pagine;
    • verificate tramite gli appositi servizi: in rete ci sono dei siti che pesano letteralmente la pagina e vi danno un responso immediato sullo stato dell'arte: sto parlando principalmente di websiteoptimization.com, per chi usa la Web Developer Toolbar di Firefox comodamente disponibile tra i Tools (voce View Speed Report: premendola, la pagina visualizzata è spedita al controllo); non escludo - anzi ne sono certa - che ci siano altri servizi simili in rete, ad ogni modo questo è utilizzabile anche direttamente postando l'url della pagina che intendiamo controllare.
  • Oggetti: se utilizzate elementi in Flash o altro (gallerie fotografiche etc), cercate di smembrarli in più parti anzichè creare un unico blocco; in questo modo il tempo d'attesa sarà diluito in più momenti; se caricate e rendete disponibile un filmato, cercate di caricarne più versioni e di indicare chiaramente peso o modalità di connessione nei vari link.
  • Files da scaricare: non obbligate il navigatore a cliccare su un link per scoprire che si tratta di un pdf da un mega, ma scriveteglielo chiaramente vicino al link stesso: peso e formato del file, in modo che possa scegliere se gli interessa, se scaricarlo subito oppure aspettare un altro momento e magari una connessione più veloce.

Mi rendo conto che questo controllo maniacale può sembrare superfluo, ma un utente soddisfatto è un utente che torna e ci fa buona pubblicità e con la concorrenza che c'è in rete non possiamo permetterci di perdere nessuna occasione anche se stiamo parlando di un sito personale o di un progetto senza grandi pretese e a ben vedere non ci vuole neanche così tanto.

Lo so, è un argomento di cui ho già discusso, ma mi sta molto a cuore e ho ritenuto utile riproporlo... e non è detto che sia l'ultima volta ;)

Torna a inizio pagina

Commenti

1 - Scritto da Marco GRAZIA il 26/04/2007 alle 14:37

E' la differenza tra professionista e praticone.

Sia detto senza offesa, ma la diferenza non è quella evidenziata in un post di un famoso forum italiano di cui non faccio il nome, tanto si è capito di quale parlo.

Ma sono proprio le piccole cose che staccano nettamente chi realizza siti per professione e chi lo fa per passione a volte senza la ben che minima preparazione tecnica.

Ovviamente non ce l'ho con essuno, ma a volte e mi ripeto, basta poco per fare la differenza; il Web non è la carta stampata.

M.

2 - Scritto da reb il 26/04/2007 alle 15:42

credo di essere una privilegiata: non essendo partita dalla carta stampata, non ne ho neanche l'impostazione e questo mi permette di percepire in modo diverso il web rispetto a chi invece ha un'impostazione prettamente grafica: finora ne ho conosciuti pochi di grafici puri che sono riusciti a comprendere bene il concetto di adattarsi al browser ricevente o di dare maggior risalto gli aspetti pratici sacrificando (o modificando) quelli estetici

quando sento parlare di gabbie troppo strette o di pagine troppo pesanti... mi si arricciano le orecchie dal fastidio :D

... comunque sono anche ottimista: non so tu, ma io ho la netta percezione di un innalzamento della qualita' media delle pagine, per fortuna di tutti :)

3 - Scritto da Marco GRAZIA il 26/04/2007 alle 17:54

In parte concordo con quanto detto da te, forse perché nemmeno io provengo dalla carta stampata e men che meno mi definisco un grafico, anche se mio malgrado mi tocca cimentarmi con i problemi della grafica.

Però quanto tu hai detto riguardo "le gabbie" concorda con i discorsi che faceva la Postai sui forum di Diodati molto tempo fa (a dire il vero credo che li faccia ancora).

Sulla questione della qualità non sempre concordo, vedo sempre pagine impostate come se fossero delle riviste di moda e questo non va bene.

Per contro oggi leggevo il nuovo "Panorama" e vedevo che era impostato come un sito Web :-)

Ovviamente parlo della veste grafica, dato che è impossibile concepire una rivista di carta come il Web, a meno di non realizzarla di gomma (e non l'ho detto io!)

M.

4 - Scritto da reb il 26/04/2007 alle 21:06

beh, aspetta! non so cosa tu intenda per gabbie, ma io il voler controllare la visualizzazione sul sito del navigatore al pixel

se invece parliamo di layout a larghezza fissa (non fluidi quindi), allora e' un altro discorso: io uso quasi esclusivamente quelli per un semplice motivo: spesso e volentieri lavoro a siti con pochi contenuti e/o con al massimo due colonne, il che vuol dire che in un layout fluido il contenuto si perde nella pagina (io uso normalmente un 1400x1050, quindi ti lascio immaginare quanto percepisca il fastidio), rendendo difficile seguire le righe e quindi il discorso

per quanto riguarda panorama, non l'ho visto, ma mi hai incuriosito :D

5 - Scritto da Marco GRAZIA il 27/04/2007 alle 07:54

Per gabbie s'intende proprio il concetto di confini invalicabili, in questo caso, il Web, la gabbia è dovuta proprio dal fatto che mancano i confini, così tu realizzi i siti a 1400 per 1050 pixel, ma qualcun altro li guarderà ad una risoluzione più alta o più bassa, contrastando con quello che volevi realizzare, così che ti crea la gabbia intorno.

Insomma nel Web la gabbia sta nel fatto che non puoi fare quello che ti pare pur avendonone tutte le possibilità.

E' come se ti mettessero in un carcere formato da una piazza gigantesca, all'inizio te ne vai dove ti pare ma sei sola, se poi vuoi stare in un gruppo devi per forza metterti in un lato della piazza e non muoverti più da esso, o sei fuori dal coro.

Non tutti sanno stare fuori dal coro, prendi ad esempio la grande disparità tra layout fluido/semi fluido e fisso, ognuno è li a discutere sui pro e i contro dell'uno e dell'altro, ma in realtà non si sentono mai liberi di fare delle scelte autonome.

La Postai parlava delle gabbie imposte dall'accessibilità, dalla semantica, dalla necessità di tornare ad un layout governato da tabelle che almeno quelle, riuscivano ad eliminare molte delle gabbie imposte dai fogli di stile.

Se ti vedi le specifiche dei CSS3 ti accorgi di come questi sono impostati proprio per eliminare queste gabbie, cercando di superare il gap sull'impostazione di un layout che oggi con la versione 2 non si ha la possibilità di fare.

In altre parole, il fatto di non avere confini è la gabbia, e le sbarre sono definite dal fatto che con i CSS2 non sai come costruirle e ogni volta che ci provi ti scontri con innumerevoli problemi come ad esempio l'accessibilità.

M.

6 - Scritto da reb il 27/04/2007 alle 08:56

troppo filosofico :D

7 - Scritto da Marco GRAZIA il 27/04/2007 alle 10:45

Ma c'è solo filosofia nel costruire un layout ... o no? (-:

M.

8 - Scritto da reb il 27/04/2007 alle 11:16

dici che al posto di un corso di linguaggi facendo questo lavoro e' meglio fare un corso di buddismo? ;)

9 - Scritto da Marco GRAZIA il 27/04/2007 alle 14:52

Be se dobbiamo ca...giare allora ti dico subito che i più grossi web designer italiani hanno lauree in psicologia e master in marketing :-)

M.

10 - Scritto da reb il 27/04/2007 alle 18:06

ti diro' che la cosa non mi stupisce proprio per nulla, anzi! :)

Aggiungi il tuo commento

I campi con * sono obbligatori.

Torna a inizio pagina

Torna a inizio pagina