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.

Deuxième étape : l’optimisation du front-end

Tout d’abord, présentons quelques outils et sites qui permettent de visualiser le bénéfice apporté par des améliorations côté front-end :

• Page Speed (Google) et YSlow (Yahoo) : extensions à Firebug, ils permettent de vérifier sur la page courante le respect d’une liste de best practice, et attribuent une note et des commentaires en fonction.
• GTmetrix : site qui intègre Page Speed et Yslow mais sans installation de plugin, très simple et ergonomique. Son principal intérêt supplémentaire est qu’il permet de suivre l’évolution de la performance d’une page web jour après jour : temps de chargement, poids, nombre de requêtes, notes sur les indicateurs Page Speed / Yslow.
• WebPageTest : Complémentaire du précédent, il permet de tester le temps de chargement d’une page web sur IE7/IE8 (les navigateurs les plus courants). Il donne des résultats très complets et offre des possibilités intéressantes : choix de l’emplacement géographique, type de connexion internet, avec et sans cache, …

Quelques techniques d’optimisation

Note : Il ne s’agit pas ici d’être exhaustif, ni de rentrer dans les détails techniques. Nous voulons simplement donner quelques axes prioritaires à travailler pour améliorer la performance web, où le rapport temps passé/gain est optimal.

Réduire le nombre de requêtes HTTP (fichiers JS et CSS)

La latence réseau causée par la multiplication des téléchargements peut être la principale cause de lenteur de chargement d’une page. Il est vital de réduire le nombre de requêtes. Pour cela, on pourra par exemple concaténer les différents fichiers CSS et JS en un seul par page. Le but est de conserver une cohérence dans le développement et un code lisible, tout en minimisant le nombre de requêtes HTTP. On agira donc sur le processus de déploiement pour effectuer cette tâche (un procédé parmi d’autres : la tâche concat de Ant)

Réduire le poids des fichiers JS et CSS

Il est possible de réduire de façon assez importante le poids de ces fichiers grâce aux procédés de minification et d’obfuscation. La minification permet de nettoyer le code des espaces, tabulations et retours chariot inutiles. L’obfuscation, procédé plus intrusif, modifie carrément le code : renommage des variables / méthodes, modification des algorithmes… Attention dans ce cas aux risques de régression. Divers outils existent, parmi eux nous citerons YUI Compressor. Encore une fois, on agira sur le processus de déploiement, cette optimisation reste transparente lors du développement.

Gestion des fichiers images

Sur beaucoup de sites les images sont la principale cause d’une page lourde. Il est nécessaire de s’assurer que les images utilisées ont un poids optimisé par rapport à leur taille et leur qualité (ceci n’étant pas forcément du ressort de l’équipe technique). Il va de soi que pour afficher une image de 120×120 dans une vignette 30×30, il est préférable de la redimensionner avec un logiciel adapté (GIMP) qu’effectuer la redimension avec les paramètres height et width.Utiliser le bon format est également important : PNG est généralement plus léger que GIF à qualité égale. GIF sera éventuellement plus efficace sur les images très petites (puces…). On pourra utiliser des logiciels de compression d’images, créés spécififquement pour le web : smush it, OptiPNG, pngcrush, … Enfin, il est important de toujours spécifier les paramètres « width » et « height » sur les images (de préférence via la CSS). Si ce n’est pas le cas, le navigateur ne connaissant pas la taille de l’image, attend de l’avoir téléchargée entièrement afin de lui réserver l’espace nécessaire.

Charger les JS en fin de page

Le Javascript bloque le téléchargement des autres ressources d’une page. Pendant qu’il est téléchargé, puis interprété, le navigateur ne fait rien d’autre. Insérer les appels aux scripts en base de page, juste avant la fermeture de la balise </body>, permet un affichage plus rapide de la page. Techniquement, ça ne change rien à la mesure de temps de chargement, cependant l’expérience utilisateur est améliorée par une mise à disposition plus rapide du contenu.

Bien utiliser le cache du navigateur

Le cache navigateur permet de réutiliser un maximum les composants déjà chargés dans une visite initiale, afin que la prochaine visite de l’utilisateur soit plus rapide. Mais, par défaut, le navigateur fait tout de même un aller-retour avec le serveur afin de savoir si le contenu stocké sur le poste client est à jour ou non. On subit donc la latence réseau sur chaque ressource de la page, même si le poids téléchargé est réduit. La norme HTTP contient une entête Expires qui permet de définir la date d’expiration d’une ressource : jusqu’à cette date, le navigateur utilisera le fichier caché, sans aucune requête vers le serveur :

Expires: Wed Feb 16 2011 03:12:53 GMT+0100 (CET)

On utilisera donc le serveur web pour préciser des dates d’expiration plus ou moins lointaines, selon les contenus. Ceci est gérable sur Apache avec le module mod_expires. Attention toutefois : pour utiliser un maximum cette fonctionnalité, il faut mettre une date d’expiration éloignée sur la plupart des contenus (1 an…) mais dans ce cas, il faut gérer la mise à jour du contenu lors de sa modification. Sur les fichiers modifiés régulièrement (principalement les JS et les CSS), on pourra par exemple intégrer le numéro de version dans le nom du fichier, ce qui forcera le téléchargement par le poste client à chaque nouvelle version du fichier.

Compresser les composants côté serveur

Les navigateurs actuels acceptent les contenus compressés. Ils envoient avec la requête HTTP une entête Accept-Encoding, par exemple :

Accept-Encoding: gzip,deflate

Le serveur reçoit alors l’information et, si lui-même gère la compression, il compresse les fichiers avant envoi. Enfin le navigateur décompresse le fichier lors de sa réception. Sur Apache on utilise pour cela le module mod_deflate. La méthode de compression la plus couramment utilisée est Gzip. On l’utilise sur les fichiers texte, ceci permet de gagner plus de 50% du poids à télécharger sur ces fichiers.

Pour aller plus loin

• Liste des best practice éditées par Yahoo
• La même chose, vue par Google
• Liste d’outils recensés par Google sur le sujet (benchmarking, optimisation, debug…)
• Blog d’Eric Daspet, en standby mais qui contient nombre d’articles intéressants sur le sujet, en français !