5 trucchi HTML per velocizzare il caricamento delle pagine



20090728htmlclayDi seguito vi elenco 5 trucchi ‘base’ per rendere il caricamento delle pagine del vostro sito più veloci.

Sono indicazioni semplici che si dovrebbe tenere sempre presente nella realizzazione delle pagine HTML e che spesso non richiedono tempi lunghi per essere seguite.

Ovviamente i consigli valgono anche per pagine generate con linguaggi (lato server) come ASP o PHP.

1) Non usare un layout usando le tabelle.

Usate le tabelle solo per i dati tabulari, come un listino prezzi.
Tenete conto che le tabelle dentro altre tabelle rendono il rendering (cioè il disegno della pagina a video) molto lento.
Su internet trovate decine di layout realizzati mediante i comandi CSS che sono table-free.

2) Usare i colori HTML invece delle immagini.

Invece di usare una immagine per fare lo sfondo di una cella o di un div è meglio utilizzare direttamente il corretto comando HTML, per esempio:
<body bgcolor=”#00FF00”>
<div bgcolor=”#00FF00”>xxx</div>
piuttosto che richiedere il caricamento di una immagine (magari 1×1 pixel).
In effetti leggere un qualsiasi file dal server, anche se piccolo, richiede una serie di richieste via protocollo HTTP, mentre usando direttamente il codice del colore il tutto viene risolto direttamente all’interno del motore grafico del browser.

3) Collegamenti a files CSS o Javascript

Se delle parti Javascript o CSS (Common Style Sheet) sono usate in modo ripetuto in più pagine e meglio inserirle in un file separato e poi richiamare questo da ogni pagina dove servono.
Questo perchè i browser hanno una cache locale dei files richiesti e quindi una volta caricato da server se il file viene incluso in altre pagine sarà usata la copia salvata nella cache accellerando notevolmente il caricamento.

Nel caso degli scripts Javascript usare la seguente sintassi:

<SCRIPT src=”mioscript.js”></SCRIPT>

Invece per i files CSS la sintassi corretta è la seguente:

<LINK href=”miostylesheet.css” rel=”stylesheet” type=”text/css”>

4) Unisci gli script che usi in un unico file

Ogni file separato richiede una serie di operazioni HTTP con il server per farsi ‘spedire’ i files.
Quindi se abbiamo 3 files contenenti ciascuno istruzioni Javascript ognuno di questi viene richiesto al server in modo indipendente.
Se uniamo i 3 files in uno solo (a maggior ragione più i files sono piccoli !) in un unico comando questo viene caricato, risparmiando le altre richieste HTTP.

5) Non ridimensionare le immagini usando l’HTML

Questo è un errore comune che viene fatto per la pigrizia e la semplicità del comando di resize delle immagini via HTML.
Infatti è normalissimo trovare questo comando:

<img src=”GrandeImmagine.gif” height="100" width="100">

Immaginiamo ora che il file GrandeImmagine.gif sia una foto 1000×1000 di circa 2Mbyte.
Il browser deve richiederla al server scaricandola per intero e poi ridurla al volo.
Entrambe queste operazioni necessitano di tempo per essere eseguite.
L’approccio giusto è di creare una immagine PiccolaImmagine.gif di dimensione 100×100 e mettere questa nel comando HTML:

<img src=”PiccolaImmagine.gif”>

Il tempo di caricamento della pagina diminuirà drasticamente.
Spero che questi piccoli consigli possano essere utili.

alberto bellina (abspace.it)

Annunci sponsorizzati:
Condividi su Facebook Condividi su Twitter!
  • Grande articolo!
    Solo una cosa, hai scordato il tag Adsense o sbaglio?

  • Articolo molto interessante… sono linee guida che ogni sviluppatore web dovrebbe conoscere! :)

  • Penso che il punto sulle tabelle sia da interpretare. In alcuni casi è nettamente più redditizia una tabella che non un CSS. Ad esempio per la realizzazione di poche pagine, una tabella fatta bene è sicuramente di un grosso CSS. Inoltre a livello indicizzazione le tabelle premiano sempre!

Pinterest