Introduction

L'optimisation d'un site Web commence dès sa conception. Avant d'évoquer plus en détail les méthodes qui vous permettront d'optimiser vos données HTML, CSS ou d'image, nous allons dans un premier temps observer comment votre stratégie de conception de haut niveau peut affecter la consommation de bande passante de votre site Web.

Structure de site

Tout comme un réseau routier efficace, votre site Web doit être correctement connecté et signalisé. En conférant une hiérarchie logique aux pages de votre site Web, vous éviterez aux utilisateurs de gaspiller la bande passante en chargeant des pages inutiles avant de trouver celle souhaitée.

Avant de choisir l'aspect visuel de votre site, il est important que vous ayez organisé chaque page selon une hiérarchie cohérente.

Pour ce faire, n'hésitez pas à consulter quelques personnes susceptibles d'utiliser votre site Web si nécessaire. Fournissez-leur une liste de vos pages et demandez-leur de les classer par catégorie. Demandez ensuite à vos utilisateurs potentiels d'attribuer un nom à chaque catégorie. Ces catégories et ces noms vous aideront ainsi à concevoir les menus et les liens qui permettront aux utilisateurs de naviguer dans votre site Web.

Prenez par exemple le site Web d'un éditeur de journaux. Ce site pourrait présenter la structure suivante :

• Journaux les plus populaires
• Journaux de A à Z
  • Journaux A
  • Journaux B
  • ...
• Journaux par thème
  • Arts
    • Arts appliqués
      • Design
      • Photographie
      • ...
    • Architecture
    • ...
  • Commerce
    • ...
  • ...
• Recherche dans le catalogue
• Qui sommes-nous ?
• Contact

La navigation dans votre site doit pouvoir s'effectuer de manière à la fois simple et intuitive afin de minimiser les délais de téléchargement. Dans l'exemple ci-dessus, les journaux les plus populaires pourraient même être directement référencés sur la page d'accueil, le téléchargement ne consistant alors plus qu'en une seule étape. L'index alphabétique permettrait aux utilisateurs de rechercher des journaux dont ils connaissent le titre. L'index par thème offrirait une méthode de recherche secondaire pour les utilisateurs ne connaissant pas le titre du journal recherché. Par défaut, le moteur de recherche permettrait aux utilisateurs de rechercher des journaux par mot-clé tandis qu'une éventuelle option de recherche avancée les autoriserait à affiner leur recherche en spécifiant un auteur ou une date.

Si votre site Web contient des liens vers des documents appartenant à d'autres sites, il est important que les utilisateurs puissent également accéder à ceux-ci avec un minimum d'efforts. Théoriquement, les documents devraient pouvoir être téléchargés directement à partir de votre site Web, sans que l'utilisateur n'ait à naviguer dans le site Web référencé.

Navigation simplifiée

Les utilisateurs doivent pouvoir naviguer dans votre site même lorsque JavaScrit est désactivé et sans qu'aucun plug-in tiers tel qu'Adobe Flash Player ne doive être installé sur votre navigateur Web.

Ils souhaitent généralement pouvoir accéder rapidement aux informations concernées, sans avoir à passer par des étapes intermédiaires, telles qu'en devant saisir leurs coordonnées avant de s'inscrire ou se connecter. Si l'accès à certaines zones de votre site est limité aux utilisateurs enregistrés, prévenez-en vos utilisateurs mais ne les forcez pas à s'inscrire ou à se connecter avant qu'ils n'aient trouvé l'information qu'ils recherchaient. Les utilisateurs sont moins susceptibles de s'inscrire ou de se connecter si aucun contenu ne les y incite.

Langue

Selon le public visé, il est possible que vous soyez contraint de rendre votre site accessible dans plusieurs langues. Les utilisateurs doivent être en mesure d'accéder à une version traduite de votre page d'accueil sans avoir à charger cette dernière dans la langue par défaut. Veillez à signaler clairement les zones de votre site qui ne sont disponibles que dans une seule langue.

Améliorations supplémentaires

Une structure explicite et une navigation intuitive sont les éléments clé d'une conception réussie. Pour les sites Web plus volumineux, ces éléments peuvent être complétés d'un plan ou index du site (voir le chapitre Recherche pour plus de détails).

Contenu statique ou dynamique

Comme leur nom l'indique, les pages statiques ne changent pas. A l'opposé, les pages dynamiques sont créées à la volée à l'aide de langages de script tels que le PHP.

L'approche statique permet aux utilisateurs de mettre le contenu en cache et, par conséquent, de réduire leur consommation de bande passante tout en réduisant les délais de chargement. Des informations supplémentaires sur la mise en cache vous sont fournies dans le chapitre Mise en cache.

Des scripts sont parfois utilisés lors de la mise à disposition des pages statiques. Par exemple, tout nouveau site est susceptible d'archiver des articles stockés dans une base de données. Des scripts côté serveur permettent de générer des pages Web à partir du contenu de la base de données mais les pages de chaque article sont en réalité statiques. Les Systèmes de gestion de contenu (CMS, Content Magangement Systems) et les scripts côté serveur génèrent ces pages de sorte que les utilisateurs ne soient pas en mesure de les mettre en cache. Ils ne définissent par exemple aucun en-tête Expires ou Last-Modified ou désactivent la mise en cache.

Le contenu statique permet également au serveur Web de déterminer la longueur du fichier et d'envoyer une en-tête Content-Length. Le navigateur peut alors afficher le statut de progression du téléchargement de la page. Cette particularité s'avère très importante pour les pages volumineuses. Si l'utilisateur ne constate aucun signe de progression dans les 10 secondes qui suivent l'initialisation, il est probable qu'il abandonnera ou réinitialisera la page.

Limitation du nombre de demandes HTTP

Pour être exécutée, chaque ressource de votre site Web nécessite une demande et une réponse HTTP. Cela signifie que chaque image, chaque fichier CSS ou JavaScript et chaque page HTML nécessite une demande HTTP rindividuelle. Or toute demande est associée à un temps système et à une latence. Si un nombre trop important de demandes est envoyé, le chargement de la page ralentit. Il est donc important de limiter les demandes HTTP au minimum. Pour cela, essayez de concevoir des pages qui ne nécessitent pas trop de ressources. Les fichiers CSS peuvent être combinés pour réduire la latence. Ce principe s'applique également aux fichiers JavaScript et aux images.

Taille d'écran

W3Schools[1] affirme que 14 % de ses visiteurs utilisent toujours des écrans à 800x600, or ce site s'adresse à une communauté de développeurs Web dont les écrans haute résolution devrait théoriquement dépasser ceux d'un utilisateur Web moyen. Nous estimons que 30 % des utilisateurs issus de pays en voie de développement disposent d'un écran d'une résolution de 800x600.

Nous vous conseillons donc de concevoir votre site Web de manière à ce qu'il puisse être facilement redimensionné quelle que soit la taille de fenêtre du navigateur. Si vous devez spécifier une taille, utilisez un pourcentage (de l'élément conteneur) ou une mesure en ems (calculée par rapport à la taille de police de l'élément) plutôt qu'une mesure en pixels. Nous vous recommandons également de tester votre site Web avec plusieurs tailles de police et de fenêtre de navigateur afin de vérifier qu'il peut être utilisé dans diverses conditions.

Toutefois, si vous devez attribuer une résolution d'écran particulière à votre site Web, spécifiez une résolution de 800x600.

Références

[#1] http://www.w3schools.com/browsers/browsers_display.asp

---