Il giusto peso delle pagine

Per "peso delle pagine" intendiamo in questa sede la dimensione in Kb dei documenti ipertestuali. Si tratta di un parametro molto importante, spesso determinante ai fini del successo di un'iniziativa editoriale in Rete e al quale va dato ampio risalto in sede di progrettazione e realizzazione.

In realtà l'argomento tocca due punti:

• il tempo medio stimato per il caricamento delle pagine da parte dei visitatori;
• il traffico generato dal sito relativamente al numero di file scaricati.

Particolarmente importante è il peso complessivo della pagina di benvenuto al sito (home page) che, oltre ad essere quella maggiormente visitata, dà per prima l'idea di velocità o lentezza del Website.

Abbiamo parlato di "peso complessivo" perchè tale valore va considerato sommando tutti i file presenti nelle pagine:

• il file .html all'interno del quale è contenuto il codice;
• le immagini GIF o JPG richiamate dalla pagina, compreso il background;
• gli eventuali suoni di sottofondo (mid o wav);
• eventuali file esterni .js (Javascript) o .css (fogli di stile);
• documenti contenuti all'interno di frameset;
• applet Java e relativi file .class;
• presenza di CGI o programmi residenti su server

Nessuno di questi elementi considerati singolarmente può condizionare la velocità del sito, che invece va analizzata in base al loro uso congiunto. In altre parole, non può essere soltanto il codice HTML o un CGI o un'applet o un'immagine a condizionare la pesantezza, ma il loro contemporaneo utilizzo, che non può prescindere da un oculato e responsabile equilibrio.

Analizziamo in particolare gli oggetti sopracitati.

Allegerire i file .html

Per "file .html" si intende il file che incorpora il testo e richiama le immagini e gli altri oggetti esterni. In questo caso il nostro sforzo deve volgere ad ottimizzare il codice e limitare il più possibile sprechi di byte e tag inutili. In questo caso, chi genera documenti HTML servendosi di editor WYSIWYG (per es. Front Page) troverà maggiori difficoltà perchè notoriamente questi programmi facilitano la creazione di documenti sacrificando la coerenza e l'efficacia del codice. Per confermare questa nostra asserzione è sufficiente aprire un documento scritto con Front Page per notare immediatamente la massiccia presenza di codice superfluo.

Al contrario, chi di noi scrive pagine Web servendosi di codice puro o editor non soltanto WYSIWYG (per es. Dreamweaver e Home Site) partirà avvantaggiato e potrà facilmente migliorare i risultati.

Per ottimizzare i documenti .html suggeriamo di seguire i seguenti consigli:

• Evitare l'abuso di tabelle (table) per organizzare il layout di pagina e allineare il testo e le immagini. Questo consiglio è rivolto soprattutto agli utilizzatori di editor WYSIWYG che notoriamente fanno grande uso di questi strumenti, spesso in modo improprio se non inutile. Per centrare o posizionare il testo esistono strumenti classici di HTML oltre ai preferibili fogli di stile.
• Non esagerare con le Keyword dei Meta Tag: primo, perchè non è detto che questo sortisca buoni risultati ai fini dell'indicizzazione nei motori, secondo, perchè appesantisce inutilmente le pagine.
• Evitare l'uso di Javascript quando non strettamente necessario e comunque limitarne l'utilizzo a non più di due per pagina. Esistono Javascript ed effetti dinamici per tutte le esigenze: dalle utiliy agli effetti grafici, dalle password alle scritte sulla status bar del browser, e con questo non intendiamo sconsigliarne l'utilizzo, ma solo consigliare di farlo in modo oculato. Per esempio, è bene sacrificare una scritta scorrevole sulla status bar del browser quando è già presente nella pagina uno script che genera testo in movimento scroller.
• Eliminare il più possibile le righe vuote ed i commenti al testo.
• Sostituire ad effetti OnMouseOver sulle immagini i fogli di stile e le loro proprietà sui link.
• Per quanto possibile favorire pagine testuali senza scadere nella noia estetica di documento "solo testo"

Per confermare la bontà di questi consigli riportiamo un'esperienza diretta di questo sito. Più volte abbiamo abbiamo deciso di allegerire il peso della home page. Una volta la ottimizzammo passando da circa 70Kb a meno di 30Kb. Questa scelta è stata dettata da problemi di traffico e banda occupata; mai avremmo immaginato il risultato sul numero degli accessi. Nel giro di un giorno il traffico sulla home page è aumentato di circa il 40%. Questo a dimostrazione dell'importanza di una home page leggera ma non spartana, che cerchi il giusto equilibrio tra esigenze di velocità e grafiche.

Ottimizzare le immagini GIF e JPG

Le immagini sono un elemento importante dei documenti Web ma nascondono pericoli quando non utilizzate correttamente. Se nella grafica tradizionale la qualità è l'unico parametro per giudicare un'immagine, nella grafica per il Web il discorso di complica, aggiungendo la necessità di un peso in Kb minimo. In altri termini, non ha molto senso creare una splendida immagine con Photoshop con effetti di luce straordinari quando il suo peso supera i 400Kb (che con un modem 33.6 impiegherebbe più di un minuto e mezzo per essere scaricata). Attenzione però, non ha senso neanche salvare quella stessa immagine in formato JPG fortemente compresso, passandola da 400 a 20Kb con uno scadimento enorme della qualità. Su questo compromesso si regge la Webgrafica attuale, dove collegamenti lenti e instabili non consentono virtuosismi grafici troppo accentuati.

