Core/Dash Boyutu: Yükleme Durumu (INP)

Boyut: Yükleme Durumu INP (inpls)

Yükleme Durumu (INP) boyutu, bir kullanıcı etkileşiminin yakalandığı tam andaki belge hazır durumunu kaydeder. Chrome Kullanıcı Deneyimi Raporundaki her INP olayı bir yükleme durumu etiketi taşır: loading, dom-interactive, dom-content-loaded veya complete durumlarından biri. CoreDash, bu etiketi filtrelenebilir ve gruplandırılabilir bir boyut olarak yüzeye çıkarır, böylece ham INP skorlarının yanıtlayamadığı o soruyu yanıtlayabilirsiniz: en kötü etkileşim sayfa yaşam döngüsünün hangi aşamasında gerçekleşti?

Bu soru, tamamen farklı iki 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şleyicisi iş yükünü azaltmayı, framework ek yükünü düşürmeyi veya çalışma zamanı kodunuzdaki uzun görevleri parçalamayı gerektirir. Yükleme durumuna göre gruplandırma, herhangi bir manuel enstrümantasyon olmadan size bu ayrımı sağlar.

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

Ekran Görüntüsü

Yükleme Durumu INP İçin Neden Önemlidir?

Interaction to Next Paint metriği, bir kullanıcı etkileşiminin tam gecikmesini ölçer: giriş gecikmesi, olay işleyicisi işlem süresi ve bir sonraki boyanan kareye kadar geçen sunum gecikmesi. Bu üç bileşenden giriş gecikmesi, kullanıcının tıkladığı veya dokunduğu anda tarayıcının ne yaptığı tarafından en doğrudan kontrol edilen kısımdır.

Erken sayfa yükleme sırasında, ana iş parçacığı (main thread) maksimum çekişme (contention) halindedir. Tarayıcı HTML'i ayrıştırır, senkron komut dosyalarını çalıştırır, CSSOM'u oluşturur, ayrıştırıcıyı engelleyen kaynakları yürütür ve arka arkaya oluşturma (render) döngülerini tetikler. Ana iş parçacığındaki her uzun görev, bir kullanıcı etkileşiminin sıraya alındığı ve beklediği bir penceredir. Bu bekleme giriş gecikmesidir ve sayfa yüklemesi sırasındaki zayıf INP değerlerinin baskın nedenidir.

document.readyState, complete durumuna ulaştıktan sonra gelen etkileşimler daha sessiz bir ana iş parçacığıyla 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, kullanıcı eylemlerine yanıt olarak sayfanızın çalıştırdığı JavaScript kodudur: şişirilmiş olay işleyicileri, framework yeniden oluşturma döngüleri, komut dosyaları tarafından tetiklenen aşırı düzen hesaplamaları (layout thrashing) veya etkileşim sırasında senkron olarak çalışan optimize edilmemiş üçüncü taraf kodları.

Yükleme durumu, bu iki temel nedeni birbirinden ayırmak için en hızlı tek filtredir.

Yükleme Durumları

loading

Sayfa, HTML belgesini ayrıştırmayı henüz bitirmemiştir. Ana iş parçacığı 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 düşmanca ortamdır. Giriş gecikmesi en yüksek seviyededir, çünkü herhangi bir uzun görev, tarayıcının tıklamayı veya dokunmayı işlemesini doğrudan engeller. Bu pencere sırasında etkileşime giren kullanıcılar genellikle en sabırsız ziyaretçiler veya sayfa yüklemeyi bitirmeden görünür içeriğe ulaşan hızlı bağlantıya sahip kişilerdir. Bu kişilerin INP skorları, toplayacağınız en kötü skorlardır. Zayıf INP olaylarınızın anlamlı bir kısmı loading durumunu taşıyorsa, kritik olmayan komut dosyalarını defer veya async özelliklerine taşıyın ve ekranın üst kısmındaki ayrıştırıcıyı engelleyen kaynakları ortadan kaldırın.

