Core/Dash Comprendre les tableaux de bord de décomposition des métriques

Comprendre le tableau de bord de décomposition des métriques

Les métriques composites comme le LCP et l'INP agrègent plusieurs événements temporels distincts. L'optimisation du score total nécessite d'isoler ces composants sous-jacents. Le tableau de bord de décomposition des métriques dissèque la performance en phases granulaires pour identifier le goulot d'étranglement spécifique.

Cet outil remplace l'optimisation générale par des objectifs d'ingénierie précis. Il attribue la latence au serveur, au réseau ou à l'exécution côté client.

Anatomie du tableau de bord de décomposition

Le tableau de bord fournit trois vues synchronisées pour isoler la cause profonde de la latence :

• Donut de contribution : Visualise le poids relatif de chaque sous-partie. Il répond à la question « Quel est le facteur le plus important ? ». Si le `Time to First Byte` occupe 70 % du graphique, vous savez que le problème est lié au backend.
• Chronologie historique : Affiche les tendances des valeurs absolues de chaque composant au fil du temps. Utilisez ceci pour corréler les changements de performance avec des événements spécifiques comme les déploiements.
• Tableau de données segmentées : Décompose la métrique par dimension (URL, appareil, etc.). Chaque ligne inclut une barre de distribution qui révèle le profil unique de ce segment, vous aidant à repérer les valeurs aberrantes.

Composants du LCP (Largest Contentful Paint)

Le LCP mesure la performance de chargement. Nous divisons cette métrique en quatre phases :

• TTFB (Time to First Byte) : Le temps de réponse du serveur. Un TTFB élevé indique des requêtes de base de données lentes ou un manque de mise en cache en périphérie (edge caching).
• Load Delay : L'écart entre la réponse HTML initiale et le début du téléchargement de la ressource LCP. Cela mesure la latence de découverte des ressources.
• Load Time : La durée requise pour télécharger l'actif LCP (image ou police) via le réseau. Cela est corrélé à la taille du fichier et à la bande passante.
• Render Delay : Le temps entre la fin du téléchargement de la ressource et son affichage à l'écran. Un Render Delay élevé indique souvent un blocage du thread principal par le JavaScript.

Composants du TTFB (Time to First Byte)

Le TTFB sert de proxy pour la réactivité du serveur. Cette décomposition isole les phases de connexion réseau :

• Waiting : Le temps que le navigateur passe à attendre que le serveur génère une réponse (traitement backend).
• Cache : Temps passé à vérifier les caches locaux ou intermédiaires.
• DNS : La durée de la recherche DNS (Domain Name System).
• Connection : Temps pris pour établir la connexion TCP.
• Request : Temps pris pour envoyer les en-têtes de requête HTTP.

Composants de l'INP (Interaction to Next Paint)

L'INP mesure l'interactivité. Nous segmentons le cycle de vie de l'interaction pour identifier le blocage du thread principal :

• Input Delay : Le temps entre l'interaction utilisateur et l'exécution du gestionnaire d'événements. Un Input Delay élevé signifie que le thread principal était occupé.
• Processing : Le temps pris pour exécuter les callbacks d'événements. Cela représente l'efficacité de votre logique JavaScript.
• Presentation : Le temps pris par le navigateur pour calculer la mise en page et peindre la frame suivante.

Workflow de diagnostic

Suivez cette séquence pour diagnostiquer une régression :

• Quantifiez le goulot d'étranglement : Regardez le graphique en Donut pour trouver la sous-partie dominante. Si le `TTFB` est élevé, vérifiez votre serveur. Si le `Resource Load Delay` est élevé, vérifiez la priorité de vos actifs.
• Établissez la causalité : Vérifiez la Timeline pour corréler le pic avec un déploiement spécifique ou une mise à jour de contenu.
• Isolez le contexte : Utilisez le tableau de données pour voir si ce modèle se vérifie sur toutes les pages ou s'il est spécifique à un certain modèle (template). Trouver le modèle est la clé pour déployer un correctif évolutif.

Optimiser les Core Web Vitals

Utilisez ces décompositions pour diriger les tickets vers la bonne équipe d'ingénierie. Assignez les problèmes de TTFB au Backend. Assignez le Load Delay et le Render Delay au Frontend. Assignez la latence DNS/Connection à l'Infrastructure. Ce processus de triage rationalisé réduit le temps d'investigation et accélère la résolution.