'importance de la rapidité de votre site internet, comme critère de satisfaction des utilisateurs, ne doit plus être démontrée. Voici donc 20 conseils pratiques pour rendre vos pages aérodynamiques !...

1. Privilégier le HTML aux images
 Sur Internet, les images pèsent nettement plus lourd que le texte ! Il convient, donc, de ne recourir aux images que lorsqu'elles apportent une réelle plus-value. L'HTML, surtout depuis qu'il est enrichi par les feuilles de style, offre de nombreuses possibilités de mise en page.
Les concepteurs de sites internet les plus ingénieux ont tendance aujourd'hui à combiner de très légères images aux objets HTML. Par exemple, de petits GIF de 1 K peuvent être utilisés pour arrondir les angles d'un tableau ou créer un effet "parchemin".
Le comble de l'amateurisme, ce sont les textes "giffés" (donc des textes-images) et mal compressés, qui gagneraient tout à être reconvertis en simple texte HTML : légèreté, bien sûr, mais aussi facilité de maintenance, visibilité face aux moteurs de recherche, etc.

2. Avertir l'utilisateur du poids des fichiers à télécharger
Lorsqu'un fichier est plus lourd que la normale, l'utilisateur devrait en être clairement averti. Dans la négative, il ne comprendra pas ce qui se passe, pourquoi le site rame... et il pourra abandonner sa visite en présumant quelque disfonctionnement.
Jakob Nielsen conseille de communiquer le poids de tous les fichiers excédant 50 Kb. C'est le point de vue d'un puriste. En effet, nous savons que, dans la réalité, la plupart des pages web pèsent entre 60 et 80 K. Nous vous conseillons, en tout cas, de prévenir vos utilisateurs dès que vous dépassez les 100 Kb... en particulier lors du téléchargement de fichiers non HTML (PDF, DOC,...).

3. Contrôler l'ordre de chargement des éléments dans la page
L'ordre de chargement des éléments d'une page reste parfois un mystère et peut dépendre du navigateur utilisé. Je serai reconnaissant envers le lecteur averti qui me communiquera toute information plus précise sur ce sujet.
En règle générale, le navigateur charge prioritairement les éléments situés dans le haut de la page, et de gauche à droite. Certaines exceptions existent, par exemple lorsque des tableaux contiennent des ROWSPAN. En réalité, le navigateur télécharge les éléments dans l'ordre de leur apparition dans le code source, et non en fonction d'un quelconque positionnement physique à l'écran.
Si votre page est complexe, contrôlez donc la manière dont les principaux navigateurs en séquencent le téléchargement.
Généralement, vous veillerez à ce que le haut de votre page soit le plus communiquant possible. Et inversement, vous éviterez d'enfouir en bas de page, des éléments indispensables à la compréhension !

4. Précharger certains éléments
Dans certains cas, il peut être intéressant de précharger certains éléments, des images en particulier. Le truc consiste à intégrer une image au bas d'une page en lui donnant une hauteur et une largeur d'un seul pixel. Par exemple : <IMG SRC="peuimporte.gif" HEIGHT=1 WIDTH=1>. L'image ne sera pas visible sur la première page, car trop étriquée, mais elle apparaîtra très vite à la page suivante, étant donné qu'elle aura été chargée dans la mémoire tampon.
Attention toutefois! Ce procédé, à double tranchant, doit être utilisé finement : n'alourdissez pas démesurément une page d'entrée sous prétexte d'assurer la fluidité du reste de votre site ! En fait, le prétéléchargement convient particulièrement bien à une navigation séquentielle ou en "tunnel", à savoir lorsqu'on peut fortement présumer de la page vers laquelle l'utilisateur va se diriger pour poursuivre sa visite !

5. Réutiliser certains éléments
Une fois chargée, une image peut être réutilisée très facilement sans qu'elle n'exige vraiment à nouveau un téléchargement.
Cette technique convient particulièrement bien aux icônes, boutons, flèches de navigation ou autres petits symboles graphiques.
La réutilisation d'éléments graphiques améliore non seulement la rapidité de téléchargement, mais elle contribue aussi à la cohérence visuelle du site.

6. Découper les grosses images et scinder les gros tableaux.
Afin de permettre le chargement en parallèle de plusieurs éléments et afin d'éviter à l'utilisateur de devoir attendre trop longtemps devant un écran blanc, il est important d'éviter les trop grosses images ainsi que les trop gros tableaux... Découpez-les donc en plusieurs morceaux !
Attention cependant!, un découpage excessif (comme une page qui contiendrait 40 petites images et une dizaine de tableaux) peut, à l'inverse, ralentir le processus.

7. Réduire la taille des images
Plus une image est grande, plus son poids est important... l'équation est simple ! C'est la raison pour laquelle il convient de ramener les images à leur plus petite taille communiquante !
Les icônes n'ont pas besoin d'être réalistes ; il leur suffit d'être parlantes.
Les petites photographies qui se concentrent sur un élément tranchant (un visage, un plan rapproché,...) conviennent généralement assez bien.
Les graphiques peuvent être plus imposants, moyennant l'utilisation d'une palette de couleurs radicalement réduite !
Il peut être intéressant de proposer de grandes images dans certains cas précis (comme un plan d'accès, par exemple), mais les utilisateurs doivent toujours en être prévenus !
L'horreur suprême : la splash page constituée d'une grosse image interactive (image mapping) dont toute la navigation dépend !

Lire la 2ème partie >>

Jean-Marc Hardy
www.radioscopie.net
Formation à la qualité web