Comment optimiser le code d'un site Web pour en améliorer la performance
A l'occasion de la conférence Velocity Europe d'O'Reilly, qui se tenait à Berlin les 8 et 9 novembre, les présentations se sont succédées sur les meilleures pratiques en matière d'optimisation de la performance des sites et applications Web.
Des experts des équipes de développement de Google, de Firefox mais aussi d'Opera ont notamment présenté leur approche en matière d'optimisation de l'exécution de JavaScript. Google et Amazon ont également mis en avant leurs outils d'analyse et d'accélération des pages Web.
Quatre grandes recommandations se détachent de ces démonstrations, et des débats qu'elles ont suscités.
1 - Eviter certaines fonctions JavaScript
Dans sa présentation, Chris Heilmann, de la fondation Mozilla, a notamment insisté sur l'importance d'éviter la fonction JavaScript eval(), qui permet de créer du code dynamiquement (avec en arguments la possibilité d'ajouter des variables et des objets). Problème : elle empêche la mise en cache du code en question, ce qui peut engendrer des baisses de performance. Autres conseils : favoriser le code JavaScript avec un typage stable, et éviter de créer des objets sur des boucles.
2 - Appliquer le principe du DRY (Don't Repeat Yourself)
Appliquer à son code JavaScript le principe du DRY (pour Don't Repeat Yourself). C'est ce qu'a prôné Mathias Bynens (expert chez Qiwi) dans sa présentation. Il s'agit là d'optimiser la taille des scripts en vue d'en réduire le poids, d'en améliorer l'exécution, mais aussi d'en faciliter la maintenabilité.
Mathias Bynens conseille notamment d'étudier avec soin : la manipulation du DOM, et les appels de fonctions - notamment liés à des boucles. Il recommande notamment d'éviter le switch (qui permet de réaliser plusieurs tests de valeurs sur le contenu d'une même variable), et plus globalement le recours à JQuery à tout va.
3 - Recourir à un outil d'optimisation du code
En vue de s'assurer de la qualité des sites Web, notamment en matière de performance d'exécution, le recours a un outil d'analyse de code a évidemment été abordé par les intervenants de la conférence Velocity Europe. Google a fait sensation sur ce terrain en présentant Page Speed Online : un outil en ligne conçu pour analyser le code d'une page Web, et réaliser des suggestions d'amélioration visant à réduire le temps de chargement.
Parmi les points étudiés par Page Speed Online figurent la résolution de noms de domaine, le paramétrage des connexions TCP, la transmission des requêtes HTTP, le téléchargement de ressources, le parsing et l'exécution de scripts, la mise en cache, et le rendu graphique des objets sur la page Web.
Partant de cette analyse, l'outil avance un certain nombre de points d'amélioration : optimisation du cache, réduction du nombre de cycles de requêtes-réponses, réduction de leur poids, et amélioration de la mise en page. Enfin, Page Speed Online propose également des conseils adaptés aux contraintes de performance des applications mobiles.
4 - Mettre en place un outil d'accélération
A l'occasion de la conférence d'O'Reilly, plusieurs consultants (MeasureWorks, Seriti Consulting...) sont intervenus sur les bonnes pratiques en matière de supervision de sites Web, et notamment d'indicateurs. Des outils d'optimisation innovants ont également été présentés. C'est notamment le cas de Cedexis, qui propose une offre de routage dynamique des requêtes entre plusieurs réseaux de diffusion de contenu (CDN) en se basant sur un suivi en temps réel de la performance de ces derniers.
Amazon.com est aussi revenu sur l'architecture de son navigateur en mode SaaS disponible au sein de son offre de Cloud (Amazon Web Services). Nom de code : Silk. Il est dessiné pour compresser les contenus (images, vidéos, textes...), mais également gérer la priorisation des requêtes, le chiffrement, les actions de push... Le tout en se basant sur un protocole maison (SDY). Seul bémol : Silk nécessite d'avoir recours aux services d'hébergement d'Amazon.