Dimension CoreDash : Élément d'attribution

Dimension : Attribution : Élément (CLS, INP, LCP)

Les métriques de l'Élément d'attribution (clsel, inpel, lcpel) renvoient le nom du nœud et le sélecteur CSS spécifique de l'élément HTML associé à un événement Core Web Vitals.

Alors que la dimension URL vous indique où les performances se dégradent dans l'application, l'Élément d'attribution vous indique quel composant spécifique est à l'origine de ce score. Cette granularité fait passer la conversation technique d'une optimisation générale au niveau de la page à un ciblage spécifique au niveau du DOM.

Objectif du filtrage par élément d'attribution : Vérification et Découverte

Cette dimension remplit deux fonctions stratégiques principales dans votre flux de travail de performance : la Vérification de la cible et la Découverte comportementale.

• Vérification de la cible : Vous ne pouvez pas optimiser le LCP si vous ciblez le mauvais nœud. Les développeurs supposent souvent que "l'image Hero" est l'élément LCP et l'optimisent, pour découvrir ensuite que la métrique ne bouge pas car le navigateur a en réalité identifié un bloc de texte ou une bannière de cookies comme étant le LCP. Cette dimension confirme exactement quel élément le navigateur est en train de mesurer.
• Découverte comportementale : Les utilisateurs interagissent avec votre site de manières que vous n'anticipez pas pendant l'assurance qualité. Ils cliquent sur des images statiques en s'attendant à un zoom, ou ils cliquent de manière frénétique (rage-click) sur des éléments d'interface non réactifs. Cette dimension révèle les éléments réels avec lesquels les utilisateurs interagissent et qui déclenchent une latence élevée, exposant ainsi les angles morts de votre couverture de tests.

Scénarios spécifiques aux métriques

Chaque métrique Core Web Vitals nécessite une approche analytique distincte lors de la consultation de l'Élément d'attribution.

Largest Contentful Paint (LCP)

L'Élément d'attribution du LCP est votre outil d'audit pour la "Priorité des ressources". Il répond à la question : Le plus grand élément à l'écran est-il celui que j'avais prévu ?

1. Le LCP "Inattendu" : Vous voyez souvent des éléments comme div.cookie-consent ou p.intro-text apparaître comme le nœud LCP. Cela signale généralement une réalité liée au design responsif, et non une erreur de chargement. Sur certains affichages (particulièrement sur mobile), votre "Image Hero" peut être rendue plus petite qu'un bloc de texte ou repoussée entièrement sous la ligne de flottaison. Si un bloc de texte occupe physiquement plus de pixels dans la fenêtre d'affichage que l'image, le navigateur identifie correctement le texte comme étant le LCP. Vous devez croiser ces éléments avec la dimension Facteur de forme de l'appareil pour voir si votre mise en page mobile privilégie le texte par rapport aux images en tant que contenu principal.
2. Le LCP "Attendu" : Lorsque la dimension confirme que votre img.hero-banner prévue est bel et bien l'élément LCP, vous avez le feu vert pour une optimisation spécifique à l'actif. Vous savez désormais que des interventions directes sur ce fichier image spécifique (compression, format, mise en cache) impacteront directement votre score global.

Interaction to Next Paint (INP)

Les problèmes d'INP découlent souvent d'une inadéquation entre l'intention de l'utilisateur et la réactivité de l'interface. Cette dimension met en évidence les cibles spécifiques de clic, de tapotement ou de pression de touche qui entraînent un blocage du thread principal.

1. Les interactions "Cachées" : Vous pouvez trouver des valeurs INP élevées attachées à des éléments que vous ne considériez pas comme "interactifs", tels que IMG.product-detail ou DIV.background-wrapper. Cela signale que les utilisateurs cliquent sur ces éléments en attendant un retour (comme une lightbox ou un zoom) qui soit n'existe pas, soit exécute de lourds écouteurs JavaScript qui ne devraient pas être là.
2. Fonctionnalités lourdes : Des cibles communes comme INPUT.search-bar ou BUTTON.add-to-cart apparaissent fréquemment ici. Cela isole le goulot d'étranglement des performances aux gestionnaires d'événements spécifiques attachés à ces contrôles. Cela confirme que le délai n'est pas un ralentissement général de la page, mais un coût de calcul spécifique lié à cette fonctionnalité (par ex., un script d'auto-complétion de recherche s'exécutant de manière trop agressive).