Introduction

HTML est le nom du langage informatique qui est utilisé sur Internet. La plupart des pages Web sont écrites en langage HTML et les navigateurs Web sont spécialement conçus pour traiter et afficher ce langage. Toutefois, de nombreux sites Web ne respectent pas les bonnes pratiques applicables au langage HTML, ce qui affecte souvent leur vitesse d'interaction avec les utilisateurs.

HTML signifie Hypertext Markup Language, ou langage de balisage hypertexte. Les langages de balisage permettent d'insérer des informations supplémentaires (balisage) dans les documents texte. Ces informations viennent se « superposer » au texte pour indiquer que X est en gras, que Y est un lien ou que Z est un titre, par exemple.

Les normes HTML sont gérées par le World Wide Web Consortium (http://www.w3.org), qui est chargé de les réviser et de les mettre à jour. Au moment de la rédaction de cet article, la dernière version disponible était HTML 4.01 (sortie en 1999).

Séparation du contenu et de la forme

A l'origine, le langage HTML avait pour fonction de décrire la structure du document, tandis que l'aspect visuel de celui-ci était géré par le navigateur. Les auteurs de site Web souhaitant par la suite disposer de plus de contrôle pour l'affichage des pages, le langage HTML fut approfondi pour inclure des éléments de présentation, tels que les balises font. De même, pour effectuer la mise en page de leurs sites, les concepteurs Web se mirent à utiliser des tables imbriquées, même si celles-ci étaient à l'origine destinées à l'affichage des données dans des feuilles de calcul.

Bien que les navigateurs actuels soient en mesure de prendre en charge de nouvelles technologiques telles que les feuilles de style, ces anciennes pratiques continuent d'être utilisées. Les concepteurs HTML recommandent désormais l'utilisation du langage HTML pour la spécification de la structure du document et l'utilisation de feuilles de style pour la gestion de l'aspect visuel :

A mesure que le langage HTML se développe, ses éléments et ses attributs présentationnels sont progressivement remplacés par d'autres mécanismes, tels que les feuilles de style. Nous savons d'expérience que la séparation de la structure et des aspects présentationnels d'un document permet de réduire les coûts de prise en charge (plateformes multiples, supports, etc.) et facilite les révisions de document.[1]

La séparation du contenu et du format permet généralement d'obtenir des pages mieux structurées, facilitant ainsi les opérations de maintenance et réduisant donc la consommation de bande passante.

Versions de HTML

Il existe trois versions de HTML susceptibles de vous intéresser :

• HTML 4.01 Strict ;
• HTML 4.01 Transitional ;
• XHTML.

Le XHTML n'est pas une version de HTML à proprement parler. Toutefois, bien qu'il s'agisse d'un langage à part entière, le XHTML est fort similaire au langage HTML et il remplit la même fonction. Les paragraphes ci-dessous fournissent une description de chaque version et évoquent les raisons pour lesquelles il est recommandé d'utiliser le HTML 4.01 Strict.

HTML Strict et Transitional

Il existe deux « dialectes » de l'HTML 4.01 appelés Strict et Transitional. Le dialecte (ou DTD) Strict empêche l'insertion d'éléments présentationnels dans le contenu HTML, tandis que la DTD Transitional permet la prise en charge d'éléments présentationnels hérités. Le W3C explique :

Les auteurs doivent utiliser la DTD Strict dans la mesure du possible mais ils peuvent avoir recours à la DTD Transitional lorsque des éléments et des attributs présentationnels doivent être pris en charge.

L'utilisation de la DTD Strict vous contraint à écrire vos pages Web en n'utilisant aucune donnée de présentation dans le contenu HTML et à séparer ainsi le format du contenu.

Pour entrer en conformité avec les normes HTML, vous devez impérativement valider vos documents à l'aide du service de validation du W3C à l'adresse http://validator.w3.org/, par exemple. Cette procédure vous permet de vous assurer que vous répondez aux normes de conformité en vigueur.

XHTML

Proche du langage HTML, le XHTML (où X signifie XML) est une version modifiée du HTML entièrement compatible avec le langage XML et qui peut donc être traitée par les parseurs XML. La syntaxe du langage XHTML est plus simple et cohérente et donc plus facile à analyser que celle du langage HTML. Elle peut donc se montrer plus appropriée pour les applications conçues pour traiter les pages Web de façon automatique.

Le langage XHTML présente deux spécificités principales. La première est qu'il permet d'utiliser des éléments vides tels que :

<textarea />

Ces éléments servent à la fois de balise d'ouverture et de clôture et permettent de remplacer les balises conventionnelles :

<textarea>< /textarea>

Notez que les navigateurs d'ancienne génération sont susceptibles de ne pas reconnaître cette forme et de l'ignorer ou de mal l'interpréter.

La seconde spécificité du langage XHTML est que tous les éléments qui pouvaient rester non clôturés en HTML, tels que les éléments de paragraphe p et de ligne horizontale hr doivent être clôturés. Cette condition se traduit souvent par une légère augmentation de la taille du document.

Quel type d'HTML utiliser ?

Le choix du langage XHTML ou HTML n'a que peu d'impact sur la bande passante. Les documents XHTML sont généralement plus volumineux étant donné que toutes les balises doivent être clôturées mais cette différence de taille n'a souvent aucune incidence réelle sur la bande passante.

Le HTML 4.01 Strict et le XHTML vous forcent tous deux à séparer le contenu du format, ce qui est susceptible de minimiser la consommation de bande passante.

La prise en charge du langage XHTML n'est pas garantie sur tous les navigateurs d'ancienne génération. En effet, bien que ces navigateurs soient généralement capables d'afficher la plupart des éléments XHTML et qu'aucune différence ne soit notable pour les pages Web de base, même Internet Explorer 6 ne prend pas en charge le XHTML.

Si vous souhaitez concevoir votre site Web dans son intégralité, il est recommandé d'utiliser le HTML 4.01 avec la DTD Strict. Cependant, si votre site Web est déjà rédigé en XHTML, nous vous déconseillons d'essayer de le convertir en HTML.

Outils de développement de contenu

Aux premiers abords, la lecture et l'écriture du langage HTML peut se montrer difficile en raison de la multitude de chevrons présents. C'est pour cette raison que de nombreux outils ont été développés au fil du temps pour permettre de créer et maintenir des pages HTML à l'aide d'une interface graphique généralement à mi-chemin entre un programme de traitement de texte et un navigateur Web. Toutefois, pour mieux comprendre le comportement des pages Web ou localiser les éléments susceptibles d'être optimisés, il est recommandé de consulter directement le code HTML source. Certains outils facilitent cette opération, tandis que d'autres la proscrivent. Heureusement, le code source est rédigé en texte brut et peut être chargé dans la plupart des éditeurs de texte. Tous les navigateurs Web reconnus disposent d'une option permettant d'afficher (et parfois d'éditer) le code source de la page en cours.

Chaque outil a ses spécificités et certains aboutissent à du code HTML de faible qualité. Dans ce domaine, Microsoft Word a plutôt mauvaise réputation. Bien qu'il soit possible de créer des documents HTML dans Word, une telle opération est fortement déconseillée. En effet, Word insère de nombreuses informations supplémentaires dans les documents HTML afin d'empêcher la perte des données lors du chargement des pages dans le programme de traitement de texte. Ces informations ne sont généralement pas nécessaires pour la conception Web. Dans Word, une simple page « Bonjour monde » est dix fois plus volumineuse qu'elle ne devrait l'être. (Exemple : optimisation d'une page Web générée par Microsoft Word)

Suppression des informations redondantes

Le moyen le plus simple de réduire la taille des pages de votre site Web est d'en supprimer toutes les informations inutiles. Avant d'entreprendre cette opération, examinez attentivement votre code HTML source. Recherchez tous les éléments qui ne sont pas directement liés au contenu et vérifiez s'ils ne peuvent être raccourcis ou entièrement supprimés.

Métabalises

Les métabalises[2] (ou métaéléments) HTML ont deux fonctions : fournir des instructions aux navigateurs et aux moteurs de recherche.

Chaque métaélément est associé à un nom et à une valeur. Ce nom est défini par l'attribut name ou http-equiv et cette valeur par l'attribut content. Exemple de métaélément :

<meta name='description' content='Aptivate vise à faciliter l'accès aux
 informations et aux communications dans le monde entier. Nos objectifs
 prioritaires sont les suivants : accès universel aux technologies
 informatiques et gestion de la bande passante.'/>

Les métaéléments fournissent des instructions aux navigateurs et aux moteurs de recherche. Les instructions destinées aux moteurs de recherche incluent les noms description, keywords et robots. Le nom keywords ayant souvent fait l'objet d'un usage détourné dans le passé, il est maintenant ignoré par la plupart des moteurs de recherche. Le nom robots permet d'empêcher les moteurs de recherche de parcourir votre site Web mais il est désormais plus efficace d'utiliser un fichier robots.txt à la place.

Les instructions destinées aux navigateurs sont généralement utiles lorsque vous n'avez aucun contrôle direct sur le serveur Web. Elles incluent des données équivalentes à celles des en-têtes HTTP, telles que la directive refresh qui remplace l'en-tête Refresh: dans les réponses HTTP. De même, le métanom Content-Type permet de spécifier le jeu de caractères du document sans avoir à modifier l'en-tête HTTP Content-Type. Si vous en avez la possibilité, configurez le serveur Web de manière à ce qu'il transmette les données de façon correcte et supprimez ces instructions.

Les autres métanoms, tels que Author et Generator sont ignorés par les navigateurs Web et peuvent donc être supprimés.

Eléments vides

Les espaces insécables( ) peuvent généralement être remplacés par un espace, à moins bien sûr que les deux mots ne doivent pas être séparés. Pratiquement tous les élémens vides de type :

<p>&nbsp;</p>

sont uniquement utilisés à des fins de présentation (pour créer un espace) et peuvent être remplacés par des marges ou du remplissage à l'aide de feuilles de style CSS.

Commentaires

Les commentaires tels que :

<!-- ceci fait partie d'un titre -->

sont utiles aux développeurs Web mais augmentent la taille des pages et sont ignorés par les navigateurs. Il est donc recommandé de les supprimer de vos sites Web avant la publication de ces derniers. Des outils d'optimisation, tels que HTML Tidy[3] , permettent de supprimer tous les commentaires de la source HTML grâce à une option de configuration hide-comments:yes. Ces outils vous permettent ainsi de conserver une version commentée de votre site Web à des fins de développement.

Espaces

Tout comme les commentaires, les espaces peuvent faciliter la lecture de la source HTML en mettant en retrait les divers niveaux d'éléments imbriqués mais ils ont également tendance à augmenter la taille des pages. Une fois encore, des outils tels que HTML Tidy[3] suppriment les espaces tout en vous permettant de conserver des versions de développement et de production distinctes.

CSS et JavaScript imbriqués

Les sections imbriquées style et script peuvent être transférées vers un fichier externe, lequel sera mis en cache par le navigateur. Cette règle ne s'applique pas aux petites quantités de CSS ou de JavaScript, où le délai de chargement du fichier externe serait supérieur au temps économisé.

Suppression des attributs par défaut

Le document Spécifications du HTML 4.01[4] répertorie chaque attribut ainsi que sa valeur par défaut. Certains attributs sont associés à des valeurs par défaut et il est donc inutile de les spécifier de façon explicite. Dans l'exemple de champ de saisie ci-dessous, il est inutile de spécifier l'attribut type étant donné que, par défaut, l'élément input se renvoie à un champ de texte.

<input size="31" name="q" type="text" />

Liens

Il existe plusieurs techniques permettant d'économiser l'espace et le temps potentiellement attribués à des liens, particulièrement sur les pages contenant plusieurs liens telles que les pages d'accueil et les plans de site.

Affichage de la taille des liens

Si vous insérez un lien dont la taille est supérieure à 75 Ko, il est recommandé d'indiquer la taille du fichier référencé en regard du lien. Par exemple :

Rapport PDF (237 Ko)

Utilisation d'URL relatives

Les adresses URL absolues consomment plus d'espace que les adresses URL relatives. Par exemple, pour créer un lien interne vers une page dont l'URL absolue est :

http://www.example.org/directories/news/sport/

et si le répertoire de base du document dans lequel le lien sera inséré est :

http://www.example.org/directories/news/

l'URL relative est alors :

sport/

Longueur des noms de répertoire et de fichier

Les adresses URL telles que :

http://www.exemple.org/Régional/Afrique/Sao_Tome_et_Principe/Science_et_Environment/

peuvent être abrégées de la manière suivante :

http://www.exemple.org/rég/af/st/SciEnv/

Réécriture d'URL

Vous pouvez utiliser la réécriture d'URL sur votre serveur Web pour automatiser l'abbréviation des liens. Ce procédé vous permet de réduire la longueur d'un lien sans pour autant perdre le sens sémantique de votre structure de répertoires. Il peut se montrer utile à la fois pour les éditeurs de sites Web et pour le classement par ordre de pertinence qui est mis en œuvre par les moteurs de recherche (certains moteurs de recherche se basent sur les mots-clés contenus dans les liens). Les liens se voient attribuer une URL courte en HTML, laquelle est ensuite remplacée par une URL plus longue et plus descriptive par le serveur. Par exemple, cette URL relative :

<a href="/r/24">

peut être résolue en :

http://www.exemple.org/médecine/

Cette technique est prise en charge par de nombreux serveurs, tels que Apache et IIS. Dans Apache, le module mod_rewrite[5] utilise des expressions régulières pour gérer la réécriture d'URL. ISAPI_Rewrite[6] fonctionne de manière similaire dans IIS.

Utilisation d'une barre oblique à la fin des liens de répertoire

N'oubliez pas d'ajouter une barre oblique (/) à la fin des liens qui pointent vers des répertoires. L'exemple ci-dessous :

<a href="http://www.exemple.org/nomrépertoire">

devrait se présenter de la manière suivante :

<a href="http://www.exemple.org/nomrépertoire/">

Si un utilisateur sollicite une page qui pointe vers un répertoire en oubliant d'ajouter une barre oblique, le serveur doit alors envoyer une demande de redirection au client de manière à ce que celui-ci charge la page à nouveau en y ajoutant une barre oblique. Sur les connexions lentes, cette opération de redirection peut prolonger le délai de chargement de plusieurs secondes.

Utilisation des classes

Les feuilles de style CSS (Cascading Style Sheets)peuvent elles aussi être utilisées de façon inefficace. Théoriquement, chaque élément de votre page peut servir d'élément de regroupement générique (div ou span) si vous spécifiez l'attribut class approprié. Ce type de procédé repose néanmoins sur un usage détourné du langage de balisage. Sans le CSS et sur les navigateurs où la prise en charge du CSS est limitée, le document perd la majorité de sa signification et s'affiche de façon incorrecte.

Utilisez des éléments HTML standard tels que des paragraphes, des images, des listes et des lignes horizontales dans la mesure du possible. Lorsque vous souhaitez changer l'aspect d'un élément, pensez à utiliser un sélecteur CSS pour l'identifier plutôt que de lui attribuer une classe. Les sélecteurs CSS vous permettent d'appliquer des règles de style à tous les éléments qui répondent à des critères particuliers.

Par exemple, supposons que vous souhaitez mettre en gras le premier paragraphe qui apparaît après chaque balise h2. Vous pouvez écrire le contenu CSS suivant :

p.bold { font-weight: bold }

et le contenu HTML suivant :

<h2>Titre sous-jacent</h2>
<p class="bold">Premier paragraphe en gras</p>
<p>...</p>

Toutefois, il est possible que votre page contiennent de nombreuses instances de ce type de paragraphe, auquel cas la spécification répétitive de class="bold" pour chaque paragraphe pourrait se montrer complexe et consommatrice de bande passante. Une solution à ce problème consiste à définir un sélecteur CSS s'appliquant à toutes les instances de ce type de paragraphe. De cette manière, vous n'êtes pas contraint de spécifier la classe de chaque paragraphe, à moins bien sur que vous ne souhaitiez remplacer le paramètre de classe par défaut.

Le contenu CSS résultant est le suivant :

h2 + p { font-weight: bold }

Cette méthode vous permettra d'obtenir un site Web plus facile à développer et à maintenir et de conserver un aspect cohérent, pour une navigation et une utilisation simplifiées.

Testez votre site en désactivant les feuilles de style CSS et assurez-vous qu'il reste facile à lire et à utiliser (malgré son manque d'esthétisme).

Pour plus de détails sur l'optimisation du CSS, reportez-vous au chapitre feuilles de style.

Chargement incrémentiel

Comme nous l'avons expliqué dans notre Introduction, les utilisateurs de sites Web sont prêts à patienter jusqu'à 30 secondes pour qu'une page se charge si des données pertinentes commencent à apparaître au bout de 2 secondes. Pendant que le reste de la page continue de se charger, les visiteurs de votre site doivent pouvoir commencer à lire un article ou naviguer vers une autre page.

Il est donc important que les outils de navigation se chargent et s'affichent aussi rapidement que possible dans les pages à chargement incrémentiel. Ceci s'applique aux barres de navigation ainsi qu'aux liens les plus fréquemment utilisés de la page. Pour cette raison, le nombre de liens apparaissant sur chaque page doit se limiter à une valeur raisonnable et les liens doivent être placés dans la partie supérieure de la page pour pouvoir se charger aussi rapidement que possible. N'oubliez d'utiliser des feuilles de style pour spécifier le positionnement et la mise en page. Elles vous permettent en effet de concevoir une navigation efficace en plaçant une liste « non classée » (à l'aide des balises ul et li en HTML) dans la partie supérieure du fichier (pour un chargement immédiat) tout en positionnant vos éléments de navigation à l'endroit souhaité de la page.

Les navigateurs modernes sont capables de reformater les pages Web à la volée et de les charger de façon incrémentielle. Certaines mises en page sont toutefois susceptibles d'empêcher ce processus.

Les arrangements complexes de tables imbriquées où la largeur des tables n'est pas fixe nécessitent que le navigateur ait chargé l'ensemble de chaque table pour pouvoir être affichés. Cela est dû au fait que la largeur de chaque colonne dépend de celle des autres colonnes. Or, si la table change de dimension pendant le chargement de la page, cela risque de décontenancer l'utilisateur. Il est donc préférable d'utiliser des éléments div stylisés avec des feuilles de style plutôt que des tables pour la mise en page de vos pages.

Pour vous assurer que les tables de données se chargeront de façon incrémentielle, vous pouvez spécifier le nombre de colonnes présentes dans chaque table ainsi que la largeur de chaque colonne. Pour ce faire, il vous suffit d'utiliser les éléments colgroup et col.

Les fichiers JavaScript prennent effet à l'endroit où ils apparaissent dans la page et ils doivent donc avoir été lus et exécutés pour que le chargement de la page puisse continuer. Vous pouvez éviter ce comportement en différant le chargement des fichiers JavaScript par le biais de l'attribut defer, tel que décrit dans le chapitre Sites interactifs.

Pour ralentir le chargement d'une page et vérifier qu'il s'effectue de façon incrémentielle, vous pouvez utiliser notre Simulateur de bande passante faible[7] pour observer sa progression. L'extension Firebug[8] de Firefox affiche l'ordre dans lequel le navigateur charge les fichiers et vous permet ainsi d'identifier les fichiers à l'origine du ralentissement.

Ensembles de cadrage

Les ensembles de cadrage vous permettent de diviser une fenêtre de navigateur en plusieurs zones, chaque zone affichant normalement une page différente. Ils vous permettent de placer un menu de navigation sur toutes les pages de votre site sans avoir à modifier les pages principales, ce qui contribue à réduire votre consommation de bande passante.

Les ensembles de cadrage posent toutefois certains problèmes d'usabilité. Ils peuvent réduire la quantité d'espace disponible sur les pages qu'ils contiennent et empêcher les utilisateurs de créer un lien direct ou un signet vers ces pages. En outre, ils désactivent généralement le bouton de retour à la page précédente du navigateur.

Nous vous recommandons donc d'éviter d'utiliser des ensembles de cadrage. Vous pouvez utiliser l'élément div pour obtenir des mises en page similaires à celles fournies par les ensembles de cadrage. Lorsque la taille des pages est limitée au minimum et que les informations de mise en page sont stockées dans un fichier distinct, la quantité de bande passante nécessaire pour charger les menus de navigation de chaque page est négligeable.

Références

[#1] Spécifications HTML 4.01 de W3C, http://www.w3.org/TR/html4/intro/intro.html (en date du 06/08/2007)

[#2] http://www.w3.org/TR/html401/struct/global.html#h-7.4.4

[#3] http://tidy.sourceforge.net/

[#4] http://www.w3.org/TR/html401/index/attributes.html

[#5] http://httpd.apache.org/docs/2.2/mod/mod_rewrite.html

[#6] http://www.isapirewrite.com/

[#7] http://www.loband.org/loband/simulator.jsp

[#8] http://www.getfirebug.com/

---