Core/Dash Boyutu: Attribution Element

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

Attribution Element metrikleri (clsel, inpel, lcpel), bir Core Web Vitals olayıyla ilişkili HTML öğesinin Node Name'ini ve özel CSS seçicisini döndürür.

URL boyutu sana uygulamada performansın nerede düştüğünü söyler. Attribution Element ise bu skoru hangi özel bileşenin etkilediğini gösterir. Bu ayrıntı düzeyi, mühendislik yaklaşımını genel sayfa düzeyinde optimizasyondan belirli DOM düzeyinde hedeflemeye taşır.

Attribution Element filtrelemesinin amacı: Doğrulama ve Keşif

Bu boyut, performans iş akışında iki temel stratejik işleve hizmet eder: Hedef Doğrulama ve Davranışsal Keşif.

• Hedef Doğrulama: Yanlış düğümü hedefliyorsan LCP'yi optimize edemezsin. Geliştiriciler genellikle LCP öğesinin "Hero Image" olduğunu varsayar ve onu optimize eder. Ancak tarayıcı aslında bir metin bloğunu veya çerez banner'ını LCP olarak işaretlediği için metrik değişmez. Bu boyut, tarayıcının tam olarak hangi öğeyi ölçtüğünü doğrular.
• Davranışsal Keşif: Kullanıcılar sitenle QA sürecinde öngörmediğin şekillerde etkileşime girer. Yakınlaştırma bekleyerek statik görsellere tıklarlar veya yanıt vermeyen UI öğelerine öfkeyle tıklarlar (rage-click). Bu boyut, kullanıcıların yüksek gecikmeye yol açan hangi gerçek öğelerle etkileşime girdiğini gösterir ve test kapsamındaki kör noktaları ortaya çıkarır.

Metriğe Özel Senaryolar

Attribution Element incelenirken her Core Web Vitals metriği farklı bir analitik yaklaşım gerektirir.

Largest Contentful Paint (LCP)

LCP Attribution Element, "Resource Priority" (Kaynak Önceliği) için denetim aracındır. Şu sorunun cevabını verir: Ekrandaki en büyük öğe, benim tasarladığım öğe mi?

1. Beklenmedik LCP: Sıklıkla LCP düğümü olarak div.cookie-consent veya p.intro-text gibi öğelerin geldiğini görürsün. Bu genellikle bir yükleme hatasını değil, duyarlı tasarım gerçeğini gösterir. Belirli viewport'larda (özellikle mobilde), "Hero Image" bir metin bloğundan daha küçük oluşturulabilir veya tamamen katlanma çizgisinin altına itilebilir. Eğer bir metin bloğu viewport'ta görselden fiziksel olarak daha fazla piksel kaplıyorsa, tarayıcı metni doğru şekilde LCP olarak tanımlar. Mobil düzeninin ana içerik olarak metinleri görsellerin önüne geçirip geçirmediğini görmek için bu öğeleri Device Form Factor boyutuyla karşılaştırmalısın.
2. Beklenen LCP: Boyut, hedeflediğin img.hero-banner öğesinin gerçekten LCP öğesi olduğunu doğruladığında, varlığa özel optimizasyon için yeşil ışık yanmış demektir. Artık bu belirli görsel dosyasına yapacağın doğrudan müdahalelerin (sıkıştırma, format, önbelleğe alma) genel skorunu doğrudan etkileyeceğini bilirsin.

Interaction to Next Paint (INP)

INP sorunları genellikle kullanıcı amacı ile arayüzün tepkiselliği arasındaki uyuşmazlıktan kaynaklanır. Bu boyut; main thread engellenmesine yol açan tıklama, dokunma veya tuşa basma hedeflerini gösterir.

1. Gizli Etkileşimler: IMG.product-detail veya DIV.background-wrapper gibi "etkileşimli" olduğunu düşünmediğin öğelerde yüksek INP değerleri görebilirsin. Bu durum, kullanıcıların bu öğelere geri bildirim (lightbox veya yakınlaştırma gibi) beklentisiyle tıkladığına işaret eder. Bu geri bildirim ya hiç yoktur ya da orada olmaması gereken ağır JavaScript dinleyicilerini tetikliyordur.
2. Ağır Özellikler: INPUT.search-bar veya BUTTON.add-to-cart gibi yaygın hedefler burada sıkça görünür. Bu durum, performans darboğazını bu kontrollere bağlı özel olay işleyicilerine indirger. Gecikmenin genel sayfa yavaşlığından değil, o özelliğe bağlı belirli bir hesaplama maliyetinden (örneğin, çok agresif çalışan bir arama otomatik tamamlama betiği) kaynaklandığını doğrular.