Core/Dash Boyutu: LOAF

Boyut: Long Animation Frames (lurl)

LOAF boyutu, kullanıcılarınızın oturumları sırasında Long Animation Frames'e neden olan scriptlerin URL'lerini yüzeye çıkarır. Her değer bir script URL'sidir: birinci taraf bir bundle, üçüncü taraf bir analiz etiketi, bir sohbet widget'ı, bir izin yöneticisi veya oluşturmayı (rendering) engelleyecek kadar uzun süre çalışan başka herhangi bir şey. Bu, DevTools'ta yeniden yapılandırmanız gereken sadece bir yığın izlemesi (stack trace) değil, kaynak düzeyinde atıftır.

CoreDash, bu verileri Chrome'un eski Long Tasks API'sinin yerine sunduğu Long Animation Frames API (LoAF) kullanarak toplar. Long Tasks size bir karenin (frame) çok uzun sürdüğünü söylerken, LoAF o kare içinde hangi scriptlerin çalıştığını ve URL'lerinin ne olduğunu söyler. Bu boyutu üretimde (production) faydalı kılan ayrım budur.

Long Tasks Neden Yeterli Değildi?

Long Tasks API (2017'den beri kullanılabilir), 50 ms'yi aşan herhangi bir ana iş parçacığı görevini (main thread task) işaretledi, ancak size neredeyse hiçbir atıf (attribution) sunmadı. Engellemenin gerçekleştiğini görebiliyordunuz; buna neyin sebep olduğunu göremiyordunuz. Geliştiriciler, hangi scriptin sorumlu olduğunu tahmin ederek görev zaman damgalarını ağ şelaleleriyle (network waterfalls) ilişkilendirmek için saatler harcadılar.

LoAF API bunu değiştirir. Her biri bir scripts dizisi içeren PerformanceLongAnimationFrameEntry nesnelerini raporlar. Bu dizideki her girdinin bir invokerType, bir sourceURL ve bir duration değeri vardır. CoreDash, uzun bir kare sırasında çalışan her script için sourceURL değerini okur ve bunu LOAF boyut değeri olarak saklar. Sonuç, kullanıcılarınızın uzun karelerinde ne kadar sıklıkla göründüklerine göre sıralanmış bir script URL'leri listesidir.

CoreDash LoAF Verilerini Nasıl Kullanır?

Bir kullanıcı etkileşimi uzun bir animasyon karesini (long animation frame) her tetiklediğinde CoreDash, katkıda bulunan script URL'lerini INP gözleminin yanında kaydeder. Bu, INP verilerinizi LOAF URL'sine göre filtreleyebileceğiniz ve en kötü etkileşimlerinizden hangi scriptin sorumlu olduğunu görebileceğiniz anlamına gelir. Boyut URL'ye göre gruplandırılır, böylece o scriptin uzun bir kareye neden olduğu kaç oturumun dahil olduğunun sayısını görürsünüz.

LOAF boyutunda göreceğiniz tipik girdiler:

• https://www.googletagmanager.com/gtm.js (Google Tag Manager container)
• https://cdn.cookielaw.org/consent/... (OneTrust veya benzeri izin platformu)
• https://js.intercomcdn.com/... (sohbet widget'ı)
• /static/js/app.bundle.js (kendi uygulama kodunuz)
• https://connect.facebook.net/en_US/fbevents.js (Meta Pixel)

CoreDash verilerinde, üçüncü taraf scriptler sitelerin yaklaşık %60-70'inde long animation frames'den sorumludur. Tag manager'lar tek başlarına izlenen mülklerin yaklaşık %45'inde uzun karelere katkıda bulunur. Geri kalan kısma genellikle React yeniden oluşturmaları (re-renders) veya optimize edilmemiş olay işleyicileri (event handlers) nedeniyle birinci taraf bundle'lar hakimdir.

LoAF ile INP Atıfı (Attribution)

INP, kullanıcı etkileşiminden sonraki kare çizimine (next frame paint) kadar geçen süreyi ölçer. Bu boşluk 200 ms'yi aşarsa Google deneyimi "geliştirilmesi gerekiyor" (needs improvement) olarak sınıflandırır. LoAF verileri size bu boşluk sırasında hangi scriptin çalıştığını söyler. 210 ms'sinin bir izin yöneticisi scriptine dayandığı 280 ms'lik bir INP ile, 190 ms'sinin kendi ödeme işleyicinize dayandığı 280 ms'lik bir INP tamamen farklı problemlerdir. Düzeltme farklıdır. Sorumlu ekip farklıdır. Aciliyet farklıdır.

LoAF atıfı olmadan, her ikisi de INP histogramınızda tamamen aynı görünür. Onunla birlikte sorunu anında doğru kişiye yönlendirebilirsiniz.

Hata Ayıklama (Debugging) İş Akışı

1. CoreDash'te LOAF boyutunu açın: Sıklığa göre sıralayın (kaç oturumun bu URL'yi uzun bir karede gördüğü). En üstteki girdi en yüksek öncelikli hedefinizdir.
2. INP ile çapraz filtreleme yapın: LOAF filtresini INP metrik görünümünüze uygulayın. O scriptin çalıştığı oturumları izole ettiğinizde INP p75'in değişip değişmediğini kontrol edin. 30ms+ bir artış, scriptin üretim ortamında INP düşüşüne katkıda bulunduğunu doğrular.
3. Birinci taraf veya üçüncü taraf olarak sınıflandırın: URL'deki kendi alan adınız düzeltmeyi sizin kontrol ettiğiniz anlamına gelir. Üçüncü taraf bir CDN URL'si, satıcı scriptini kaldırmanız, geciktirmeniz veya değiştirmeniz gerektiği anlamına gelir.
4. Düzeltmeyi uygulayın ve doğrulayın: Üçüncü taraf scriptler için yüklemeyi bir facade veya geciktirilmiş init kullanarak ilk kullanıcı etkileşiminden sonraya erteleyin. Birinci taraf kod için, Chrome DevTools'ta CPU throttling 4x'e ayarlanmış olarak ilgili fonksiyonun profilini çıkarın (profile). Değişikliği dağıtın (deploy) ve gerçek kullanıcı trafiğinin 24-48 saati içinde LOAF boyutunun güncellenmesini izleyin.

