.

mars 30, 2018Astuces techniques, E-commerce / M-commerce
Analyser la performance d”un site web

Saviez-vous que vous disposez probablement déjà d’un outil d’analyse automatique de la performance de votre site web ? Google Analytics propose en effet un suivi de la vitesse de chargement de vos pages web, à travers la fonction Site Speed. Nous verrons que même si cette fonction ne permet pas de monitoring temps réel pour l’exploitation comme les outils de Real User Monitoring (RUM ou monitoring passif), elle permet de faire des analyses globales.

En tirant parti de nos années d’expérience, nous allons vous détailler le paramétrage que nous vous conseillons pour analyser la performance de votre site web, grâce à votre Google Analytics.

1. Veillez à analyser des métriques de performance pertinentes sur Google Analytics

Par défaut, Google Analytics ne présente que les métriques disponibles dans votre navigateur via Javascript. Celles-ci sont tirées de la [Navigation Timing].
Navigation Timing

La métrique mise en avant est le temps de chargement de la page. Or plusieurs études démontrent que celui-ci n’a pas de corrélation forte avec l’expérience utilisateur.

performance web google analytics

Il faut préférer l’analyse du chemin critique de rendu en s’intéressant au Avg. Document Content Loaded Time et Avg. Document Interactive Time.

2. Méfiez-vous de l’échantillonnage de mesures brutes

Google Analytics ne mesure par défaut que 1% des pages vues traquées sur votre site. Vous avez la possibilité d’augmenter ce nombre. Ce taux d’échantillonnage par défaut peut être augmenté dans la limite de 10 000 mesures par jour. Vous devez donc calculer votre sampling ratio pour mesurer des données tout au long de la journée.
1% GA

La possibilité d’augmenter ce nombre se fait au niveau du code de tracking :

ga('create', 'UA-XXXX-Y', {'cookieDomain': 'domain.com', 'siteSpeedSampleRate': 100});

Ainsi, si vous avez moins de 10 000 pages vues par jour, vous pouvez mettre un ratio de 100%. En revanche, si vous avez 100 000 pages vues par jour, nous vous conseillons de placer votre ratio à 10%. Cela vous permettra de mesurer des données sur une plus longue période pendant la journée, plutôt que de les mesurer seulement sur les premières heures de la journée.

Ces limitations de volume est un point sur lequel nous vous invitons vraiment à porter toute votre attention. Elles peuvent empêcher une utilisation vraiment intéressante de Google Analytics. Nous verrons plus tard comment segmenter vos utilisateurs pour mener une analyse webperf plus fine encore. Attention toutefois, la taille du segment doit rester suffisamment importante pour ne pas être totalement volatile !

3. Intéressez-vous aux distributions plutôt que les moyennes

L’interface de Google Analytics présente par défaut les moyennes des métriques mesurées. Or, celles-ci peuvent être fortement influencées par les valeurs extrêmes et minoritaire, contrairement à la médiane? A ce titre, la médiane est donc plus représentative de la réalité des internautes. Vous pouvez également étudier les percentiles 80, 90 et 95 (la médiane est le percentile 50).

Analyser la performance d”un site web

Pour contourner cette moyenne affichée par défaut, vous pouvez regarder directement la courbe de distribution dans l’onglet distribution.

Distribution Google Analytics

4. Segmentez vos données pour mieux les analyser

Analyser le temps de chargement de vos pages passe par un travail de segmentation des données afin de déterminer les axes de progressions.
Nous vous conseillons de segmenter vos données selon les variables suivantes :

  • le pays des visiteurs :
    Ce premier filtre va vous permettre de ne regarder que les visites provenant de pays ayant un intérêt pour votre business. Vous pourrez ainsi éliminer des valeurs aberrantes pour votre analyse macro (des bots venant d’autres pays à des heures étranges par exemple).