Di seguito consigliamo alcuni accorgimenti da adottare per ottimizzare il carico grafico dei documenti Web:

• per quanto possibile utilizza immagini in formato GIF con il minor numero di colori possibile. L'utilizzo di immagini in formato JPG è consigliato per fotografie e va, comunque, accompagnato da una decente compressione.
• Limita al massimo l'utilizzo di elementi grafici sulla home page del sito. Più la pagina principale è veloce più i visitatori non dovranno dare fondo alla propria pazienza. Se utilizzi elementi grafici che non siano fotografie, adotta un formato GIF a 16 colori.
• Per le immagini GIF evita gli effetti "antialias", cioè le sfumature che aumentano il numero di colori a parità di qualità.
• Utilizza con parsimonia gli effetti OnMouseOver sulle immagine. Questi effetti prevedono l'utilizzo di due immagini: una quando il mouse non è nell'area di link, l'altra quando vi entra. In questo modo il browser è costretto a caricare un numero doppio immagini.
• Evita l'utilizzo di GIF animate superiori a 20Kb e qualora ne creassi di tue fai di tutto per limitarne il peso. Ricorda che puoi sostituire alcune GIF animate con leggerissimi file Flash.
• Per le fotografie adotta il formato JPG ma non esagerare con le dimensioni e adotta un adeguato livello di compressione. Ricorda che è meglio una fotografia di limitate dimensioni ma buona qualità, che una a tutto schermo ma "sgranata".
• Se hai necessità di inserire più immagini di grandi dimensioni in una stessa pagina utilizza delle Thumbnails come link. Le Thumbnail sono miniature di immagini più grandi che funzono da preview. In questo modo il visitatore ha idea di cosa si tratti e solo se interessato clicca per visualizzare l'immagine più grande.
• Utilizza un'immagine di sfondo di dimensioni non superiori a 10Kb ed evita rigorosamente di impostare sfondi a tutto schermo. Devi sfruttare la ripetizione all'infinito del background per creare sfondi leggeri.

File multimediali e programmi residenti

• Certamente un brano di sottofondo alla visita delle pagina risulta piacevole ed emozionante, ricorda però che esistono limiti dai quali non puoi prescindere. Primo fra tutti devi utilizzare file di piccole dimensioni in formato .mid o .wav. Il formato midi è ideale per basi di sottofondo, ma anche in questo caso non inserire campionature superiori ai 25Kb. I file Wav sono consigliati per piccoli suoni, parole o rumori ma se di buona qualità arrivano anche a diversi Mb di peso. Realizza Wav con altissimo livello di compressione e rinuncia a idee suggestive ma sconsigliabili, tipo associare ad ogni link una voce che descrive il commento. Improponibile anche l'idea di un sottosfondo musicale in formato MP3. Questi file, per quanto di buona qualità e leggeri, hanno un peso medio di 4 Mb (un modem 33.6 impiegherebbe 18 minuti a scaricare il solo sottofondo).
• Le applet Java sono un elemento multimediale di ottima fattura e soprattutto funzionanti su ogni piattaforma. Esistono però dei limiti logici al loro utilizzo. Non inserire più applet Java in una sola pagina e soprattutto limita l'utilizzo di Applet grafiche che richiedono il caricamento di più immagini. Ricorda che il browser rallenta quando incontra un'applicazione Java perchè attiva la Java Machine, una sorta di interprete di questo linguaggio. Tra l'altro le macchine ed i sistemi operativi più vecchi possono trovare difficoltà a leggere pesanti file .class. Finalmente, fai attenzione al peso del file .class dell'applet ed alle eventuali immagini allegate e ricorda che molti effetti puoi ottenerli con semplici script Javascript o Dynamic HTML.
• Utilizza file esterni .js o .css per ripetere menu o elementi ricorrenti delle pagine, o per formattare il testo. Questo evita ai browser di caricare sempre lo stesso codice su ogni pagina e richiamare semplicemente dalla cache i file esterni.
• I frame sono strumenti molto utilizzati nell'attuale Web publishing. Attenzione però, si tratta pur sempre di singoli file, ognuno indipendente dal resto. Limita l'utilizzo dei frameset alla loro effettiva necessità e comunque ottimizza il codice all'interno di ognuno di essi.
• I CGI o i database Internet sono strumenti indispensabili per applicazioni lanciate su server. Prevedendo un'elaborazione rallentano giocoforza la navigazione.
• Macromedia Flash ha introdotto un rivoluzionario modo di creare siti Web attraverso un concetto nuovo per il Web: la grafica vettoriale. Certamente a ben guardare le animazione Flash e confrontandole con le pagine statiche in HTML, anche un file .fla di 400Kb ci sembra nulla. Ma in realtà si tratta pur sempre di un file di 400kb che impiega un minuto e mezzo per essere scaricato. Anche per Flash vale la regola dell'ottimizzazione che non deve portare ad eccessi ma puntare alla velocità di esecuzione.

In conclusione vogliamo introdurre il concetto dei "30 secondi di pazienza" che molti addetti ai lavori consigliano e che noi ci sentiamo di sottoscrivere. Per "30 secondi" si intende il tempo complessivo di caricamento della home page di un sito, oltre il quale il visitatore potrebbe spazientirsi e rinunciare alla visita. Ovvio che i 30 secondi vadano calcolati tenendo conto dei modem e dei collegamenti più lenti. Quindi facendo riferimento ad un collegamento analogico a 56,6 che scende alla metà nei momenti di traffico nazionale ed internazionale, il peso complessivo della pagina non dovrebbe mai superare i 70Kb.