Corso di e-marketing: ottimizzare le pagine Web (2)

Nonostante il nascere di tecnologie per la navigazione veloce su Internet, quali Adsl, linee dedicate, connessioni via satellite ecc., un sito Web per riscuotere il maggior successo possibile, deve essere innanzitutto veloce da navigare. Questo perché comunque, pur esistendo reali possibilità di connettersi velocemente alla Rete, la maggior parte degli utenti rimane fedele a connessioni analogiche (le cosidette Pstn a 33,6 Kbps e 56 Kbps) oppure a soluzioni Isdn a 64/128
Kbps. In Italia le connessioni veloci sono sì una realtà, ma si scontrano con ostacoli al momento difficilmente superabili (l’elevato costo delle stesse, il boom delle connessioni Flat e via dicendo…).

Questa non è comunque la sede per esplicitare un discorso che necessiterebbe di un’approfondita analisi a parte, ma questa breve panoramica
ci permette di capire come, nonostante la tecnologia avanzi e permetta connessioni più veloci, il nostro sito Internet debba essere scaricato dal navigatore nel minor tempo possibile.

La prima regola da seguire quindi è quella di creare pagine leggere! Con leggere intendiamo aventi oggetti che pesino, in totale, non più di
75 KB nella Home page. Con il termine oggetti intendiamo la pagina stessa (che sia .html , .asp , .php ecc.), le immagini, gli eventuali
script esterni (per esempio .js ), Css, applet Java, ecc.

Con 75 KB comunque, intendiamo il limite massimo , che non va assolutamente superato . Questo perché la pagina principale deve essere assolutamente scaricata in meno di 30 secondi con una comune connessione a 33,6 Kbps. E’ importante quindi trovare un buon equilibrio tra la velocità di scaricamento e gli elementi da inserire nella Home page.

E’ importante ricordare che, più un sito è veloce da caricare, più un utente è invogliato a visitare altre pagine e quindi ad aumentare il numero di impressions totali, che come abbiamo visto nell’ introduzione all’analisi, è il dato che interessa agli
sponsor.

E’ naturale che nella velocità di scaricamento influiscano, oltre ai due aspetti già visti (il sito stesso e la connessione del navigatore) anche il server presso cui è ospitato il sito ed il numero di visitatori che lo frequentano. Un servizio di Housing garantisce sicuramente risultati più performanti, ma non tutti possono permettersi tale struttura e comunque, affiancare un servizio tale ad una buona performance dell’intera struttura tecnica del sito, può restituire tempi di scaricamento veramente interessanti.


Fin’ora abbiamo visto il lato teorico della creazione di pagine Web rapidamente scaricabili. Esistono naturalmente delle soluzioni pratiche che l’esperienza può affinare. Vediamo insieme quali trucchi segue Risorse.net:

< 1a > Il primo oggetto che deve essere leggero da scaricare, è naturalmente la pagina Html
(eventualmente integrante tecnologie Asp, Php ecc.). Lo sforzo del Web master deve concentrarsi nella creazione di ogni signolo documento. Sarebbe bene quindi evitare l’utilizzo di
tag inutili e lo spreco di righe di codice. I puristi dell’Html, hanno fatto scuola in questo senso e l’immancabile editor di testi (Blocco note per fare un esempio) è attualmente lo strumento migliore per la pulizia del codice. Al contrario, gli
editor Wysiwyg (What you see is what you get, ciò che vedi è ciò che ottieni) sono i peggiori nemici nella creazione di pagine Html
veloci da scaricare.

< 1b >E’ preferibile utilizzare i Css esterni (si veda la relativa guida su Risorse.net) per la gestione dello stile delle pagine. Per citare un esempio, è inutile ripetere in ogni occasione:


<P><FONT FACE="ARIAL" SIZE="2" COLOR="#C0C0C0">testo della pagina


Quando con un semplice Css esterno è possibile specificare:


p,td { font-family:arial; font-size:10pt; color:c0c0c0 }


Il Css esterno, ha inoltre il vantaggio di rimanere nella cache dell’utente ed essere quindi velocemente richiamato nel proseguo della navigazione all’interno delle pagine.

< 1c > E’ bene dosare con cura l’utilizzo di script sia client che server side. Per esempio, un’interazione con l’utente per la verifica di un modulo (i cosidetti &ltFORM> ; si visiti la guida a Html ) è bene progettarla con un semplice Javascript, piuttosto che scomodare una richiesta al server.
Javascript comunque, vista la sua semplicità, può portare un Web master alle prime armi, a banali errori sistematici, come l’inserimento di alcuni
script che, oltre a risultare perfettamente inutili per le finalità del sito, non fanno altro che appesantire il caricamento dello stesso. E’ il caso di ripetuti effetti di scrolling su testo, immagini e sfondi (passi uno, ma due, tre o
più…), pesanti animazioni all’entrata del sito, ingombranti immagini che seguono il mouse, ecc. Con questo, non vogliamo assolutamente consigliare di eliminare l’utilizzo di Javascript, ma di calibrarne ed ottimizzarne il
loro utilizzo.

< 1d > Si dovrebbe inoltre di eliminare quegli attributi che vengono
sottintesi dal browser. Queste specifiche sono innumerevoli ed anche in questo caso, solo l’esperienza
nell’editing diretta del codice Html può venire in aiuto. Noi possiamo solo
citare qualche esempio per comprendere meglio ciò che vogliamo spiegare. Inutile quindi utilizzare


