Introduction

Si vous souhaitez créer un site Web qui soit accessible dans les environnements à bande passante faible mais que vous ne disposez pas d'une équipe de développement Web sur qui compter, il est probable que vous vous devrez vous adresser à une société de conception Web. Or, même si vous demandez à vos concepteurs de pages Web de rendre votre site accessible dans le monde entier, comment pouvez-vous être sûr qu'ils comprendront toutes les implications associées à cette condition ? Comment pouvez-vous vous assurer que le site Web résultant sera fonctionnel sur les connexions à bande passante faible ?

L'objectif de ce Guide d'infogérance est de vous aider à rédiger un dossier d'appel d'offres contenant des critères d'acceptation clairs pour vous permettre d'obtenir un site Web opérationnel dans les environnement à bande passante faible. Ce guide contient également des instructions visant à vous permettre de vérifier que votre site Web répond aux critères établis.

Conception progressive et itérative

Lorsque vous confiez la création de votre site Web à une entreprise spécialisée, il est possible que vous ne sachiez pas vraiment ce à quoi vous attendre. Même si vous commencez avec une idée claire en tête, il est probable que votre idée initiale sera amenée à évoluer au cours du projet. Plutôt que d'établir des spécifications techniques trop rigides dès le début, nous vous recommandons de gérer le projet de façon progressive. Spécifiez vos objectifs globaux puis affinez vos idées à mesure que le site Web progresse, en vérifiant régulièrement les éléments produits. Cette méthode de travail (méthodologie agile) se prête particulièrement bien à la conception Web. Elle permet d'obtenir des résultats satisfaisants de manière flexible et efficace. Veuillez vous reporter au site d'Agile Alliance[1] pour plus de détails.

Test du site Web

Le processus de test étant généralement considéré comme coûteux et long, il est souvent ignoré à tort. Chaque site est unique et le seul moyen de vérifier si un design fonctionne correctement est donc de le tester. Le recours à un échantillon aléatoire d'utilisateurs, à des questionnaires approfondis et à des tests professionnels en laboratoire est certes coûteux mais des méthodes de test bien plus simples et efficaces existent toutefois. Il vous suffit d'un ou deux utilisateurs chargés d'effectuer des tâches typiques et d'un observateur chargé de prendre des notes. Mieux vaut également tester votre site plusieurs fois au cours du projet, lorsque les éventuels problèmes peuvent encore être facilement corrigés, plutôt que d'effectuer un unique test final.

Simulateurs et analyseurs

Les simulateurs vous permettent d'avoir une meilleure idée de l'effet produit par votre site Web sur les connexions à bande passante faible. Ils font partie intégrante du processus de test. Les analyseurs sont également importants dans la mesure où ils vous permettent de vérifier si un site se conforme aux limites recommandées, notamment en matière de taille de page. Pour obtenir plus de détails ainsi que des liens utiles, veuillez vous reporter à la page relative aux Outils.

Critères d'acceptation

Lorsque vous impartissez un projet technique à une société externe, l'une des principales difficultés est de définir les tâches qui devront être mises en œuvre. Le plus important est donc de définir des objectifs à atteindre. Si vous avez choisi des développeurs compétents, vous n'aurez probablement pas à définir la méthodologie à adopter. Pour définir vos objectifs, nous vous recommandons de dresser une liste de vos critères d'acceptation (conditions auxquelles vous accepterez le produit finis). Les critères d'acceptation suivants établissent un certain nombre de conditions quantifiables susceptibles d'être insérées dans un contrat ou utilisées pour évaluer le produit finis. Des explications ainsi que des instructions permettant de vérifier la qualité du site produit vous sont ensuite fournies.

Critères d'acceptation

Critère 1 : limite de 25 Ko pour les pages à chargement non-incrémentiel

Motif

Vos pages se chargeront à une vitesse raisonnable (en moins de 10 secondes sur les connexions à 20 Kbits/s).

Verification

Pour vérifier que votre site satisfait ce critère, analysez chaque page de votre site par le biais d'un analyseur de page Web tel que le service Web Page Speed Report[2].

Critère 2 : limite de 75 Ko pour les pages à chargement incrémentiel

Motif

Lorsqu'une page se charge de façon incrémentielle, les utilisateurs sont généralement prêts à attendre plus longtemps (jusqu'à 30 secondes). Notez qu'il est toutefois important que du contenu pertinent s'affiche dès les deux premières secondes.

Vérification

Le simulateur de bande passante faible[3] vous permet de vérifier à quelle vitesse vos pages se chargent sur les connexions à bande passante faible. Définissez la bande passante sur 14,4 Kbits/s, puis vérifiez que le contenu pertinent de votre site se charge en moins de deux secondes et que le reste de la page se charge en moins de 30 secondes.