Mühendislik Altın Kuralları

• Oturumların %5'inden fazlasında long frames içinde görünen herhangi bir tekil script URL'si araştırılmaya değerdir. Bu oranda, ay boyunca gerçek kullanıcıların ölçülebilir bir bölümünü etkiliyordur.
• Üçüncü taraf scriptler etkileşim işleyicileri (interaction handlers) sırasında çalışmamalıdır. Bir tag manager bir tıklama olayında senkronize olarak tetikleniyorsa, bu bir yapılandırma sorunudur, bir tarayıcı sınırlaması değildir.
• Tek bir script için 200 ms'nin üzerindeki uzun kare süresi açık bir işarettir. LoAF API, kare içinde script başına süreyi raporlar. Bir karenin 200 ms veya daha fazlasını tüketen herhangi bir script, onu takip eden INP'nin ana nedenidir.
• LOAF listesindeki birinci taraf scriptler genellikle framework ek yüküne (overhead) işaret eder. React, Vue ve Angular durum güncellemeleri (state updates) sırasında uzun kareler üretebilir. LoAF URL'si kendi bundle'ınız olacaktır. Sadece ağı (network) değil, bileşen ağacının (component tree) profilini çıkarın.

LOAF boyutu size hiçbir sentetik testin veremeyeceği bir şey verir: üretimde (production) gerçek kullanıcıları hangi scriptlerin engellediğinin gerçek dünya sıklığına göre sıralanmış kanıtı. Buna göre filtreleyin, INP verilerinizle çapraz referans yapın ve tam olarak neyi hangi sırayla düzelteceğinizin önceliklendirilmiş bir listesine sahip olun.