Comment optimiser les performances d’un site Internet

Publié le 25 mar 08 à 07:43 | Catégorie : Développement Web | 9 commentaires

Il existe plusieurs stratégies pour améliorer la montée en charge d’une application web, surtout au niveau de la partie serveur. Mais il est également nécessaire d’optimiser la partie cliente, c’est-à-dire le code qui sera téléchargé et interprété par le navigateur Internet de l’utilisateur.

De cette manière, il est possible de minimiser les ressources serveurs sollicitées par cette partie cliente et surtout de fournir une meilleure expérience utilisateur en minimisant les temps de chargement et en améliorant la réactivité globale de l’application.

La partie cliente (frontend en anglais) se décompose donc en trois grandes parties :

  • le contenu : le fichier HTML (qu’il ait été généré dynamiquement ou non)
  • la présentation : les fichiers CSS contenant les feuilles de styles
  • le comportement : les fichiers Javascript contenant du code applicatif

Mais avec l’avènement d’interfaces de plus en plus riches, cette partie s’est largement complexifiée, que ce soit vis-à-vis du nombre de fichiers (nécessaires pour organiser le code et le partager au sein d’une équipe) ou de la taille du code (de plus en plus de fonctionnalités étant implémentées au niveau du navigateur).

En 2004, Yahoo! a monté une équipe dédiée uniquement à ces problématiques afin de mesurer, étudier et améliorer les performances de leurs sites à fort trafic. Par la suite, ils ont établi une liste de bonnes pratiques à suivre pour rendre les pages d’un site plus rapides et ont créé un outil gratuit pour faciliter leur mise en place.

La semaine dernière, Yahoo! a présenté le résultat de leurs dernières recherches lors de la conférence PHP Québec. La présentation ci-dessous revient ainsi sur les 14 bonnes pratiques précédemment identifiées et en présente 20 nouvelles pour améliorer les performances d’un site Internet :

Si vous travaillez sur une application web, je vous recommande fortement de jeter un oeil à cette liste si vous ne l’avez pas déjà fait. Elle recense des conseils qui sont pour la plupart tout à fait réalisables. Et vous pourrez facilement évaluer vos progrès à l’aide de l’extension fournit par Yahoo!.

A lire également

Vous pouvez continuer votre lecture sur des sujets similaires en consultant les articles suivants :

Les visiteurs qui ont vu cette page ont consulté ensuite :

A savoir

La rédaction de cet article a nécessité 1 heure et 3 minutes. Si vous le souhaitez, vous pouvez être prévenu de la parution de nouveaux articles en vous abonnant par RSS ou par email.

