Comme tout site Internet, les applications web JEE destinées au web (eCommerce, CMS, …) doivent tenir compte en priorité de l’expérience utilisateur. Dans cette optique, les temps de réponse des pages et le rendu côté client sont des critères essentiels de réussite.
Première étape : le diagnostic
Un simple plugin pour Firefox, nommé Firebug, permettra de faire un diagnostic rapide de la cause d’un chargement trop long d’une page web. Il suffit, une fois le plugin installé, de charger la page désirée. Attention à bien prendre en compte dans un premier temps le cas où le cache navigateur est vide – afin de fidéliser le visiteur, il faut au préalable qu’il apprécie sa 1ère visite ! Aller ensuite sur l’onglet « Réseau » de Firebug. Voici le résultat pour la page www.salto-consulting.com :
Que voit-on ? Firebug indique plusieurs informations intéressantes :
- listing des ressources téléchargées
- pour chaque ressource, poids et temps de téléchargement par le navigateur
- téléchargements effectués en parallèle ou non
- statut des ressources : des images en 404 (non trouvées), par exemple, ralentiront le chargement de la page
Le premier indicateur à observer, pour savoir dans quelle direction doit s’orienter le travail, est le temps de réponse de la page HTML. Dans la plupart des cas, on constate que le HTML est téléchargé rapidement, et que le navigateur passe une grande partie du temps de chargement de la page à télécharger et interpréter l’ensemble des ressources nécessaires à son bon affichage. Si ce n’est pas le cas, vous pouvez arrêter là la lecture, et retrousser vos manches pour optimiser votre code côté serveur…
Pour chaque ressource, en passant le curseur sur les barres de couleur, on obtient précisément le temps passé pour chaque événement : recherche DNS, connexion, attente… Ces éléments permettent de cerner avec précision ce qui fait défaut.
Alors qu’une optimisation de fond des temps de réponse du serveur est une tâche conséquente, avec des risques de régression induits, une simple optimisation du côté front peut améliorer significativement les temps de réponse d’une page web.
Nous verrons donc dans une prochaine partie comment optimiser le code web.