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 Düğüm Adını (Node Name) ve belirli CSS seçicisini döndürür.

URL boyutu size uygulamanın neresinde performansın düştüğünü söylerken, Attribution Element bu skoru hangi belirli bileşenin yönlendirdiğini söyler. Bu ayrıntı düzeyi, mühendislik tartışmalarını genel sayfa düzeyinde optimizasyondan belirli DOM düzeyinde hedeflemeye dönüştürür.

Attribution element filtrelemenin amacı: Doğrulama ve Keşif

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

• Hedef Doğrulama: Yanlış düğümü (node) hedeflerseniz LCP'yi optimize edemezsiniz. Geliştiriciler genellikle "Hero Görseli"nin LCP öğesi olduğunu varsayar ve onu optimize ederler, ancak tarayıcının aslında bir metin bloğunu veya çerez başlığını LCP olarak işaretlediği için metriğin değişmediğini fark ederler. Bu boyut, tarayıcının tam olarak hangi öğeyi ölçtüğünü doğrular.
• Davranışsal Keşif: Kullanıcılar, QA sırasında beklemediğiniz şekillerde sitenizle etkileşime girerler. Yakınlaştırma (zoom) beklentisiyle statik görsellere tıklarlar veya yanıt vermeyen kullanıcı arayüzü öğelerine öfkeyle tıklarlar (rage-click). Bu boyut, yüksek gecikmeyi tetikleyen kullanıcıların gerçekten etkileşimde bulunduğu öğeleri ortaya çıkararak, test kapsamınızdaki kör noktaları açığa çıkarır.

Metriğe Özel Senaryolar

Her bir Core Web Vitals, Attribution Element'i incelerken farklı bir analitik yaklaşım gerektirir.

Largest Contentful Paint (LCP)

LCP Attribution Element, "Kaynak Önceliği" için denetim aracınızdır. Şu soruyu yanıtlar: Ekrandaki en büyük öğe benim tasarladığım öğe mi?

1. "Beklenmeyen" LCP: Genellikle div.cookie-consent veya p.intro-text gibi öğelerin LCP düğümü olarak göründüğünü görürsünüz. Bu genellikle bir yükleme hatasına değil, duyarlı (responsive) tasarım gerçeğine işaret eder. Belirli görünüm alanlarında (özellikle mobilde), "Hero Görseliniz" bir metin bloğundan daha küçük oluşturulabilir veya tamamen ekranın alt kısmına itilebilir. Bir metin bloğu fiziksel olarak görünüm alanında görselden daha fazla piksel kaplıyorsa, tarayıcı metni doğru bir şekilde LCP olarak tanımlar. Mobil düzeninizin metni görsellere göre birincil içerik olarak öne çıkarıp çıkarmadığını görmek için, bu öğeleri Cihaz Form Faktörü (Device Form Factor) boyutuyla çapraz referanslamalısınız.
2. "Beklenen" LCP: Boyut, hedeflediğiniz img.hero-banner'ın gerçekten de LCP öğesi olduğunu doğruladığında, varlığa özel optimizasyon için yeşil ışık yakmış olursunuz. Artık bu belirli görsel dosyasına yapılacak doğrudan müdahalelerin (sıkıştırma, format, önbelleğe alma) toplam puanınızı doğrudan etkileyeceğini biliyorsunuz.

Interaction to Next Paint (INP)

INP sorunları genellikle kullanıcı niyeti ile arayüzün yanıt verebilirliği arasındaki uyumsuzluktan kaynaklanır. Bu boyut, ana iş parçacığı engellemesine yol açan belirli tıklama, dokunma veya tuş basma hedeflerini vurgular.

1. "Gizli" Etkileşimler: IMG.product-detail veya DIV.background-wrapper gibi "etkileşimli" olduğunu düşünmediğiniz öğelere bağlı yüksek INP değerleri bulabilirsiniz. Bu, kullanıcıların bu öğelere tıklayarak ya var olmayan ya da orada olmaması gereken ağır JavaScript dinleyicilerini çalıştıran bir geri bildirim (lightbox veya yakınlaştırma gibi) beklediğini gösterir.
2. Ağır Özellikler: INPUT.search-bar veya BUTTON.add-to-cart gibi yaygın hedefler sıklıkla burada görünür. Bu, performans darboğazını bu kontrollere bağlı belirli olay işleyicilerine izole eder. Gecikmenin genel bir sayfa yavaşlığı değil, bu özelliğe bağlı belirli bir hesaplama maliyeti olduğunu doğrular (örneğin, çok agresif çalışan bir arama otomatik tamamlama betiği)