dom-interactive

HTML tamamen ayrıştırılıp DOM oluşturulduğunda, ancak görseller, stil şablonları ve ertelenmiş komut dosyaları gibi alt kaynaklar hala yükleniyorken document.readyState, interactive durumuna ulaşır. Ertelenmiş komut dosyaları bu noktada çalışmaya başlar, bu da ana iş parçacığının hala yoğun şekilde meşgul olabileceği anlamına gelir. Framework hidrasyonu genellikle burada başlar. Sayfa kullanıcıya hazır görünse de ana iş parçacığı hala meşgul olduğu için bu tehlikeli bir penceredir. Giriş gecikmesi yüksek kalır. Eğer kötü INP burada yoğunlaşıyorsa, çözüm loading ile 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 geçişlerini bitirmiştir. Ana iş parçacığının iş yükü düşer ve etkileşimler daha hızlı yanıtlar almaya başlar. Bu durumdaki INP skorları genellikle önceki iki duruma göre daha iyidir, ancak complete durumuna kıyasla hala yüksektir. Zayıf etkileşimlerin burada yoğunlaştığını görüyorsanız, framework'ünüzün veya uygulama komut dosyalarınızın DOMContentLoaded işleyicilerinde ne yaptığına ve görevler arasında girişlerin işlenmesine izin vermek için hidrasyon işinin parçalara ayrılıp ayrılamayacağına veya yield edilip edilemeyeceğine bakın.

complete

document.readyState, görseller, yazı tipleri ve üçüncü taraf iframe'ler dahil tüm kaynaklar yüklendiğinde complete durumuna ulaşır. Bu, sayfanın oturumun geri kalanı boyunca çalıştığı kararlı durumdur. Bu durumdaki zayıf bir INP, tamamen bir çalışma zamanı sorunudur. Sayfanın yüklenmesi bitmiştir. Ana iş parçacığı etkileşimleri hala engelliyorsa, neden etkileşim sırasındaki JavaScript yürütmenizde yatmaktadır: çok fazla senkron iş yapan olay işleyicileri, maliyetli düzen yeniden hesaplamalarını tetikleyen framework güncellemeleri veya sürekli uzun görevler çalıştıran üçüncü taraf komut dosyaları. Çözüm erteleme ile ilgili değildir. Çözüm, kullanıcı gerçekten tıkladığında gerçekleşen işlemlerin maliyetini düşürmekle ilgilidir.

Hata Ayıklama İş Akışı

Adım 1: CoreDash'te yükleme durumuna göre filtreleyin. INP döküm tablosunu açın ve Yükleme Durumuna 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ı sorununa mı baktığınızı anında size söyler.

Adım 2: URL ve cihaz ile çapraz referanslayın. Erken yükleme durumları sırasında hangi belirli sayfaların zayıf etkileşimler ürettiğini bulmak için Yükleme Durumu boyutunu URL boyutu ile 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ü durumla eşleştirin. loading ve dom-interactive için, Optimize INP kılavuzunu kullanarak komut dosyası yükleme stratejinizi denetleyin. Komut dosyalarını defer niteliğine taşıyın, oluşturmayı engelleyen kaynakları ortadan kaldırın ve uzun başlatma görevlerini parçalamak için scheduler.yield() kullanın. complete için, Chrome DevTools'ta olay işleyicilerinizin profilini çıkarın ve etkileşim başına tetikledikleri senkron işi azaltın.

Mühendislik Temel Kuralı

Zayıf INP etkileşimlerinizin %30'undan fazlası loading veya dom-interactive olarak etiketlenmişse, INP sorununuz bir sayfa yükleme sorunudur ve JavaScript'in ertelenmesi 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ı sorunudur ve komut dosyası yükleme sırasını değil, olay işleyicisi maliyetini optimize etmeniz gerekir. Yükleme Durumu (INP), laboratuvar oturumu veya özel enstrümantasyon gerektirmeden bu kararı tek bir tablo görünümünde verir.