9 commentaires à propos de “Comment optimiser les performances d’un site Internet” :

  1. Un atelier de Paris Web 2007 était également consacré à cette question avec une grosse partie sur l’optimisation du frontend. J’en ai fais un petit résumé dans un article http://www.affinity-web.org/lanews-51.php

    eMeRiKa le 25 mars 2008 à 08:22 (#1)

  2. C’est intéressant, mais je pense que certaines optimisations sont totalement négligeables si on a pas très bien optimisé certains autres aspects, à savoir la structure des bases de données (clés primaires, index, requêtes optimisées..), un code php propre et bien structuré également, et une framework javascript légère.
    Le plus important est vraiment l’optimisation côté serveur, tu peux me croire ^^ Car les problèmes de lenteur proviennent presque toujours du manque de ressources serveur, dues le plus souvent à un code très peu performant… Il faut par exemple penser aux systèmes de cache, et à faire les tâches lourdes (comme le comptage des stats) par cron au lieu de les exécuter à chaque chargement de page.

    Godefroy (aka Skreo) le 25 mars 2008 à 21:18 (#2)

  3. Pas d’accord avec le dernier commentaire. En fait, cela dépend grandement du type d’application que tu développe.
    Je développe depuis plus d’un an une application entièrement en GWT. Elle est très lourde, une seule page, fortement Ajaxée et complexe. De plus, c’est une application qui est utilisée toute la journée par les utilisateurs (ils se connectent le matin et se déconnectent le soir). Et bien, si j’arrive à gagner ne serait-ce qu’un round-trip, je suis heureux. Si j’ai 10000 utilisateurs (cas d’utilisation) qui font une requête en trop, ça me bouffe ma bande passante (et ça me coute potentiellement du fric), ça ralentis mon appli côté client (une connexion bouffée) et donc, la performance perçue par le end-user peut s’en ressentir.

    Rassembler 50 icones dans un seul sprite, c’est divisé potentiellement par 50 le nombre de requêtes à ton serveur. C’est pas négligeable lorsque l’on sait que le truc qui bouffe le plus les ressources côté client, ce sont les requetes HTTPs. Et comme le dit je ne sais plus qui, la requete HTTP la plus rapide est celle qui n’a pas lieu. Avec GWT, la mise en place de sprite passe par la classe ImageBundle (la création des sprite est automatique).

    J’ajoute à cela la minimisation des fichiers Javascript ET du fichier CSS. C’est peut-être quelques kilo-octects, mais encore une fois, c’est toujours cela de gagné (Avec EC2, tu paye à la bande passante).

    La bonne gestion du cache côté client est bien évidemment très importante. Dans le cadre de GWT, il faut penser à cacher à minimum 1 an les fichiers *.cache.html (dans le header de la réponse HTTP). Si le fichier change entre temps, GWT changera automatiquement le nom et le navigateur récupèrera le nouveau fichier (pas besoin de se prendre la tête comme Yahoo avec les noms à changer soit-même).

    Enfin, et dernier point important. Il ne faut pas oublier que Javascript est bien sympa mais il est très facile de se retrouver avec des fuites mémoires de partout (surtout sous IE). Donc, regardez les bonnes pratiques pour éviter de tomber dans les pièges. Car, une application qui fuit, c’est une application lente et désagréable à utiliser (j’aime pas voir mon firefox monter à 300 meg en plus)

    Et bien entendu, tout cela ne fera que cacher la misère si le code serveur est pourri. De toute façon, dès que le nombre d’utilisateur augmentera, on verra très vite le serveur se casser la gueule et les temps de réponse augmentés de manière exponentielle.

    Pour conclure, je dirai que chaque optimization est bonne à prendre, mais la plus insignifiante, qu’elle soit au niveau du client, du serveur Apache, du serveur Mysql/Oracle, des connecteurs, du système d’exploitation, du disque dur, voir plus.

    Thomas

    Thomas le 26 mars 2008 à 03:30 (#3)

  4. Au fait, merci pour l’article!

    Thomas le 26 mars 2008 à 03:31 (#4)

  5. @Thomas: donc on est bien d’accord ;-) Je fais aussi attention au poids des images, css, et js, et j’utilise parfois des sprites. Mais je voulais aussi dire que si tu as un wysiwyg comme tinyMCE qui te charge 300 ko de js réparti en 15 fichiers (avec les plugins) ainsi que toutes les icônes qu’il utilise, il y a d’autres priorité que de remplacer 3 icônes par un seul fichier en sprites.
    Pour m’attarder sur tinyMCE, je l’utilise, et j’ai passé pas mal de temps à modifier son code pour rassembler tous les plugins, l’adapter au reste de mon code, et tout compresser (optimisation+gzip) en cache.

    Godefroy (aka Skreo) le 26 mars 2008 à 08:47 (#5)

  6. Après l’étude sur la montée en charge et l’optimisation des performances j’attends avec impatience un article sur “comment trouver le bon hébergement sans investir tout ce qu’on a pas encore gagné” ! ;o)
    Les bons hebergements existent mais sont rares et hors de prix.
    Partant de ce constat ou faut-il faire des concessions ? ( Le raid5 ? la SLA ? la fréquence des sauvegardes ? La qualité du dialogue avec le fournisseur ? … )

    Domi le 26 mars 2008 à 11:30 (#6)

  7. Merci bcp pour ce billet très enrichissant qui aidera sûrement bcp de webmasters :-)

    Samir le 26 mars 2008 à 17:38 (#7)

  8. En fait Godefroy, les ingénieurs de Yahoo! se sont particulièrement intéressés à la notion de vitesse ressentie par l’utilisateur. Toutes ces optimisations au niveau de la partie cliente permettent donc d’améliorer grandement l’expérience utilisateur. Bien sûr, une optimisation côté serveur est indispensable, mais a priori plus technique et plus compliquée à mettre en place. Donc peut-être vaut-il mieux se focaliser dans un premier temps sur la partie cliente avant de travailler sur l’optimisation de la partie serveur.

    Sinon pour l’hébergement, je suis d’accord avec toi Domi : c’est un vrai casse-tête !

    Stéphane le 28 mars 2008 à 10:32 (#8)

  9. Super les conseils de Yahoo!.
    Moi aussi j’ai fait récemment un petit résumé : optimisation des sites web et accélération d’affichage des pages .

    EoN le 14 août 2008 à 15:47 (#9)

Ajouter un commentaire

Les informations obligatoires sont indiquées par une étoile rouge *.


Votre marque personnelle n’est pas évolutive

Articles Récents

Les derniers articles publiés

A Propos

Je m’appelle Stéphane Thomas et je suis Ingénieur Senior expert dans le développement d'applications web complexes. Etant également un peu Entrepreneur, j'ai tenté l'aventure de la création d'un nouveau service Internet appelé Loomiz. Je suis maintenant le cofondateur d'Hitomi Studio, un studio de développement spécialisé dans la réalisation de sites ecommerce haut de gamme pour de jolies marques.

Lire la suite…