segmentation google analytics
  • le type de device :
    Les différences de mesure entre desktop et mobile sont significatives et tendent à être visibles sur l’ensemble des sites que nous suivons. Cela peut facilement s’expliquer par la puissance des téléphones ainsi que la différence entre le réseau mobile et ADSL ou fibre. Voilà pourquoi, il est préférable de les analyser dans des segments différents.
  • le type de pages ou autre custom dimension :
    Nous vous conseillons aussi de tirer parti de votre plan de taggage pour analyser le temps de chargement de vos pages par type de pages. Pour un site e-commerce, nous distinguons au minimum la page d’accueil, les pages catégories / liste de produits et les pages produits.

5. Le tracking des User-Timing

Ne mesurer que la Navigation Timing est extrêmement limitant. Heureusement, Google Analytics propose aussi la possibilité de tirer parti de la User Timing.

ga('send', 'timing', [timingCategory], [timingVar], [timingValue], [timingLabel], [fieldsObject]);

Par exemple :

ga('send', 'timing', 'JS Dependencies', 'load', 3549);

Ref : developers.google.com

Cela vous permet de mesurer l’élément important de votre page (Hero image, slideshow…).

Avec cet outil custom, nous pouvons ajouter les métriques qui nous semblent les plus pertinentes tel que le Start Render, le Speed Index, le temps de la première interaction (click, scroll).

6. Comment mesurer le Start Render Le tracking des User-Timing

Le Start Render est une métrique clé de la webperf. Nous en avons déjà parlé à plusieurs reprises dans nos articles.

Vous pourrez la mesurer en vous servant de la Paint API pour mesurer le First Contentful Paint :

<!-- Register the PerformanceObserver to track paint timing. -->
  <script>
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      // `name` will be either 'first-paint' or 'first-contentful-paint'.
      const metricName = entry.name;
      const time = Math.round(entry.startTime + entry.duration);
      ga('send', 'event', {
        eventCategory: 'Performance Metrics',
        eventAction: metricName,
        eventValue: time,
        nonInteraction: true,
      });
    }
  });
  observer.observe({entryTypes: ['paint']});
</script>
Important: you must ensure your PerformanceObserver is registered in the of your document before any stylesheets, so it runs before FP/FCP happens.

Notez toutefois que le First Contentful Paint n’est pas totalement fiable et n’est disponible que sur Chrome.

7. Comment mesurer le Speed Index

Le Speed Index est aussi une mesure très intéressante qui est généralement calculée en analysant la vidéo du chargement de la page. Il est cependant possible de calculer une valeur approchée en se servant de la Resource Timing.

Le script le plus abouti est disponible ici >>

C’est d’ailleurs le script utilisé par Fasterize pour son propre monitoring.

8. Surveillez le taux d’abandon

Nous savons que des utilisateurs quittent souvent une page avant que celle-ci ne soit totalement chargée. Malheureusement, toutes nos mesures sont affectées par le problème du [biais du survivant], où les données n’incluent pas les mesures des personnes ayant quittées la page.

Il est malgré tout possible de mesurer le nombre de sessions abandonnées en utilisant le Measurement Protocol de Google Analytics. Les explications utilisant l’événement visibilitychange sont décrites dans cet article.

Google Analytics peut être un bon outil de mesure (Real User Monitoring) des performances de votre site web, grâce à ses larges possibilités de segmentations, difficiles à répliquer sur un autre outil. Il faut cependant en avoir une utilisation suffisamment mature pour ne pas tomber dans les différents pièges : métriques non significatives, échantillonnage fort, moyenne, etc. En intégrant vos propres métriques et en nettoyant les données via des segments, vous aurez la possibilité de tirer de vraies conclusions de vos chiffres !

Pensez également que cet outil ne remplace pas un outil de surveillance continue (RUM) servant à alerter une équipe en cas d’anomalie.

Vous voilà fin prêt à analyser les performances de votre site 🙂

Vous souhaitez recevoir d’autres astuces webperf ?
Inscrivez-vous à notre Newsletter :