Cet exemple simplifié présente le menu de navigation d'un site Web universitaire :

A partir de cet exemple, nous avons produit une version identique prise en charge sur les connexions lentes :

Comparaison

Dans le premier exemple, la mise en page du menu de navigation repose sur une table et des images transparentes mises à échelle (pour le texte qui apparaît dans le menu). Cette table et ces images constituent une grande partie du contenu HTML :

<table width="580" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td bgcolor="#ebeadc">
<a href="#academics"><img src="spacer.gif" border=0 height=14 width=10>Academics</a>
<a href="#admissions"><img src="spacer.gif" border=0 height=14 width=10>Admissions</a>
<a href="#library"><img src="spacer.gif" border=0 height=14 width=10>Library</a>
<a href="#directory"><img src="spacer.gif" border=0 height=14 width=10>Directory</a>
<a href="#administration"><img src="spacer.gif" border=0 height=14 width=10>Administration</a>
<a href="#alumni"><img src="spacer.gif" border=0 height=14 width=10>Alumni</a>
<a href="#computing"><img src="spacer.gif" border=0 height=14 width=10>Computing</a>
</td>
</tr>
</table>

Pour simplifier le balisage du contenu HTML ci-dessus, il suffit de remplacer la table par une liste, tel que dans l'exemple ci-dessous :

<ul class="navigation">
<li><a href="#academics">Academics</a>
<li><a href="#admissions">Admissions</a>
<li><a href="#library">Library</a>
<li><a href="#directory">Directory</a>
<li><a href="#administration">Administration</a>
<li><a href="#alumni">Alumni</a>
<li><a href="#computing">Computing</a>
</ul>

... et de définir le style de chaque élément de façon appropriée :

.navigation {
  background-color: #ebeadc;
}

ul.navigation { 
  list-style-type:none;
  padding-left:0;
  width:684px;
  margin: 0 auto 0 auto;
}

.navigation li {
display:inline;
padding:0;
}

.navigation li a { 
padding: 0 0 0 10px;
}

Résultat

Cette méthode permet de réduire la taille du contenu HTML de 724 à 305 octets (soit une réduction de plus de 50 %). Les données ajoutées à la feuille de style représentent 238 octets mais peuvent être mises en cache par le navigateur puis restaurées pour chaque page, permettant ainsi de réduire le délai d'affichage global.

Notez également que vous pouvez éviter qu'une demande HTTP supplémentaire ne soit envoyée au serveur en supprimant toutes les images transparentes présentes dans votre contenu HTML si une feuille de style est déjà associée à vos pages.