[Techdays 2011]: Améliorer les performances Web : optimisation côté client.

Plusieurs études, réalisées par différents acteurs de la Web économie, ont montré qu’une augmentation du temps d’affichage du page Web entraîne une baisse du chiffre d’affaires. De plus, bien que les débits explosent (100 MB/s pour la fibre), le chargement du page Web plafonne à 1600 KB/s. Tout ceci montre bien l’intérêt qu’a une entreprise à améliorer la performance de ses sites Web.

La Cascade : base de travail

Pour améliorer les performances d’une page Web, il faut d’abord identifier les points bloquants de son chargement. Pour cela, il faut utiliser la cascade, il s’agit d’un graphique recensant tous les chargements de la page (HTML, images, javascript, CSS, …). En voici un exemple :

Sur la page exemple de la FNAC, présentée par Nicolas Hoizey, on observe que 5% du temps nécessaire au chargement est consommé du côte serveur et 95% du côté client. On voit bien par cet exemple, l’intérêt d’optimiser le côté client.

Pour obtenir cette cascade, le développeur a à sa disposition plusieurs outils (liste non exhaustive) :

• IE9 Developer tools sous IE9
• Firebug (onglet Réseau) sous Firefox
• Webkit Developer Tools sous Safari
• Speed Tracer sous Chrome

Il existe aussi des extensions pour Firebug (Yslow) et Chrome (pagespeed) qui analysent la page Web et lui donnent une note ainsi que des recommandations pour améliorer ses performances.

Parmi les outils en ligne, on peut citer webpagetest.org qui permet de tester les accès de votre site via IE depuis n’importe quel point dans le monde, et webmaster Tools de Google.

Enfin, il existe des outils d’optimisation tels que mod_pagespeed pour Apache ou Doloto chez Microsoft qui automatisent l’application de certaines bonnes pratiques en se basant sur des filtres. Certains étant à utiliser avec prudence.

Les bonnes pratiques :

• Eviter les redirections (.fr vers .com par exemple).
• Pas d’erreur 404 dans les ressources liées.
• Pas de ressources liées non utilisées.
• Réduire la latence (rapprocher le client du serveur) en mettant en place un CDN (Content Delivery Network), surtout pertinent en cas de public international.
• Réduire le nombre de requêtes DNS : limiter le nombre de domaines utilisés (un domaine = une requête).
• Réduire le nombre de requêtes en :
  • Exploitant le cache du navigateur.
  • Configurant le serveur pour cacher les ressources statiques (images, javascript, css) et en leur donnant une date d’expiration.
  • Concaténant les fichiers javascript en un seul fichier. Faire de même pour les fichiers CSS.
  • Combinant les images sous forme de sprites (toutes les images de même type sont regroupées dans une seule image, l’affichage se faisant à l’aide du CSS). Il existe des outils gratuits sur le web qui génèrent les sprites et le CSS correspondant.
• Réduire le poids des requêtes en :
  • compressant tout via le serveur avec GZIP par exemple.
  • Minifiant tous les fichiers (HTML, Javascript, CSS).
  • Réduisant le poids des images par la suppression des metadatas inutiles et en choisissant le bon format (Gif, Jpeg,  png).
• Eviter les cookies inutiles. Les cookies alourdissent les requêtes vers le serveur, donc si cela est possible, servir les ressources statiques dans un domaine sans aucun cookie.
• Répartir les ressources sur plusieurs domaines ou sous-domaines car le navigateur limite le nombre de téléchargements simultanés par domaine. Dans la norme HTML 1.1 cette limite est à 2, en pratique entre 6 et 8. Mais il faut faire attention car trop de domaines entraînent trop de requêtes DNS. Il est donc conseillé d’avoir entre 2 et 4 domaines selon usage.
• Optimiser le rendu du navigateur en :
  • Ordonnançant le chargement des ressources : HTML et CSS au plus vite
  • Optimiser le Start Render.
  • Eviter le reflow (redessin de la page) avec des CSS tardives.
  • Faire du flush partiel de HTML.
  • Chargement du javascript le plus tard possible car cela bloque les autres chargements pendant son exécution.
  • Différer le chargement des ressources qui ne sont pas utiles au départ (lazy loading).
• Nettoyer les CSS et javascripts du code inutile.
• Tenir compte des performances des CSS, javascripts et frameworks utilisés.
• Attention aux ressources externes (ressources provenant de tiers, outils de statistiques, régie publicitaire, widgets de partenaires) car elles peuvent être consommatrices de temps. Il existe un site https://stevesouders.com/p3pc qui recense le coût de certaines ressources externes.