Core/Dash Boyutu: Load State (INP)

Boyut: Load State INP (inpls)

Load State (INP) boyutu, bir kullanıcı etkileşiminin yakalandığı tam andaki belge hazır durumunu (document ready state) kaydeder. Chrome Kullanıcı Deneyimi Raporu'ndaki her INP olayı bir yükleme durumu etiketi taşır: loading, dom-interactive, dom-content-loaded veya complete. CoreDash bu etiketi filtrelenebilir ve gruplanabilir bir boyut olarak yüzeye çıkarır, böylece ham INP puanlarının yanıtlayamadığı o soruyu yanıtlayabilirsiniz: en kötü etkileşim sayfa yaşam döngüsünün tam olarak neresinde gerçekleşti?

Bu soru, iki tamamen farklı mühendislik çözümü arasındaki ayrım çizgisidir. loading sırasında kümelenen bir INP sorunu, bir JavaScript erteleme stratejisi gerektirir. complete sırasında kümelenen bir INP sorunu ise olay işleyici (event handler) iş yükünü kırpmayı, framework yükünü azaltmayı veya çalışma zamanı (runtime) kodunuzdaki uzun görevleri parçalamayı gerektirir. Yükleme durumuna göre gruplandırma, manuel bir enstrümantasyon gerektirmeden size bu ayrımı sunar.

İzlenen siteler genelindeki CoreDash verilerinde, INP etkileşimlerinin yükleme durumuna göre dağılımı kabaca şöyledir: loading %15, dom-interactive %20, dom-content-loaded %25, complete %40. Etkileşimlerin büyük bir çoğunluğu sayfa tamamen yüklendikten sonra gerçekleşir, ancak en kötü INP puanları ezici bir çoğunlukla erken durumlarda kümelenir.

Ekran Görüntüsü

Load State, INP İçin Neden Önemlidir?

Interaction to Next Paint metriği, bir kullanıcı etkileşiminin tam gecikmesini (latency) ölçer: input delay (girdi gecikmesi), olay işleyici (event handler) işleme süresi ve bir sonraki çizilen kareye kadar geçen sunum gecikmesi. Bu üç bileşen arasında input delay, kullanıcının tıkladığı veya dokunduğu anda tarayıcının ne yaptığıyla en doğrudan kontrol edilen bileşendir.

Erken sayfa yüklemesi sırasında main thread (ana iş parçacığı) maksimum çekişme halindedir. Tarayıcı HTML'i ayrıştırır, senkron komut dosyalarını çalıştırır, CSSOM'u inşa eder, ayrıştırıcıyı engelleyen (parser-blocking) kaynakları çalıştırır ve render döngülerini art arda tetikler. Main thread üzerindeki her uzun görev, bir kullanıcı etkileşiminin sıraya girip beklediği bir penceredir. Bu bekleme süresi input delay'dir ve sayfa yüklemesi sırasındaki zayıf INP'nin baskın nedenidir.

document.readyState durumu complete değerine ulaştıktan sonra gelen etkileşimler daha sessiz bir main thread ile karşılaşır. Tarayıcının yükleme işlemi bitmiştir. Eğer bu aşamada INP hala kötüyse, bunun nedeni yükleme çekişmesi değildir. Neden, sayfanızın kullanıcı eylemlerine yanıt olarak çalıştırdığı JavaScript'tir: şişirilmiş olay işleyicileri, framework yeniden render (re-render) döngüleri, komut dosyaları tarafından tetiklenen düzen bozulmaları (layout thrashing) veya etkileşim sırasında senkron olarak çalışan optimize edilmemiş üçüncü taraf (third-party) kodlardır.

Load state, bu iki kök nedeni birbirinden ayırmak için en hızlı tek filtredir.

Load State Durumları

loading

Sayfa HTML belgesini ayrıştırmayı henüz bitirmemiştir. Main thread, senkron komut dosyalarını çalıştırıyor, ayrıştırıcıyı engelleyen kaynakları getiriyor ve ilk DOM'u oluşturuyordur. Bu, kullanıcı etkileşimi için en zorlu ortamdır. Input delay en yüksek seviyededir, çünkü herhangi bir uzun görev (long task) tarayıcının tıklama veya dokunmayı işlemesini doğrudan engeller. Bu pencerede etkileşime giren kullanıcılar, genellikle en sabırsız ziyaretçiler veya sayfa yüklemesi bitmeden görünür içeriğe ulaşan hızlı bağlantıya sahip kişilerdir. Bu kullanıcıların INP puanları, toplayacağınız en kötü puanlardır. Eğer zayıf INP olaylarınızın anlamlı bir kısmı loading durumunu taşıyorsa, kritik olmayan komut dosyalarını defer veya async olarak değiştirin ve ekranın üst kısmındaki (above the fold) ayrıştırıcı engelleyici kaynakları ortadan kaldırın.

dom-interactive

