1. L'angle mort du back-end #
Une API rapide ne fait pas une page rapide.
Pourquoi le RUM #
Les métriques serveur peuvent être parfaites alors que l'utilisateur attend 6 secondes : JavaScript trop lourd, image non optimisée, CDN lent dans un pays, erreur JavaScript qui bloque un bouton. Le Real User Monitoring mesure la performance et les erreurs dans le navigateur des vrais utilisateurs.
| Approche | Mesure | Forces | Limites |
|---|---|---|---|
| RUM | Vrais utilisateurs, vrais appareils | Réalité terrain, toutes les pages, erreurs JavaScript | Besoin de trafic, données à protéger |
| Synthétique | Robot à intervalle régulier | Détecte une panne sans trafic, comparable dans le temps | Un seul appareil, quelques parcours |
Bonne Pratique : Les deux sont complémentaires : le synthétique alerte la nuit sur une panne, le RUM dit ce que vit la majorité des utilisateurs (voir la formation k6 pour le synthétique).
2. Les Core Web Vitals #
Les indicateurs de Google.
Définitions et seuils #
| Indicateur | Mesure | Bon | Mauvais |
|---|---|---|---|
| LCP Largest Contentful Paint | Affichage du plus grand élément visible | ≤ 2,5 s | > 4 s |
| INP Interaction to Next Paint | Réactivité aux clics et saisies | ≤ 200 ms | > 500 ms |
| CLS Cumulative Layout Shift | Stabilité visuelle (décalages) | ≤ 0,1 | > 0,25 |
| FCP First Contentful Paint | Premier contenu affiché | ≤ 1,8 s | > 3 s |
| TTFB Time To First Byte | Premier octet reçu du serveur | ≤ 0,8 s | > 1,8 s |
À savoir : Les seuils s'apprécient au 75e percentile des visites : une page est « bonne » si 75 % des visites respectent le seuil. L'INP a remplacé le FID comme Core Web Vital en 2024.
3. Ce que collecte un outil de RUM #
Au-delà des Web Vitals.
Les signaux front-end #
| Signal | Exemple |
|---|---|
| Performance | Web Vitals, temps de chargement des ressources |
| Erreurs | Exceptions JavaScript avec pile d'appels, rejets de promesses |
| Logs | Messages console |
| Événements | Ajout au panier, inscription, étape d'un tunnel |
| Sessions | Pages vues par session, navigateur, pays |
| Traces | Requêtes fetch/XHR reliées aux traces du back-end |
