Dimension Core/Dash : Attribution Element

Dimension : Attribution : Element (CLS, INP, LCP)

Les métriques d'Attribution Element (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 indique où se dégradent les performances dans l'application, l'Attribution Element révèle le composant spécifique responsable de ce score. Cette granularité réoriente le travail technique d'une optimisation globale de la page vers un ciblage précis au niveau du DOM.

Objectif du filtrage par Attribution Element : vérification et découverte

Cette dimension remplit deux fonctions stratégiques majeures dans votre flux de travail de performance : la vérification de la cible et la découverte comportementale.

• Vérification de la cible : Impossible d'optimiser le LCP si vous ciblez le mauvais nœud. Les développeurs supposent souvent que l'« image principale » est l'élément LCP et l'optimisent. Pourtant, la métrique ne s'améliore pas car le navigateur a en réalité ciblé un bloc de texte ou un bandeau de cookies. Cette dimension confirme l'élément exact mesuré par le navigateur.
• Découverte comportementale : Les utilisateurs interagissent avec votre site de manière imprévue lors de la QA. Ils cliquent sur des images statiques en espérant un zoom, ou cliquent de rage sur des éléments d'interface non réactifs. Cette dimension révèle les éléments réels à l'origine d'une latence élevée lors des interactions, exposant les angles morts de vos scénarios de test.

Scénarios par métrique

Chaque Core Web Vitals nécessite une approche d'analyse distincte lors de l'examen de l'Attribution Element.

Largest Contentful Paint (LCP)

L'Attribution Element pour le LCP est votre outil d'audit pour la « priorité des ressources ». Il répond à la question : l'élément le plus grand à l'écran est-il bien celui que j'ai prévu ?

1. Le LCP « inattendu » : Des éléments comme div.cookie-consent ou p.intro-text apparaissent souvent comme nœuds LCP. Cela signale généralement une réalité de responsive design, pas une erreur de chargement. Sur certains viewports (notamment sur mobile), votre « Hero Image » peut s'afficher plus petite qu'un bloc de texte ou être repoussée sous la ligne de flottaison. Si un bloc de texte occupe physiquement plus de pixels dans le viewport que l'image, le navigateur identifie correctement le texte comme LCP. Croisez ces éléments avec la dimension Device Form Factor pour vérifier si votre mise en page mobile privilégie le texte par rapport aux images comme contenu principal.
2. Le LCP « attendu » : Lorsque la dimension confirme que l'élément img.hero-banner prévu est bien l'élément LCP, vous avez le feu vert pour l'optimisation de cette ressource. Vous savez maintenant que des actions directes sur ce fichier image (compression, format, cache) impacteront directement votre score global.

Interaction to Next Paint (INP)

Les problèmes d'INP proviennent souvent d'un décalage entre l'intention de l'utilisateur et la réactivité de l'interface. Cette dimension met en évidence les cibles de clic, de tap ou de pression de touche spécifiques qui bloquent le main thread.

1. Les interactions « cachées » : Vous pouvez constater des valeurs d'INP élevées sur des éléments non considérés comme interactifs, tels que IMG.product-detail ou DIV.background-wrapper. Cela indique que les utilisateurs cliquent sur ces éléments en attendant un retour visuel (comme une lightbox ou un zoom) qui soit n'existe pas, soit exécute des écouteurs d'événements JavaScript lourds et injustifiés.
2. Fonctionnalités lourdes : Des cibles courantes 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 de ces contrôles. Cela confirme que la lenteur ne provient pas d'un ralentissement général de la page, mais d'un coût de calcul spécifique lié à cette fonctionnalité (par exemple, un script d'autocomplétion de recherche trop agressif).