Interaction to Next Paint (INP), bir oturum boyunca web sitesinin tıklamalar, dokunmalar ve klavye girdileri gibi kullanıcı etkileşimlerine verdiği genel yanıt verebilirliği ölçen bir Core Web Vitals metriğidir. İyi bir INP puanı 200 milisaniye veya daha azdır. INP’yi iyileştirmek; ana iş parçacığındaki uzun görevlerin parçalanmasını, üçüncü taraf betiklerin azaltılmasını, yoğun işleme operasyonları sırasında ana iş parçacığına kontrolün devredilmesini ve anında görsel geri bildirim sağlamak için olay işleyicilerinin (event handlers) optimize edilmesini gerektirir.
Interaction to Next Paint Gecikmesine Ne Sebep Olur?
Web tarayıcıları JavaScript’i ana iş parçacığı (main thread) adı verilen tek bir iş parçacığında çalıştırır. Bir kullanıcı bir düğmeye tıkladığında veya mobil menüyü açtığında, tarayıcı karşılık gelen JavaScript olay işleyicisini kuyruğa almalı, kodu çalıştırmalı ve güncellenen kareyi (frame) boyamak için yerleşimi yeniden hesaplamalıdır. Eğer ana iş parçacığı, uzun görev (long task) olarak bilinen ve 50 milisaniyeden uzun süren bir yürütme bloğu ile meşgulse, kullanıcının etkileşimi gecikir. Yürütmeyi beklemek, işleyiciyi çalıştırmak ve güncelleştirmeyi render etmek için harcanan toplam süre, toplam INP süresini oluşturur.
Tipik bir hesap veya site yapısında, yüksek gecikme genellikle üç farklı aşamadan kaynaklanır: girdi gecikmesi, işleme süresi ve sunum gecikmesi. Girdi gecikmesi, olay işleyiciniz başlamadan hemen önce önceki görevler ana iş parçacığını bloke ettiğinde meydana gelir. İşleme süresi, olay işleyici kodunun kendi süresini temsil eder. Sunum gecikmesi ise stillerin yeniden hesaplanması, yerleşim ağaçlarının güncellenmesi ve ekranda piksellerin render edilmesi için harcanan süredir. Binlerce düğüm içeren karmaşık DOM ağaçları, sunum gecikmesini önemli ölçüde artırır.
Chrome DevTools’ta INP Nasıl Ölçülür?
Etkileşim gecikmesini teşhis etmek, sayfa ile aktif olarak etkileşim kurarken performans verilerinin yakalanmasını gerektirir. Chrome DevTools’u açın, Performance panelini seçin ve öğelere tıklarken, alanlara yazarken veya interaktif menüleri açıp kapatırken manuel bir kaydı başlatın. Kaydı durdurduğunuzda, zaman çizelgesinin üst kısmındaki Interactions izine bakın. Uzun etkileşimler kırmızı göstergelerle vurgulanır ve girdi gecikmesinin, işleme süresinin ve sunum gecikmesinin tam süresini gösterir.
Gerçek dünyadaki mobil cihazları taklit etmek için DevTools Performans ayarlarında CPU yavaşlatmasını (CPU throttling) etkinleştirin. 4x CPU yavaşlaması ayarlamak, güçlü masaüstü geliştirme donanımında görünmeyebilecek darboğazları ortaya çıkarır. Lighthouse gibi sentetik test araçları laboratuvar verileri sağlar, ancak Google Search Console veya gerçek kullanıcı izleme araçları aracılığıyla toplanan saha verileri, farklı ağ hızları ve donanım yetenekleri genelindeki gerçek ziyaretçi deneyimlerini yansıtır.
Üçüncü Taraf Betikler INP Puanınızı Neden Mahvediyor?
Etiket yöneticileri aracılığıyla eklenen üçüncü taraf betikler, genellikle en yoğun kullanıcı etkinliği sırasında koordine edilmemiş JavaScript çalıştırır. Analitik takipçiler, ısı haritası araçları, sohbet widget’ları ve reklam pikselleri, gelen olayları sürekli olarak işler veya ağı yoklar. Arka planda üçüncü taraf bir pazarlama etiketi kuralları değerlendirirken bir kullanıcı interaktif bir öğeye tıkladığında, kullanıcının eylemi izleme yürütmesinin arkasında kuyruğa girer ve gecikmeyi 200 ms hedefinin üzerine çıkarır.
Üçüncü taraf betiklerin denetlenmesi, hem yükleme zamanının hem de yürütme maliyetinin değerlendirilmesini gerektirir. Takip işlevlerini Google Tag Manager içinde konsolide edin ve çakışan verileri toplayan gereksiz etiketleri kaldırın. Tetikleyici koşullarını, temel olmayan pazarlama etiketleri ilk kullanıcı etkileşiminden sonra veya requestIdleCallback yöntemleri kullanılarak boşta kalma sürelerinde yürütülecek şekilde yapılandırın. Harici betiklerden gelen ana iş parçacığı rekabetini azaltmak, kullanıcı tarafından başlatılan etkinlikler için anında alan yaratır.
Ana İş Parçacığındaki Uzun Görevlerin Parçalanması
Uzun görevler ana iş parçacığını bloke eder ve tarayıcının kullanıcı girdilerine hızlı bir şekilde yanıt vermesini engeller. Bunu çözmek için geliştiriciler monolitik fonksiyonları manuel olarak daha küçük asenkron parçalara ayırabilirler. Ana iş parçacığına kontrolü devretmek (yielding), tarayıcıya ağır arka plan hesaplamalarına devam etmeden önce kuyruğa alınan kullanıcı etkileşimlerini işlemek ve güncellenmiş görsel kareleri render etmek için kısa bir pencere sunar.
Modern tarayıcı API’leri, fonksiyon mantığını bozmadan yürütmeyi devretmek için net modeller sunar. Uzun döngüler veya çok adımlı hesaplamalar içine devretme noktaları eklemek, ana iş parçacığının gelen girdi olaylarını hemen ele almasını sağlar.
- Yürütme önceliğini korurken kontrolü ana iş parçacığına geri döndürmek için destekleyen tarayıcılarda scheduler.yield() kullanın.
- Kalan işi yeni bir makro göreve kuyruğa almak için sıfır gecikme parametresiyle setTimeout’a başvurun.
- İşlemi ana iş parçacığından tamamen taşımak için CPU yoğun veri dönüşümlerini Web Workers içinde sarmalayın.
- Değişiklikleri kare yenilemeleriyle aynı hizaya getirmek için requestAnimationFrame kullanarak devasa DOM güncellemelerini toplu işlemlere bölün.
Ağır Olay İşleyicilerini Nasıl Optimize Etmelisiniz?
Kullanıcı girdilerine bağlı olay işleyicileri genellikle tek bir senkron blokta çok fazla görev gerçekleştirmeye çalışır. Örneğin, bir e-ticaret platformundaki filtre düğmesi, tek bir tıklama olayı içinde URL parametrelerini güncelleyebilir, ürün koleksiyonlarını filtreleyebilir, fiyat aralıklarını yeniden hesaplayabilir ve izleme piksellerini tetikleyebilir. Tüm bu operasyonları senkron olarak yürütmek render işlemini durdurarak kullanıcının birkaç yüz milisaniye boyunca donmuş bir arayüzle kalmasına neden olur.
Ağır olay işleyicilerini düzeltmek için, tam hesaplama tamamlanmasından önce anında görsel geri bildirime öncelik verin. Ağır filtreleme mantığını yürütmeden önce bir yükleme simgesi göstermek veya düğme durumlarını güncellemek gibi UI durumunu anında değiştirin. Analitik ping’ler göndermek veya geçici kullanıcı durumunu localStorage’a kaydetmek gibi kritik olmayan yan etkileri birincil render döngüsünün dışına taşıyın.
Alien Road, görsel durum değişikliklerini arka plan işleminden ayırmak için interaktif bileşenler üzerindeki girdi olayı dinleyicilerinin gözden geçirilmesini önerir. İşleyicilerin yeniden yapılandırılması, kullanıcı jestlerinin anında görsel onaylar vermesini sağlayarak algılanan ve ölçülen etkileşim gecikmesini 200 ms’nin çok altında tutar.
- Kullanıcı eylemini anında onaylamak için olay işleyicisinde anında görsel geri bildirim sağlayın.
- Pencereyi yeniden boyutlandırma, kaydırma veya arama girdisi yazma gibi sürekli girdi olaylarına debounce uygulayın.
- Mikrotörevleri veya asenkron işçileri kullanarak görsel DOM güncellemelerini arka plan veri işleminden ayırın.
- Üst kapsayıcı öğelerde kayıtlı eski veya mükerrer olay dinleyicilerini kaldırın.
Karmaşık DOM Yapılarının ve Sunum Gecikmesinin Yönetilmesi
Sunum gecikmesi, Interaction to Next Paint gecikmesinin son bileşenini oluşturur. JavaScript yürütmesi tamamlandıktan sonra tarayıcı hesaplanan stilleri hesaplamalı, sayfa geometrisini yerleştirmeli ve pikselleri boyamalıdır. Binlerce öğe içeren büyük DOM ağaçları render karmaşıklığını artırarak basit DOM değişikliklerini bile hesaplamayı maliyetli hale getirir.
Gizli öğeleri kaldırarak, ekran dışı listeleri tembel (lazy) render ederek ve modern CSS kapsama (containment) özelliklerini uygulayarak DOM boyutunu yönetilebilir tutun. contain-intrinsic-size ve content-visibility: auto gibi CSS özellikleri, tarayıcıların ekran dışı bileşenler görünüm kaydırılana kadar stil ve yerleşim hesaplamalarını atlamasına olanak tanır. Yerleşim yeniden hesaplama süresini azaltmak, kullanıcı tıklamaları sırasında sunum gecikmesini doğrudan düşürür.
Bu Hafta INP İyileştirmesine Nereden Başlamalı?
Etkileşim yanıt verebilirliğini iyileştirmek, yüksek etkili darboğazları önce ele alan metodik bir yaklaşım gerektirir. Yavaş etkileşimler yaşayan belirli URL’leri belirlemek için Google Search Console’da Core Web Vitals altında gerçek kullanıcı saha verilerinizi denetleyerek başlayın.
Ardından, 4x CPU yavaşlatması altında Chrome DevTools Performance panelini kullanarak bu etkileşim gecikmelerini yeniden oluşturun. Mühendislik çabalarınızı kullanıcı tıklamaları sırasında yürütülen uzun görevleri parçalamaya, gereksiz üçüncü taraf etiketlerini temizlemeye ve ana iş parçacığı yürütmesini devretmeye odaklayın. INP puanlarını 200 ms veya daha düşük tutarak siteniz, ziyaretçilerin ilgisini canlı tutan yanıt veren bir deneyim sunar.
Okumaya devam edin: Web Tasarımı ve Geliştirme · Web Tasarımı