Critère 3 : chargement prioritaire des liens de navigation principaux

Motif

Il est possible qu'un utilisateur ne soit pas intéressé par le contenu d'une page et souhaite naviguer vers une autre page sans avoir à attendre que l'ensemble de la page ait finit de se charger.

Vérification

Si votre connexion à Internet est si rapide qu'il vous est impossible de vérifier l'ordre dans lequel chaque élément est chargé, vous pouvez utiliser le simulateur de bande passante faible[3] pour ralentir le processus de chargement et vérifier que les liens de navigation principaux s'affichent en premier.

Critère 4 : liens vers des objets de plus de 75 Ko clairement libellés

Motif

Il est important que les utilisateurs soient conscients de la taille des objets volumineux avant de les télécharger.

Vérification

Pour vérifier que ce critère est satisfait, il vous suffit d'inspecter votre site Web. La taille de chaque objet lié doit apparaître en regard du lien (exemple : Rapport PDF (237 Ko).

Critère 5 : prise en charge de différents navigateurs

Motif

Les navigateurs Explorer 6 et 7 et Firefox 2 doivent être pris en charge. En effet, à eux trois, ces navigateurs représentent 90 % du marché.

Veillez également à tester votre site à l'aide d'autres navigateurs tels qu'Opéra, Safari, Internet Explorer 5, Firefox 1.5 et Konqueror, lesquels représentent un part non négligeable du marché, ainsi qu'avec des navigateurs d'ancienne génération, tels que Netscape 4 et Lynx.

Vérification

Téléchargez les navigateurs dont vous ne disposez pas encore afin de vérifier s'ils prennent en charge votre site Web. Des liens vers différents navigateurs gratuits vous sont fournis dans le chapitre Compatibilité avec les navigateurs.

Critère 6 : contenus statique et dynamique

Motif

Avec le contenu statique, votre système peut facilement s'assurer que les pages ne seront chargées à nouveau que si le contenu de votre site a été modifié. Etant donné que ce n'est pas le cas avec le contenu dynamique, vous devez vous assurer que le système dispose des informations nécessaires pour vérifier si les pages ont été modifiées.

Vérification

Vous devez vérifier que les scripts envoient des en-têtes Last-Modified avec chaque réponse. Modifiez une page, puis vérifiez que la date fournie dans l'en-tête est correcte. Divers outils tels que Live HTTP Headers[8] vous permettent d'afficher vos en-têtes Last-Modified et Expires.

Critère 7 : définition des en-têtes de réponse HTTP Expires

Motif

La définition de ces en-têtes permet d'accélérer le chargement des pages.

Vérification

Vérifiez que toutes les pages Web de votre site contiennent une ligne de type 'Expires: ' suivie d'une date.

Critère 8 : mise en cache non désactivée par des en-têtes Cache-Control

Motif

Lorsqu'elle est correctement configurée, la mise en cache permet de réduire la consommation de bande passante des utilisateurs de votre site de façon considérable. Toutefois, l'utilisation erronée des en-têtes Cache-Control peut entrainer la désactivation complète de la mise en cache. Notez que certains systèmes de gestion du contenu (CMS) et certains Wiki génèrent automatiquement des en-têtes Cache-Control.

Vérification

Tous les en-têtes suivants entraînent la désactivation complète de la mise en cache : Pragma: no-cache, Cache-Control: no-cache, Cache-Control: max-age=0 (ou nombre négatif).

Critère 9 : actualisation automatique des pages désactivée

Motif

Si vous souhaitez que les pages de votre site Web puissent être actualisées de manière automatique, vous pouvez proposer une fonctionnalité spécialement prévue à cet effet aux utilisateurs. Dans la mesure où l'actualisation automatique occasionne généralement des pertes de bande passante considérables, il est préférable de laisser les utilisateurs décider s'ils souhaitent la mettre en œuvre ou non.

Vérification

Vérifiez que la ligne Refresh: 0 n'est pas présente dans l'en-tête HTTP et que la ligne <</i>meta http-equiv="refresh" content="0"> n'apparaît pas dans la page HTML.

Critère 10 : compression activée

Motif

Lorsqu'elle est activée à la fois du côté serveur et du côté navigateur, la compression réduit automatiquement la taille des téléchargements de texte (HTML, CSS et JavaScript) de 50 à 90 %.

Vérification

La barre d'outils du développeur[4] de Firefox vous permet de vérifier si la compression est activée. Une fois la barre d'outils téléchargée, cliquez sur Information > View Document Size pour afficher une page d'informations indiquant la taille du document. Si la compression a été activée, deux nombres apparaissent indiquant la taille de la page avec et sans compression (exemple : 7 KB (22 KB uncompressed).

Critère 11 : conformité

Motif

