Introduction

De nombreux développeurs Web s'accordent sur le fait qu'il est important de concevoir des sites Web qui soient fonctionnels dans les environnements à bande passante faible. Ils ont donc créé divers outils prévus à cet effet. Les outils suivants nous paraissent particulièrement utiles.

Analyseur Websiteoptimization.com

L'ouvrage Speed Up Your Site[1] répertorie diverses techniques permettant d'accélérer un site Web. Malheureusement, ce livre est uniquement disponible d'occasion.

Le site Web[2] qui accompagne ce livre propose un analyseur de page Web[3] en ligne permettant de réduire la taille de vos sites Web et de vérifier qu'ils sont conformes aux instructions relatives à la durée de chargement et au nombre d'objets de chaque page.

Cet analyseur vous permettra d'accélérer votre site Web aussi bien dans les environnements à bande passante faible que dans les environnements normaux.

Modules supplémentaires de Firefox

Le navigateur Firefox est idéal pour les développeurs Web dans la mesure où il offre de nombreux plugins et modules supplémentaires conçus pour et destinés aux développeurs Web :

Barre d'outils du développeur Web

Conçue par Chris Pederick, la Barre d'outils du développeur Web[4] de Firefox contient de nombreuses options très utiles :

• Désactivez les images, les cookies, les feuilles de style CSS, les scripts JavaScript ou les données Java en deux clics.
• Modifiez les fichiers CSS et affichez le résultat en temps réel.
• Affichez la taille des images dans le navigateur.
• Affichez les clés d'accès et les indices d'onglet dans le navigateur.
• Affichez la taille des documents avec et sans compression.
• Affichez vos documents au format « petit écran » pour vérifier qu'ils sont compatibles avec les dispositifs mobiles.
• Définissez la taille de votre navigateur sur une taille d'écran standard telle que 800x600 ou 1024x768.
• Validez vos données HTML, vos feuilles de style CSS ainsi que l'accès à votre site à l'aide d'outils en ligne.
• Vérifiez votre site à l'aide du Rapport sur la vitesse des pages Web (voir ci-dessous).

Plusieurs des membres de notre personnel considèrent cet outil comme essentiel en matière de développement Web.

Firebug

Firebug [5] est une autre extension de Firefox conçue pour les développeurs. Tout comme la barre d'outils du développeur Web, cette extension vous permet d'éditer vos données HTML et CSS tout en affichant les modifications correspondantes en temps réel. Les fonctionnalités spécifiques à cette extension sont les suivantes :

• Affichez les attributs CSS de tous les éléments de la page.
• Affichez l'activité du réseau ainsi que la durée de chargement des fichiers en temps réel.
• Spécifiez des commandes JavaScript dans la console à des fins de débogage et de test.

L'affichage de l'activité du réseau peut se montrer particulièrement intéressant étant donné qu'il permet de connaître l'ordre dans lequel les pages et leurs pages sous-jacentes sont chargées, de mettre en valeur les mécanismes qui unissent les diverses pages et de mesurer la durée de chargement de chacune.

Live HTTP Headers

Live HTTP Headers est un plugin destiné au navigateur Firefox permettant d'afficher les en-têtes HTTP. Pratique, il permet de vérifier si la compression et la mise en cache sont activées sur votre serveur Web.

Outils Pingdom

Tout comme Firebug, ce site Web[6] vous permet de connaître la durée de chargement de chacune des pages de votre site mais cette fois à partir d'un serveur externe. Ce site Web peut se montrer très utile si vous disposez d'une connexion haut débit à votre serveur ou à Internet puisqu'il vous permet de charger les pages de votre site Web de façon plus lente. Des serveurs supplémentaires devraient bientôt être déployés en Europe, en Afrique et en Asie.

Simulateur de bande passante faible d'Aptivate

Nous avons développé ce simulateur[7] pour montrer aux utilisateurs de connexions haut débit l'effet produit par une connexion lente. Si vous vous souvenez du temps où vous deviez accéder à Internet par le biais d'un modem ou si vous avez déjà essayé d'utiliser un téléphone portable à cette fin, vous savez sans doute à quel point les communications sur Internet peuvent être laborieuses dans de tels contextes.

Cet outil fonctionne pour la majorité des sites Web et offre un aperçu de l'effet produit par les connexions lentes.

Loband

Loband [8] est le nom de notre moteur de simplification Web. Ce moteur permet de simplifier les pages Web de manière à ce qu'elles soient chargées plus rapidement sur les connexions lentes. Vous pouvez utiliser Loband en combinaison avec le simulateur ci-dessus pour constater le résultat sur une connexion lente.

Navigateurs pour test de compatibilité

Comment tester la compatibilité d'un site avec divers navigateurs : instructions

Outils de validation

En vérifiant que les données HTML et CSS de votre site sont conformes aux standards en vigueur, vous pourrez vous assurer que les pages de votre site pourront être interprétées sur un maximum de navigateurs. Pour ce faire, le W3C offre un service de validation XHTML [9] ainsi qu'un service de validation HTML et CSS[10] , lesquels peuvent se montrer très utiles si vous ne disposez pas de la barre d'outils du développeur Web de Firefox.

Optimisateurs de taille de fichier CSS

Des outils d'optimisation sont disponibles pour vous permettre de supprimer les commentaires et les espaces de vos feuilles de style et de combiner ou abréger les règles de mise en forme qu'elles contiennent. Au moment de la rédaction de cette page, les compresseurs en ligne ci-dessous présentaient le plus d'avantages (par ordre de préférence). Notez toutefois que ces outils ne sont pas infaillibles et qu'ils introduisent parfois des bogues dans les fichiers CSS. Nous vous recommandons donc de tester vos fichiers CSS résultants avec votre site et de changer de compresseur si nécessaire.

• Icey CSS Compressor[11]
• Cleancss[12]

Optimisateurs de taille de fichier de script

Les fichiers JavaScript et VBScript peuvent eux aussi être simplifiés par le biais de filtres. Les espaces sont ainsi réduits et les retours à la ligne supprimés. De même, les variables et les noms de fonction sont abrégés. Souvent irrémédiable, ce processus produit généralement des fichiers de script difficiles à lire et nous vous recommandons donc de conserver une copie de l'original au cas où vous souhaiteriez apporter des modifications ou effectuer un débogage par la suite.

• JSMin[13] par Douglas Crockford : filtre pour fichier JavaScript ;
• ESC[14] par Saltstorm : fichier configurable fonctionnant avec divers hôtes de script ;
• JSLint[15] par Douglas Crockford : validateur de fichier JavaScript, utile pour vérifier que le code est correct avant traitement (les bogues sont souvent difficiles à détecter dans le code traité).

---

Références

[#1] Andrew King "Accélérez votre site : optimisation de site Web" (anglais), New Riders Publishing 2003

[#2] http://www.websiteoptimization.com/

[#3] Analyseur de page Web, http://www.websiteoptimization.com/services/analyze/

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

[#5] Firebug, http://www.getfirebug.com/

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

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

[#8] Loband, http://www.loband.org/

[#9] Validateur XHTML du W3C, http://validator.w3.org/

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

[#11] http://iceyboard.no-ip.org/projects/css_compressor

[#12] http://www.cleancss.com/

[#13] Optimisateur de taille de fichier JavaScript, http://www.crockford.com/javascript/jsmin.html

[#14] Optimisateur de taille de script, http://www.saltstorm.net/depo/esc/

[#15] Outil de validation de fichier JavaScript, http://www.jslint.com/lint.html