Tags:

Juger des performances de son site 1/2

améliorer performances de site internet

Avoir un beau site bien conçu, c’est bien. Avoir un site qui offre une expérience utilisateur optimale, c’est mieux. Si votre utilisateur attend plus de 3 secondes pour voir s’afficher une page du site, il y a fort à parier qu’il trouve le temps long. Très long. Trop long. Le voilà d’ailleurs qui part avant même que quoi que ce soit ait eut le temps d’être affiché. C’est dommage. D’autant plus qu’il se tourne vers le site du concurrent, qui s’affiche beaucoup plus rapidement, lui.

Il y a fort à parier qu’il trouve le temps long. Très long. Trop long.

Et c’est encore plus vrai aujourd’hui avec l’avènement des usages mobiles pour lesquels chaque octet d’information et chaque seconde compte : les forfaits 4G sont rarement illimités.

Les performances web sont donc un point capital dans la réussite d’un projet digital. Cette série d’articles s’efforcera d’aborder tous les points à prendre en considération pour s’assurer du succès technique de votre projet.

 

Première partie : Les performances coté serveur

A moins que le site ne soit complètement statique (toutes ses informations sont préétablies), ce qui se passe sur le serveur hébergeant le site et la manière dont l’application a été développée sont des points importants à considérer.

Caractéristiques de l’hébergement

Un hébergement correctement dimensionné permet de s’assurer que, quelque soit le trafic et le nombre d’interactions avec le site, les utilisateurs puissent charger les pages sans délais.

Une technique courante consiste, une fois le site dans sa version définitive, à pratiquer des tirs de charge afin d’évaluer les limites de l’infrastructure, du serveur et de l’applicatif. Différents outils permettent de mener ces actions, JMeter de la fondation Apache étant sans doute le plus utilisé.

L’idée consiste à simuler, en suivant un scénario établi, un trafic et un nombre de connexions graduellement de plus en plus important sur un laps de temps donné afin d’évaluer les temps de réponse correspondants.

En se basant sur ces résultats et sur une estimation du trafic attendu, on pourra alors réévaluer l’hébergement en y ajoutant des ressources supplémentaires, voir des serveurs supplémentaires en utilisant un système de balance de charge (plusieurs serveurs pour le même site) ou optimiser l’application si des goulots d’étranglement sont mis à jour (voir plus loin).

Paramétrage du serveur

L’optimisation des réglages du serveur peut faire une grosse différence pour l’expérience utilisateur :

  • compression des données : les données envoyées par le serveur sont compressées au format gzip avant leur envoi au navigateur. La taille des fichiers transitant sur le réseau est alors réduite autant que possible. Ce sont les nerfs et le forfait mobile de vos utilisateurs qui vont être contents.
  • en-têtes d’expiration des ressources : le serveur indique quelle est la “durée de vie” d’un fichier afin d’éviter que celui-ci ne soit renvoyé à chaque chargement de page par l’internaute. Ceci est particulièrement utile pour des données ne variant que très peu d’une page à l’autre comme les feuilles de style CSS, les fichiers javascripts ou les images. Pas besoin en effet de recharger par exemple 50 fois le même logo s’il apparaît à l’identique sur 50 pages du site.
  • optimisation des ouvertures de connexions : permettre au serveur de garder une même connexion pour servir plusieurs ressources à la fois. Dans une conversation téléphonique, vous ne recomposez pas le numéro à chaque phrase échangée, non ?

Certains types d’hébergement dit “mutualisés” offrent parfois des possibilités de paramétrage limitées. Il convient donc de vérifier que ces bonnes pratiques soient bien en oeuvre lors du choix de la plateforme d’hébergement. Par ailleurs, certains prestataires permettent de modifier ces réglages via des fichiers de configuration de type “.htaccess” qui permettent de modifier le comportement standard du serveur, à vérifier également lors du choix.

Un peu de poésie, ça détend.

Gestion des ressources images

La taille a une importance. En tout cas, en matière d’optimisation web, surveiller le volume d’informations nécessaires est une problématique majeure.

Tout d’abord, il faut s’assurer que les images possèdent un poids aussi réduit que possible. L’utilisation standard d’algorithmes de compression permet d’atteindre un premier niveau d’optimisation, parfois au détriment de la qualité. Malheureusement, les outils de génération de ces images sont souvent assez mauvais en la matière (y compris le célèbre Photoshop). On peut alors soit passer par des outils en ligne (contraignants), soit automatiser une compression via des outils en ligne de commande (optipng, jpegtrans, gifslice…) permettant de gagner parfois jusqu’à 80% du poids original sans perte de qualité.

Notons que l’utilisation de “sprites” graphiques permet également de soulager grandement un serveur. Servir 1 fichier au lieu de 20 constitue un facteur d’amélioration direct des performances.

optimisation images

Vous pensiez que la bonne vieille interface de Photoshop pour « enregistrer pour le web » suffisait ? Eh bien non.

Gestions ressources CSS et Javascript

En matière de composants techniques, les fichiers CSS et Javascript constituent des éléments “invisibles” mais de plus en plus importants. Il convient de les optimiser afin qu’ils soient traités le plus rapidement possible.

