Introduction

L’internaute n’aime pas attendre quand il fait ses achats en ligne. Il veut pouvoir faire ce qu’il a à faire le plus vite possible. Si le site répond lentement, l’utilisateur se posera des questions : “ Est-ce que le site a compris que j’ai cliqué ?”, “Est-ce que j’ai un souci avec Internet ? ”, etc. Imaginez que vous posiez une question à quelqu’un et que cette personne ne vous répond pas. Vous allez sûrement vous demander si cette dernière vous a bien entendu, voire même écouté. Vous allez peut-être trouver désagréable le fait que votre interlocuteur prenne tout son temps pour vous répondre, c’est pareil pour un site internet.

Un site qui charge rapidement est un site avec lequel il sera plus agréable de naviguer. Un point à ne pas négliger pour les e-commerçants, par exemple, qui se doivent de fidéliser leurs clients. Il suffit que l’internaute ne soit pas assez patient pour attendre quelques secondes et il ira voir à la concurrence. Cela signifie de l’argent de perdu pour l’entreprise.

Aujourd’hui, des outils automatisés existent pour mesurer les performances d’un site comme PageSpeed Insights ou Dareboost. De plus en plus de personnes passent par ces outils qui simplifient beaucoup le processus d’analyse. Cependant, qu’est-ce qui est testé derrière ? À quoi sont dues les notables différences de résultats d’un outil à un autre ? Quel outil a « raison » ? Pour en savoir plus, je vous propose d’analyser vous-même les performances et d’adopter des outils de monitoring quand il est question de “ test de performance ”. Dans cet article, je ne vous donnerai pas de simples conseils génériques à suivre (compression des ressources, réduire les redirections, etc.). Je vous proposerai plutôt des méthodes concrètes d’analyse et de faire un peu dans la technique !

Tout d’abord, nous allons voir ensemble qu’améliorer les performances d’un site c’est aussi connaître différentes métriques pour mieux comprendre le chargement des pages et savoir les examiner pour comprendre ce qu’il faut améliorer en priorité. Ensuite, je présenterai différents types d’outils de monitoring avec des exemples d’utilisation. Je précise aussi que cet article se veut accessible à tous avec le minimum d’outils nécessaires pour pratiquer de son côté. Ainsi, les outils complexes à maîtriser (et payants) tels que Dynatrace ne seront pas détaillés ici. Si vous avez besoin d'un accompagnement particulier, vous pouvez vous renseigner sur notre expertise Front End et nous contacter.

I - Enjeux et métriques de la performance website

I.1 Qu'est-ce que la performance website

D’après le site Info Web Master, l’Optimisation de la Performance Website (ou “Web Performance Optimization”) désigne “une discipline qui se charge d’améliorer la vitesse de téléchargement et d’affichage des pages web”.

I.2 Quels sont ses enjeux ?

Si la définition est assez évidente pour certains, les enjeux des performances d’un site le sont beaucoup moins et peuvent avoir des conséquences lourdes pour une entreprise. Vous ne me croyez pas ?

Voici un article qui relate une mésaventure vécue par Amazon en 2009 expliquant que 100ms de latence supplémentaire a réduit le chiffre d’affaire du géant d’internet de 1% !

Voici un deuxième exemple qui raconte que le gain de 2,2s sur la landing page de Mozilla en 2008 a amélioré le taux de conversion des téléchargements de 15,4%, soit un gain de 60 millions de téléchargements supplémentaires par an !

Vous l’aurez compris, selon l’activité d’une société, la performance website peut être une notion à ne pas prendre à la légère afin de satisfaire l’impatience des utilisateurs.

I.3 Comment mesurer la performance ?

Pour mesurer les performances, on aurait pu s’attarder uniquement au temps de chargement des pages d’un site. Mais ce serait très incomplet comme analyse.

Je précise que là je parle de MESURER la performance. En soi, notre but final est bien d’améliorer le temps de chargement mais si vous chargez plusieurs fois à la suite une page web, vous risquez de ne pas avoir tout à fait les mêmes temps de chargement. Alors à quoi se fier pour situer les performances web ? Des métriques !

Si je devais résumer le chargement d’une page web à travers des métriques, voici ce que je montrerais :

C’est loin d’être les seules mais c’est pour vous donner un aperçu. Sachez que d’autres rentrent en ligne de compte suite au load d’une page web. Afin de ne pas (beaucoup) trop rallonger cet article je vais me contenter de vous décrire quelques métriques :

• Request : Délai qui débute à l’émission de la demande des informations d’une page (provenant de l’ordinateur utilisateur qui est adressée au serveur) pour accéder à la page et qui se termine par la réception du début de la réponse.

• Response : Temps de réponse que met le serveur à donner toutes les informations liées à la page que l’internaute veut regarder.

• DOM Interactive : Moment où le code HTML a fini d’être analysé et où la construction du DOM est terminée.

• DOM Content Loaded : Moment où le DOM est prêt et où aucune feuille de style n’empêche l’exécution du JavaScript. Il est alors possible de construire la structure de la page.

  
  

• DOM Complete (ou “ Load Time ”) : Moment où la totalité du traitement est terminée et le téléchargement de toutes les ressources sur la page (images, etc.) est terminé. Cet événement est déclenché en même temps que le “window.onload()”. Il a longtemps été la valeur de référence de la performance website mais il ne l’est plus. En effet, il ne permet pas de déterminer le moment où une page web devient utile. Un utilisateur peut commencer à interagir avec la page avant cet événement.

I.4 Analyser une waterfall

Prenons un exemple concret pour donner un sens à tout ce blabla. Parlons de waterfall ! La waterfall est une représentation du chargement des éléments de votre page web par le navigateur au cours du temps.

Lorsqu’un internaute navigue sur une page internet précise, avec Google Chrome par exemple, ce dernier peut à tout moment utiliser ChromeDevTools en appuyant sur la touche “F12” du clavier. Si vous le faites sur une page quelconque, que vous cliquez sur l’onglet “Network” et rechargez la page, vous aurez quelque chose comme ça :

Vous l’avez compris, on voit le temps de chargement de toute une batterie de ressources. Mais on voit aussi bien d’autres choses ! Je n’en dis pas plus pour le moment mais sachez que nous allons revoir cette notion de waterfall avec un outil plus adapté pour des analyses ;)

On voit mieux comment est chargée une page web et comment chaque partie du chargement peut être mesurée. Cependant, un souci subsiste : comment rendre cette waterfall exploitable pour nos tests ? Nous allons voir qu’il existe deux types de monitoring pour analyser des pages web.

Dans la suite de l’article « Performance website : méthode d'analyse – Partie 2 », nous aborderons les différents types de monitoring qu’il est possible d’utiliser pour analyser de façon complète des pages web avec davantage de cas concret.

Rendez-vous la semaine prochaine pour la partie 2 de cet article proposé par l'expertise Design & Code et nos experts Front End.