HTML tamamen ayrıştırılıp DOM oluşturulduğunda, ancak resimler, stil şablonları (stylesheets) ve ertelenmiş (deferred) komut dosyaları gibi alt kaynaklar hala yüklenirken document.readyState durumu interactive değerine ulaşır. Ertelenmiş komut dosyaları bu noktada çalışmaya başlar, bu da main thread'in hala yoğun bir şekilde meşgul olabileceği anlamına gelir. Framework hidrasyonu (hydration) genellikle burada başlar. Bu tehlikeli bir penceredir çünkü sayfa kullanıcıya hazır görünür ancak main thread hala meşguldür. Input delay yüksek seviyelerde kalır. Eğer kötü INP puanları burada yoğunlaşıyorsa, çözüm loading durumuyla aynıdır: DOM ayrıştırması tamamlandıktan hemen sonra çalışan senkron iş hacmini azaltın.

dom-content-loaded

DOMContentLoaded olayı tetiklenmiştir. DOM tamamlanmıştır ve ertelenmiş komut dosyaları çalıştırılmıştır. Çoğu JavaScript framework'ü bu noktaya kadar ilk hidrasyon (hydration) geçişini tamamlamış olur. Main thread iş yükü düşer ve etkileşimler daha hızlı yanıt almaya başlar. Bu durumdaki INP puanları tipik olarak önceki iki duruma göre daha iyidir, ancak yine de complete durumuna kıyasla yüksektir. Burada zayıf etkileşimlerin yoğunlaştığını görürseniz, framework'ünüzün veya uygulama komut dosyalarınızın DOMContentLoaded işleyicilerinde ne yaptığına ve görevler arasında girdi işlemeye izin vermek için hidrasyon işinin parçalara ayrılıp (chunked) ayrılamayacağına veya yield edilip edilemeyeceğine bakın.

complete

Resimler, yazı tipleri ve üçüncü taraf (third-party) iframe'ler dahil olmak üzere tüm kaynaklar yüklendiğinde document.readyState durumu complete değerine ulaşır. Bu, sayfanın oturumun geri kalanı boyunca çalıştığı kararlı durumdur. Bu aşamadaki zayıf INP, tamamen bir çalışma zamanı (runtime) sorunudur. Sayfanın yüklenmesi bitmiştir. Eğer main thread hala etkileşimleri engelliyorsa, bunun nedeni etkileşim sırasındaki JavaScript yürütmenizde yatar: çok fazla senkron çalışma yapan olay işleyicileri (event handlers), pahalı düzen (layout) yeniden hesaplamalarını tetikleyen framework güncellemeleri veya sürekli uzun görevler (long tasks) çalıştıran üçüncü taraf komut dosyaları. Buradaki çözüm ertelemekle ilgili değildir. Kullanıcı gerçekten tıkladığında gerçekleşen işlemlerin maliyetini azaltmakla ilgilidir.

Hata Ayıklama İş Akışı

Adım 1: CoreDash'te load state'e göre filtreleyin. INP döküm (breakdown) tablosunu açın ve Load State'e göre gruplandırın. Hangi durumun zayıf (200ms üzeri) etkileşimlerde en yüksek paya sahip olduğunu belirleyin. Bu, bir yükleme sorununa mı yoksa bir çalışma zamanı (runtime) sorununa mı baktığınızı size anında söyler.

Adım 2: URL ve cihaz ile çapraz referans yapın. Hangi spesifik sayfaların erken yükleme durumlarında zayıf etkileşimler ürettiğini bulmak için Load State boyutuyla URL boyutunu birleştirin. Mobil cihazlar yükleme sırasında orantısız bir şekilde etkilenir, çünkü daha yavaş CPU'lar her uzun görevi uzatır.

Adım 3: Çözümü duruma göre eşleştirin. loading ve dom-interactive için, Optimize INP kılavuzunu kullanarak komut dosyası yükleme stratejinizi denetleyin. Komut dosyalarını defer yapın, render engelleyici kaynakları ortadan kaldırın ve uzun başlatma (initialization) görevlerini bölmek için scheduler.yield() kullanın. complete durumu için, Chrome DevTools'da olay işleyicilerinizin (event handlers) profilini çıkarın ve etkileşim başına tetikledikleri senkron iş yükünü azaltın.

Mühendislik Pratik Kuralı

Eğer zayıf INP etkileşimlerinizin %30'undan fazlası loading veya dom-interactive olarak etiketlenmişse, INP sorununuz bir sayfa yükleme sorunudur ve JavaScript'i ertelemek (deferral) en büyük iyileştirmeyi sağlayacaktır. Zayıf etkileşimlerin %60'ından fazlası complete olarak etiketlenmişse, INP sorununuz bir çalışma zamanı (runtime) sorunudur ve komut dosyası yükleme sırasını değil, olay işleyicisi (event handler) maliyetini optimize etmeniz gerekir. Load State (INP), bir laboratuvar (lab) oturumu veya özel bir enstrümantasyon gerektirmeden bu kararı tek bir tablo görünümünde almanızı sağlar.