Core/Dash Boyutu: Attribution Element

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

Attribution Element metrikleri (clsel, inpel, lcpel), bir Core Web Vital olayıyla ilişkili HTML öğesinin Düğüm Adını ve belirli CSS seçicisini döndürür.

URL boyutu size uygulama performansının nerede düştüğünü söylerken, Attribution Element bu skoru hangi belirli bileşenin etkilediğini söyler. Bu ayrıntı düzeyi, mühendislik tartışmasını genel sayfa düzeyi optimizasyondan belirli DOM düzeyi 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ü hedefliyorsanız LCP optimizasyonu yapamazsınız. Geliştiriciler genellikle "Hero Image"ın LCP öğesi 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 metriğin değişmediğini görürler. Bu boyut, tarayıcının tam olarak hangi öğeyi ölçtüğünü doğrular.
• Davranışsal Keşif: Kullanıcılar sitenizle QA sırasında öngörmediğiniz şekillerde etkileşime girer. Yakınlaştırma beklentisiyle statik görsellere tıklarlar veya tepkisiz UI öğelerine öfkeyle tıklarlar (rage-click). Bu boyut, kullanıcıların etkileşime girdiği ve yüksek gecikmeyi tetikleyen gerçek öğeleri ortaya çıkararak test kapsamınızdaki kör noktaları ifşa eder.

Metriğe Özgü Senaryolar

Her Core Web Vital, Attribution Element görüntülenirken 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. "Beklenmedik" 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ı değil, duyarlı tasarım (responsive design) gerçeğidir. Belirli görünüm alanlarında (özellikle mobil), "Hero Image"ınız bir metin bloğundan daha küçük oluşturulabilir veya tamamen ekranın alt kısmına (below the fold) itilebilir. Bir metin bloğu fiziksel olarak görünüm alanında görüntüden daha fazla piksel kaplıyorsa, tarayıcı metni doğru bir şekilde LCP olarak tanımlar. Mobil düzeninizin metni görüntülere tercih edip etmediğini görmek için bu öğeleri Device Form Factor boyutuyla çapraz referanslamalısınız.
2. "Beklenen" LCP: Boyut, amaçlanan img.hero-banner öğenizin gerçekten LCP öğesi olduğunu doğruladığında, varlığa özgü optimizasyon için yeşil ışık yakmış olursunuz. Artık bu belirli görüntü dosyasına yapılan doğrudan müdahalelerin (sıkıştırma, format, önbellekleme) toplam puanınızı doğrudan etkileyeceğini biliyorsunuz.

Interaction to Next Paint (INP)

INP sorunları genellikle kullanıcı niyeti ile arayüz tepkiselliği arasındaki uyumsuzluktan kaynaklanır. Bu boyut, ana iş parçacığı (main-thread) engellemesiyle sonuçlanan belirli tıklama, dokunma veya tuşa basma hedeflerini vurgular.

1. "Gizli" Etkileşimler: IMG.product-detail veya DIV.background-wrapper gibi "etkileşimli" olarak düşünmediğiniz öğelere ekli yüksek INP değerleri bulabilirsiniz. Bu, kullanıcıların bu öğelere geri bildirim (lightbox veya yakınlaştırma gibi) bekleyerek tıkladığını, ancak bu geri bildirimin ya mevcut olmadığını ya da orada olmaması gereken ağır JavaScript dinleyicilerini çalıştırdığını 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 ekli belirli olay işleyicilerine izole eder. Gecikmenin genel sayfa yavaşlığı değil, o özelliğe bağlı belirli bir hesaplama maliyeti olduğunu doğrular (örneğin, çok agresif çalışan bir arama otomatik tamamlama betiği).