Si les paramètres coté serveur sont optimaux (voir plus haut), ces ressources sont déjà envoyées avec une compression Gzip. En revanche, tout comme l’utilisation des sprites pour les éléments graphiques, la combinaison de fichiers CSS et Javascript permettent d’alléger la charge serveur et les traitement des chargements de ressources coté navigateur.

Le procédé consiste, dans un premier temps, à agréger les différents fichiers en une seule et unique ressource. Dans un deuxième temps, les contenus pourront être encore optimisés en supprimant les espaces, les commentaires de développement, etc… permettant de gagner encore quelques précieux octets. En ce qui concerne le code javascript, on pourra aller encore plus loin dans l’optimisation en lui appliquant un algorithme dit d’ “Obfuscation” compressant encore plus le code et ajoutant une couche de sécurisation.

Ces optimisations peuvent être appliquées, soit dynamiquement par l’application coté serveur, soit en amont lors du développement du site. La première solution a pour avantage son côté systématique et permet de s’assurer que toutes les ressources sont traitées, le second permet de soulager le serveur mais nécessite un développement plus rigoureux et contraignant.

Coté bonnes pratiques, on évitera également d’envoyer des librairies ou des définitions de styles qui ne sont pas utilisées.

Sinon votre site va supporter du poids non nécessaire et tirer une tête dans ce goût-là :

effort poids

CDN

Lorsque les médias sont nombreux ou relativement lourds, une possibilité d’optimisation consiste à utiliser un service de type “Content Delivery Network”. Le principe est de “dupliquer” et répartir les différents médias sur différents serveurs, au plus près physiquement de l’utilisateur afin de réduire les temps d’accès aux données.

Bonus : cette solution favorise également la parallélisation du chargement des médias, les navigateurs limitant nativement les appels simultanés sur un même domaine/serveur. Pour n’en citer que quelques uns, on trouve des acteurs comme Akamaï, MaxCDN ou Cedexis.

Ajustements applicatifs

Dès lors que le site possède des fonctionnalités dynamiques (système CMS, moteur de recherche, bases de données diverses…) il conviendra de surveiller les performance de la couche dite “applicative”.

En fonction des technologies et des frameworks utilisés, un profiling de l’application sera parfois nécessaire afin d’identifier les parties fautives pour en éliminer ou réduire les sources de ralentissements. Sur des applications en PHP, on utilisera des outils comme XDebug, XHProf ou le plus récent et très prometteur BlackFire.

Les requêtes SQL sont une source fréquente de souci de performance notamment avec l’avènement des ORM dans les frameworks de développement modernes. On veillera par exemple à en réduire le nombre nécessaire par page. Leur optimisation ou la création d’index de base de données permet d’améliorer les temps de réponses parfois de façon spectaculaire. On utilisera des fonctionnalité intégrées aux bases de données afin d’analyser la manière dont les requêtes sont traitées.

Une fois ces analyses et corrections effectuées, on pourra aller encore plus loin en ajoutant des systèmes de cache afin de supprimer des processus coûteux récurrents. Par exemple, l’appel d’un service web tiers ou la génération d’une page de résultat nécessitant des calculs complexes peut être stockée et servie à l’identique aux différents visiteurs.

Pour pousser les performances encore plus loin, on pourra s’adjoindre l’aide d’un serveur de cache tel que Varnish qui permettra d’alléger encore plus la charge du serveur.

Attention cependant : l’utilisation d’un cache peut finir par s’apparenter à essayer de cacher la poussière sous le tapis. Le cache n’est pas fait (et n’est pas conçu) pour corriger les problèmes liés à un défaut de conception ou une mauvaise configuration de l’infrastructure.  

Moi non plus je ne vois pas le rapport direct, mais ça symbolise bien la vitesse et la fluidité, non ?

 

Vérifier que tout est en ordre

Rien de tel que l’outil en ligne WebPageTests pour obtenir en quelques clics un rapport détaillant les éléments clés des performances de votre site et de votre serveur : temps de réponse initial, état de la compression des données, cache des données… vous pouvez tout contrôler d’un seul coup d’oeil !

Et si vous souhaitez pousser l’analyse, l’outil Google PageSpeed constitue un excellent complément, notamment pour contrôler le respect des bonnes pratiques en matière de version mobile du site.

Dans la boite à outil, vous pourrez ajouter la console développeur de Chrome qui apporte également bon nombre de fonctionnalités d’analyse et l’insubmersible vétéran YSlow qui permettra de vérifier en outre le respect de certaines normes W3C.

google page speed insights

 

Encore plus de performance

Nous verrons lors du prochain article que, même en respectant les différents points techniques précédemment décrits, les choses peuvent encore se gâter une fois que les données ont atterri sur le navigateur de vos utilisateurs. À bientôt pour le second article sur ce qu’on appelle les perfs web dans notre fabuleux jargon.

Petit cousin par alliance de l’Abbé Testing, le Père Fouèbe est le saint patron commun aux Directeurs Techniques et aux Chefs de Projet. On le fête tous les ans à la Saint-Taxerror (30 février).