Comment mesurer la vitesse de chargement d'un site…

La vitesse de chargement d’un site web peut être mesurée de plusieurs façons :

Outils de développement dans le navigateur :
- Ouvrir l’onglet "Network" (Réseau) dans les outils de développement (F12).
- Actualiser la page.
- Analyser les indicateurs de temps pour chaque ressource (HTML, CSS, JS, images) :
  - Waiting (TTFB) : Temps jusqu’à la réception du premier octet du serveur.
  - Content Download : Temps de téléchargement du contenu.
  - Total : Temps total de chargement de la ressource.
- Faire attention au diagramme Waterfall (cascade) pour visualiser la séquence de chargement des ressources.
- Analyser le résumé (Summary) en bas de l’onglet pour le temps total de chargement et le nombre de requêtes.
Services en ligne pour mesurer la vitesse :
- Google PageSpeed Insights : Analyse la performance sur appareils mobiles et de bureau, fournit des recommandations d’optimisation.
- GTmetrix : Fournit des métriques PageSpeed et YSlow, rapport détaillé de chargement, performance et recommandations.
- Pingdom Website Speed Test : Mesure la vitesse depuis différentes localisations, fournit une analyse détaillée de la performance.
- WebPageTest : Permet de tester depuis différentes localisations et navigateurs, fournit de nombreuses métriques et visualisations.
Métriques à surveiller :
- Time to First Byte (TTFB) : Temps jusqu’à la réception du premier octet du serveur.
- Largest Contentful Paint (LCP) : Temps d’apparition du plus grand élément de contenu dans la partie visible de l’écran.
- First Input Delay (FID) : Temps entre la première interaction de l’utilisateur avec le site et la réponse du navigateur.
- Cumulative Layout Shift (CLS) : Indicateur total du déplacement du layout pendant le chargement.
- DOMContentLoaded : Temps où le navigateur a complètement chargé et analysé le document HTML.
- Load : Temps de chargement complet de toutes les ressources de la page.

Automatisation avec des frameworks :

Lighthouse (outil de Google) : Peut être utilisé en ligne de commande ou intégré dans des pipelines CI/CD.

# Exemple d’utilisation de Lighthouse CLI
lighthouse https://www.exemple.com --output json,html --output-path ./rapport.json

Selenium/WebDriver : Peut être utilisé pour charger la page et obtenir le temps de chargement via l’API Performance de JavaScript.

# Exemple d’obtention du temps de chargement avec Selenium et Performance API
from selenium import webdriver
import time

driver = webdriver.Chrome() # Ou un autre navigateur
driver.get("https://www.exemple.com")

# Attendre que la page soit complètement chargée
time.sleep(5) # Des attentes plus fiables peuvent être utilisées

# Obtenir l’objet PerformanceTiming
performance_timing = driver.execute_script("return window.performance.timing")

# Calculer le temps de chargement
load_time = performance_timing['loadEventEnd'] - performance_timing['navigationStart']
print(f"Temps de chargement : {load_time} ms")

driver.quit()

Cypress : Fournit également un accès à l’API Performance.

Systèmes de surveillance en temps réel (RUM) :
- Outils qui collectent des données de performance directement auprès des utilisateurs réels du site. Exemples : Sentry, New Relic Browser.

Le choix de la méthode dépend des objectifs : pour une évaluation rapide, les services en ligne conviennent ; pour une analyse détaillée et le débogage, les outils de développement ; et pour une surveillance régulière et l’intégration dans les processus de développement, l’automatisation et les systèmes RUM.

Comment mesurer la vitesse de chargement d'un site Web?