<TABLE BORDER="0">


quando, è possibile abbreviare il tutto con:


<TABLE>


L’attributo BORDER="0" infatti, è superfluo, in quanto di default. Esistono molti altri casi ( <P ALIGN=LEFT> , </P> , SIZE=3 nel tag <FONT> ecc.). Nella guida ad Html di Risorse.net, ogni attributo viene esplicitato nella sua completezza e viene riportato anche il caso in cui un determinato valore viene assunto come default.

< 1e >Ai casi appena citati, fanno eccezione gli attributi WIDTH e HEIGHT del tag <IMG> . E’ infatti importante definire le dimensioni verticali ed orizzontali delle immagini che pubblichiamo. Questo perché durante il caricamento della pagina, l’immagine è uno degli ultimi oggetti a venire visualizzati e quindi, nel caso in cui fossero già presenti le sue dimensioni, il layout degli altri elementi che la circondano, non verrebbe stravolto all’apparire dell’immagine. Il browser quindi, dispone il testo tenendo già in considerazione le sue misure.

< 1f > Bisognerebbe poi cercare di ridurre al minimo indispensabile i commenti al codice Html (i famosi tags <!-- e --> o <COMMENT></COMMENT> )
lasciando solo quelli che ritieni necessari per successivi aggiornamenti alla pagina. Stessa cosa vale per i commenti della sintassi Javascript, Css e
Vbscript.


< 2a > Un altro elemento che deve essere tenuto sotto attento esame per una migliore velocità delle pagine, sono naturalmente le immagini che essa contiene.

< 2b > E’ bene sostituire, quando possibile, le immagini con del semplice testo. Quando ad esempio è necessario creare dei titoli alle pagine, è bene farlo sfruttando comune sintassi Html. Questa soluzione ha un duplice vantaggio: è più veloce da scaricare e più semplice da aggiornare nel caso in cui
si decida di cambiare titolo ad una pagina. A tal proposito, possono venirci in aiuto i Fogli di stile .

< 2c > E’ altresì importante saper scegliere il formato con cui salvare le immagini. I due più diffusi nel Web, sono Gif (Compuserve Graphics Interchange) e Jpeg . Le differenze tra Gif e Jpeg fanno sì che possano essere utilizzate in maniera quasi esclusiva: o uno o l’altro. Il primo ha 256 colori, permette di realizzare immagini in movimento (dette Gif animate), ossia una serie di
frame ripetuta più volte in modo tale da creare una specie di cartone animato. È possibile realizzare icone a sfondo trasparente ed è utilizzato per immagini con bordi netti e poche sfumature. Il Jpeg, supporta 16 milioni di colori, ed è adatto per immagini senza bordi netti e con sfumature (come le foto). Entrambi i formati comprimono le immagini in modo da renderle meno pesanti, per far ciò però,
il Jpeg elimina informazioni grafiche: bisogna dunque trovare il milgior
rapporto di compressione fra dimensione e qualità.

< 2d > Per gli sfondi, è bene utilizzare piccole immagini Gif, visto che nel caso in cui l’immagine di background non copra l’intero schermo, essa verrà fatta ripetere sia in verticale che in orizzontale. Se
si notano le barre laterali di Risorse.net, esse sono delle piccole Gif ripetute più volte (guardando l’immagine seguente
si avrà un’immediata idea del funzionamento):

< 2e > Ci si imponga un limite massimo anche per i “pesi” delle pubblicità da inserire nel
proprio sito Web. Per bottoni di 120×60 pixel, è bene non superare assolutamente gli
8 KB, mentre per un banner di 468×60 pixel la dimensione massima dovrebbe essere
di 15 KB.


< 3a > L’ultimo passo di questo articolo lo vogliamo dedicare a quegli elementi che possono
essere richiamati all’interno di una pagina Web, e sono tanti: applet Java, animazioni Flash, suoni, database, Active X, ecc.

< 3b > Ridurre all’osso l’utilizzo di applet Java. Per quanto belle a vedersi, sono estremamente lente da scaricare. Quelle poi che contengono animazioni grafiche, comportano spesso il download di una o più immagini.
Si dovrebbe cercare di sostituirle con più snelli effetti Dhtml (nell’archivio di Risorse.net
si trovano quasi 300 esempi).

< 3c > Anche le animazioni Flash, come qualsiasi altro elemento di un sito Web, deve sottostare alla regola della leggerezza. Cercare quindi di creare animazioni che siano veloci da scaricare e che non superino i
50 KB di peso.

< 3d > I suoni sono un elemento amato e odiato all’interno dei siti Internet.
Anche qui, andrebbero usati con parsimonia, sia per velocizzare lo scaricamento della pagina, sia per non perdere i visitatori che non apprezzano questo tipo di elementi. Per quanto riguarda il formato da utilizzare, è bene sfruttare la compattezza dei Midi ( .mid ), a scapito comunque della qualità degli Mp3 o Wav.

< 3e > Anche un database interrogato da una pagina Asp, Php o simili deve essere leggero da consultare. Risparmiare KB su questo tipo di oggetti non è comunque un’impresa semplice.
Un buon articolo sull’argomento può essere trovato su ASPItalia: ” Migliorare la velocità delle connessioni ai database “.

Roberto
e Alessandro Abbate  

Responsabili di Risorse.net ,
la comunità virtuale di Web masters e Web designers.