Le W3C (World Wide Web Consortium) est un comité international chargé d'établir les principaux standards d'Internet. Nous vous recommandons de soumettre votre site Web à ses tests de validation pour vérifier qu'il se conforme aux pratiques recommandées et qu'il ne présente aucun problème de code incorrect.

Vérification

Le W3C fournit des validateurs pour les données HTML[5] et CSS[6].

Critère 12 : mise en page fournie par le biais de feuilles de style

Motif

Il est important de séparer le contenu de votre site Web de sa présentation pour plus d'efficacité. Si le contenu est rédigé dans un langage de balisage tel que l'HTML, veillez à placer les éléments de présentation dans une feuille de style CSS plutôt que dans le code. La méthode la plus simple consiste à regrouper toutes les informations présentationnelles sous forme d'une seule et même feuille de style.

Vérification

Vérifiez que vos pages Web ne contiennent aucune balise et sont liées à une feuille de style CSS.

Critère 13 : fonctionnement sans image

Motif

Les images prolongent le délai de téléchargement global des pages Web et doivent donc être utilisées avec précaution. Certains utilisateurs désactivent les images pour accélérer le processus de téléchargement et votre site Web doit donc pouvoir être utilisé même lorsque les images sont masquées.

Vérification

Désactivez les images sur votre navigateur et assurez-vous que votre site Web fonctionne toujours. Par exemple, dans Firefox, vous pouvez désactiver les images en cliquant sur Edit > Preferences > Content, puis en désélectionnant la case Load images automatically.

Critère 14 : fonctionnement sans JavaScript

Motif

L'utilisation inappropriée des scripts JavaScript peut entraîner des pertes de bande passante et compromettre la lisibilité de votre site Web. Certains utilisateurs désactivent les scripts JavaScript sur leur navigateur et votre site Web doit donc pouvoir être utilisé même sans script.

Vérification

Désactivez les scripts JavaScript sur votre navigateur et assurez-vous que votre site Web fonctionne toujours. Dans Firefox, vous pouvez désactiver les scripts JavaScript en cliquant sur Edit > Preferences > Content et en désélectionnant la case Enable JavaScript.

Critère 15 : alternatives aux médias consommateurs de bande passante

Motif

Les fichiers multimédia sont parfois trop volumineux pour pouvoir fonctionner sur les connexions à bande passante faible. Veillez à fournir des alternatives de taille moindre si possible.

Vérification

Pensez à fournir des versions audio et textuelle de toutes les vidéos publiées sur votre site Web ainsi qu'une version textuelle des fichiers audio diffusés. Vérifiez que des versions HTML ou textuelles sont fournies pour les fichiers PDF. Toutes les images volumineuses doivent être liées par le biais de miniatures ou de versions de taille moindre.

Critère 16 : seuil de 10 requêtes HTTP

Motif

Le délai de téléchargement de votre site dépend du nombre de requêtes HTTP nécessaires à la récupération des éléments de chaque page. Pour améliorer les performances de votre site, il est donc important de réduire le nombre de requêtes HTTP que celui-ci nécessite.

Vérification

Analysez chacune de vos pages à l'aide de l'outil Pingdom Tools[7] ou Live HTTP Headers[8] pour connaître le nombre de requêtes HTTP envoyées.

Critère 17 : fichiers PDF optimisés

Motif

Tout comme les objets multimédia, les fichiers PDF volumineux peuvent être difficiles à télécharger sur les connexions lentes. Les PDF optimisés pour l'impression plutôt que pour l'affichage peuvent en effet présenter une taille considérable. Ce sont généralement les images et les polices qui contribuent à cette augmentation de taille. Pour optimiser vos fichiers PDF, vous pouvez réduire leur niveau de qualité et fractionner leur contenu.

Vérification

Si vous disposez d'un outil d'audit de fichier PDF, tel qu'Acrobat Professional[9] d'Adobe, vous pouvez l'utiliser pour analyser le contenu de vos fichier PDF. Dans le cas contraire, vérifiez que vos fichiers PDF présentent une taille raisonnable.

---

Références

[#1] http://www.agilealliance.org/

[#2] http://www.websiteoptimization.com/services/analyze/index.html

[#3] Simulateur de bande passante faible d'Aptivate, http://www.loband.org/loband/simulator.jsp

[#4] Barre d'outils du développeur Web, https://addons.mozilla.org/en-US/firefox/addon/60

[#5] Validateur HTML du W3C, http://validator.w3.org/

[#6] Validateur CSS du W3C, http://jigsaw.w3.org/css-validator/

[#7] Outil Pingdom, http://tools.pingdom.com/fpt/

[#8] Live HTTP Headers https://addons.mozilla.org/en-US/firefox/addon/3829

[#9] Adobe Acrobat Professional http://www.adobe.com/products/acrobatpro/