2.3 - Rapidité de chargement
2.3 - Rapidité de
chargement
La rapidité et l'efficacité d'une connexion web sont fonction (voyez l'annexe 1 - Comment marche l'Internet ? si vous êtes perdu) de la qualité des connexions téléphoniques reliant la machine serveur (où se trouve hébergé le site) et la machine client (celle de votre visiteur), et des performances de la connexion utilisée par la machine client. Les modems à 28,8 kbps par seconde sont nombreux ; quant aux pays du Sud, l'indigence du réseau téléphonique n'a d'égal que la cherté des communications pour un salaire moyen. Vous devez donc vous soucier de proposer toujours des pages légères, rapides à télécharger. Vous pouvez vérifier le poids d'un fichier en lisant les informations à son sujet : il est indiqué en kilo-octets (ko). On tâchera de ne pas dépasser 40 ko, dans tous les cas (29).
Le texte ne pèse quasiment rien, en HTML ; les images, par contre, si elles ne sont pas correctement travaillées, peuvent être désespérément lourdes et donc lentes à télécharger. Ces limites, loin d'être une gêne, peuvent se révéler une gageure excitante. Il faut pour cela savoir compresser les images, aux formats GIF ou JPEG : il existe une abondante documentation, en ligne ou en livre, sur ces techniques. Quant aux fichiers sons ou vidéo, c'est encore pire.
Que votre visiteur soit à la recherche d'une information précise ou simplement curieux de généralités sur votre association, il n'aimera pas patienter devant un écran vide. Des tests ont montré qu'une attente de plus de 10 secondes était jugée intolérable. Certains éditeurs de HTML vous proposent de tester le chargement de votre page : choisissez donc l'option "modem de 28,8", qui est la vitesse résultant le plus souvent du réseau, pour la France métropolitaine, et "modem de 14,4", si vous visez des lecteurs des pays du Sud.
- Bon nombre de visiteurs du web (en particulier dans les pays du Sud) coupent le chargement d'images, sur leur navigateur, de façon à ce que les pages s'affichent plus vite : d'où la nécessité, que nous avons étudié au paragraphe précédent, d'offrir une alternative sous forme de texte aux liens proposés par des images.
- Tout fichier autre que texte est lourd, donc lent à charger : les éléments non-texte, tels que image, son, animation, doivent gagner leur place sur votre site en apportant une information supplémentaire (tâchez de réduire le nombre des effets purement décoratifs).
- Si vous voulez utiliser, pour la beauté de votre mise en page, de petites images ornementales, sachez que leur multiplication ralentit aussi le chargement. Privilégiez la solution graphique vous permettant d'utiliser la même image plusieurs fois : après avoir été visualisée une fois, elle est chargée dans votre machine et s'affiche rapidement. En modifiant ses balises <width="..." height="...">, on peut l'utiliser dans des tailles différentes. J'ai vu de jolies choses faites avec des images de couleur mesurant 1x1 pixel (moins d'un ko) qu'on étirait en modifiant leur largeur et leur hauteur, pour animer la page avec des lignes ou des rectangles lumineux.
Voici plusieurs astuces pour faire patienter votre lecteur pendant le téléchargement de l'image :
- Indiquez systématiquement, dans vos balises, la taille de l'image (largeur et hauteur) <width="..." height="...">. Grâce à ces indications, le navigateur peut placer le texte tout autour de l'image en attendant que celle-ci soit chargée, et votre visiteur a quelque chose à lire !
- Voyez si vous appréciez la fonction "entrelacée" du format GIF, qui fait apparaître graduellement l'image avant qu'elle ne soit intégralement chargée (l'image est alors malheureusement plus lourde, d'environ 10 %). Le format JPEG possède également une fonction "progressive", mais elle n'est pas reconnue par tous les navigateurs. Reportez-vous à vos manuels HTML pour ces techniques.
Quelques derniers conseils au sujet du poids de vos pages, et de leur rapidité à s'afficher :
- Puisque c'est le poids du fichier qui détermine son temps de téléchargement, évitez les gros fichiers texte : maximum 40 ko. Morcelez ceux-ci intelligement. Si certains textes restent malgré tout très longs et lourds, indiquez au lecteur, en face du titre, leurs poids en ko, afin de le prévenir.
- Si vous optez pour une mise en page avec des tables pour contrôler votre présentation, sachez que celles-ci sont complexes à calculer, pour votre ordinateur, et donc facteur de ralentissement. Ne les compliquez pas à l'envi ! Le HTML 4 prévoit une technique équivalente, sans tables : mais c'est presque aussi long à calculer pour la machine client, et n'est compris que par les versions 4 ou ultérieures des navigateurs.
Complétez cette section :
- Pour en savoir plus sur la compression d'images, voir dans la bibliographie le chapitre "Contenu - Traitement des images pour le web".
- Sur l'art de morceler les textes, voir par. 5.4 - Les textes.
Notes
(29) Attention : sur Macintosh, prendre en compte le second chiffre indiqué, en octets. A propos de poids de fichier, Stewart Butterfield, jeune concepteur de sites de Toronto, a lancé un concours inédit, mais très formateur : "The 5k". Il s'agit de construire des sites complets pesant au maximum 5 kilo-octets (en anglais) :
http://www.the5k.org
Sinon, voyez également le dossier de Radioscopie.net, par Jean-Marc Hardy (avril 2001) "Votre site se télécharge-t-il rapidement ?" (en français) :
http://www.radioscopie.net/rapidite.htm