Interaction to Next Paint (INP) Sorunlarını Bulun ve Düzeltin

Interaction to Next Paint (INP) Sorunlarını Bulun ve Düzeltin

Önceki makalemizde Interaction to Next Paint hakkında konuşmuştuk. Temel bilgileri okumak isterseniz burası başlamak için harika bir yer!

Bu makalede farklı Interaction To Next Paint sorunlarını tespit etmeye ve ardından bunları nasıl düzelteceğinizi açıklamaya odaklanacağım!

INP İPUCU: çoğu zaman INP, kullanıcı sayfa yüklemenin başlangıç aşamasında sayfayla etkileşime girdiğinde çok daha kötü olacaktır. Bu nedenle INP hatalarını ayıklarken tüm etkileşimleri ve sayfa yükleme durumunu da kaydetmek mantıklıdır!

Adım 1: Search Console'da INP'yi Kontrol Edin

"İyileşmenin ilk adımı bir sorununuz olduğunu kabul etmektir". Bu nedenle Interaction to Next Paint'i düzeltmek için herhangi bir şey yapmadan önce gerçekten Interaction to Next Paint ile ilgili bir sorunumuz olduğundan emin olalım.

Google Search Console'unuza giriş yapın. Sol menüden Core Web Vitals'a tıklayın ve Mobil veya Masaüstü seçin (ipucu: çoğu zaman INP sorunları mobilde olur, bu yüzden mobille başlayın)

Burada sitenizde mevcut olan tüm Core Web Vitals ile ilgili sorunların genel görünümünü göreceksiniz. Bu sorunlardan biri INP ile ilgiliyse bir sorun olduğunu doğrulamış oluruz!

Adım 2: Interaction to Next Paint Sorunlarını Tespit Edin

Google Search Console, Interaction to Next Paint ile ilgili sorunlara neyin neden olduğunu anlamanız için URL grupları dışında herhangi bir bilgi vermez. Bu yüzden çoğu zaman geliştiricilerin körü körüne işe giriştiğini görüyorum. Kullanılmayan JavaScript'i kaldırmaya başlıyorlar (her zaman harika bir fikir) ve ana iş parçacığını bölüyorlar (bu da harika bir fikir) ama bu INP'yi tamamen düzeltmeye nadiren yeter.

Bu nedenle INP'yi iyileştirirken tam olarak neler olduğunu bilmemiz gerekecek.

Hangi öğeler, etkileşime girildiğinde kötü bir INP Puanına neden oluyor. Genellikle kötü bir INP puanı tek bir öğeden değil, sorunların bir bileşiminden kaynaklanır. En kötülerinden başlayarak tek tek ele almamız gerekiyor.
Bu Etkileşimler ne zaman gerçekleşiyor? Sayfa yüklemenin başlangıç aşamasında mı yoksa ana sayfa yüklendikten sonra mı gerçekleşiyorlar?
Bu etkileşimler nerede gerçekleşiyor? Her sayfada mı yoksa yalnızca birkaç seçili sayfada mı gerçekleşiyorlar?
Bu etkileşimleri nasıl tekrarlayabiliriz? Şimdiye kadar INP sorunlarını tekrarlamanın zor olduğunu fark etmiş olabilirsiniz. Bu nedenle kötü INP puanına sahip cihaz özelliklerini taklit ederek başarıya hazırlanmamız gerekiyor.

RUM İzlemeyi Kurun

Tüm bu soruları yanıtlamak için gerçek kullanıcıları izlemeye başlamamız ve Interaction to Next Paint ile ilgili olabilecek sorunları kaydetmemiz gerekiyor. RUM izlemeyi etkinleştirmenin birkaç yolu var. İlki, Web Vitals kütüphanesini kullanarak sonuçları kendi analitik arka ucunuza göndermektir. Bu yöntemin avantajı ucuz ve esnek olmasıdır. Dezavantajı ise çok fazla ek iş gerektirebilmesidir.

Core Web Vitals verilerinizi kendi arka ucunuza göndermenin iyi bir alternatifi, piyasadaki birçok RUM aracından birini kullanmaktır. CoreDash'i tam da bu kullanım durumları için geliştirdik. CoreDash düşük maliyetli, hızlı ve etkili bir RUM aracıdır ve işi halleder! Elbette piyasada birçok RUM çözümü var ve onlar da işi görür (daha yüksek bir fiyata olsa da)

Yüksek INP'ye Neden Olan Öğe Başına Yavaş Etkileşimleri Bulun

Yapılması gereken ilk şey, en kötü Time to First Byte puanlarına neden olan 'en yavaş' etkileşimleri bulmaktır. CoreDash'te sayfalarınızı 'Öğelere Göre INP Metriği' ile sıralayın ve en yavaş etkileşimlerinizi elde edin. Metriklerinizi bu etkileşimlere göre filtrelemek için ilk satıra tıklayın.

Kötü INP Etkileşimlerinin Ne Zaman Gerçekleştiğini Bulun

Ardından filtrelenmiş URL'leri yükleme durumuna göre sıralayın. Bu size INP'nin temel nedeni hakkında daha fazla bilgi verecektir. Bu durumda yüksek INP, DOM içeriği yüklendiğinde gerçekleşiyor. Bu, betiklerin ayrıştırıldığı ancak asenkron betiklerin ve sayfanın alt kaynaklarının henüz yüklenmediği anlamına gelir. Bu durumda INP, sayfa yüklemesi tamamen tamamlanmadan yapılan erken tıklamalardan kaynaklanıyor!

Başka bir filtre oluşturmak için en yüksek etkiye sahip yükleme durumuna tıklayarak devam edin!

Yüksek INP Puanlarından Sorumlu URL'leri Bulun

Son olarak, en yavaş etkileşime sahip öğeler ve doğru yükleme durumu için filtreleme yaptığımızda, INP'nin en kötü olduğu URL'lere bir göz atacağız. Bu durumda bu açıkça belirli bir sayfa grubunda gerçekleşiyor.

Cihaz Özelliklerini Bulun

Son olarak, yüksek Interaction to Next Paint'e neden olan yavaş etkileşimleri, yükleme durumunu ve URL'leri tespit ettiğimizde, en kötü INP puanlarına neden olan ziyaretçi türlerine bir göz atacağız. Cihaz Belleği, Bant Genişliği, Ekran boyutu vb. konulara bakacağız. Bu özellikleri tespit ettikten sonra sorunu tekrarlamaya ve kaydetmeye geçebiliriz!

Adım 3: Yüksek INP Puanına Neden Olan Etkileşimleri Tekrarlayın ve Hata Ayıklayın

İhtiyacımız olan tüm bilgilere sahip olduğumuzda Interaction to Next Paint'in altında yatan sorunları derinlemesine incelemeye başlayabiliriz.

Başarıya Hazırlanın: INP Başarısızlık Koşullarını Tekrarlayın

Yapmamız gereken bir sonraki şey, başarısız olan INP'yi yeniden oluşturmaya çalışmaktır. Bunu, INP'nin başarısız olabileceği koşulları taklit ederek yapıyoruz.

Chrome Performans Panelini Kullanın: Chrome geliştirici araçlarını açın (Ctrl-Shift-i) ve performans panelini seçin. Üst çubukta CPU Kısıtlama (normal bir mobil cihazı taklit etmek için 4x yavaşlatmaya ayarlayın), Ağ Kısıtlama (ortalama mobil cihazınızı taklit etmek için hızlı 3G ön ayarını seçin) seçeneklerini belirleyebilir ve donanım eşzamanlılığını ortalama mobilinizi taklit etmek için 4 veya 8 olarak ayarlayabilirsiniz.

Chrome'u daha az kullanılabilir bellekle yüklemek için (ağ ve CPU ayarını düşürmek genellikle işi görse de!) Chrome'u bir docker kapsayıcısında başlatın ve daha az bellek atayın.

Sayfayı Yeniden Yükleyin, Etkileşime Girin ve Core Web Vitals Görselleştirici ile INP'yi Kontrol Edin

Kötü INP puanlarının nedenini bulmanın bir sonraki adımı, koşulları simüle etmek ve INP puanlarının gerçekten bildirilen kadar kötü olduğunu doğrulamaktır.

Sayfayı yeniden yükleyin ve doğru zamanda doğru öğeye tıklayın

Performans İzi ile INP Hatalarını Ayıklayın

Bu, önceki adımlarda hazırlandığınız an. Belirli bir etkileşimin neden kötü Interaction To Next Paint puanına neden olduğunu bulma zamanı.

Chrome Geliştirici Konsolunu tekrar açın (Ctrl-Shift-i), Performans paneline gidin ve bu sefer Dairesel Ok simgesine tıklayarak sayfayı yeniden yükleyin ve kaydetmeye başlayın (veya Ctrl-Shift-E kısayolunu kullanın).

Chrome Geliştirici Konsolunu tekrar açın (Ctrl-Shift-i), Performans paneline gidin ve bu sefer Dairesel Ok simgesine tıklayarak sayfayı yeniden yükleyin ve kaydetmeye başlayın (veya Ctrl-Shift-E kısayolunu kullanın).

Adım 3: INP Sorunlarını Düzeltin

Artık hangi etkileşimin kötü INP'mize neden olduğunu bildiğimiz ve bu yavaş etkileşim sırasında tam olarak neler olduğunu analiz ettiğimiz bir noktadayız. Bu, Interaction to Next Paint'i düzeltmeye başlama zamanı demek. Interaction to Next Paint 3 aşamaya ayrılabilir: 'input delay', 'processing time' ve 'presentation delay'.

Interaction to Next Paint'in her aşaması farklı şekilde ele alınmalıdır!

Input Delay'i En Aza İndirin:

Input delay, sayfayla etkileşimden olay geri çağırmasının çalışmaya başlamasına kadar geçen süredir. Her zaman bir miktar input delay olsa da (tarayıcıların bile geri çağırmaları planlamak için zamana ihtiyacı vardır) dikkate alınması gereken birkaç şey vardır:

1. Uzun görevlerden kaçının. Bir görev çalıştığında ana iş parçacığını bloke eder ve olay geri çağırmalarını bekletir. Bu, erken tıklamaları optimize ederken özellikle önemlidir (çünkü o sırada çoğu betik çalışıyor olacaktır). 
2. Yeni görevler oluştururken dikkatli olun. Örneğin setTimeout() ile tekrarlayan görevler veya INP olayından önce gerçekleşmesi muhtemel mouseover olayındaki geri çağırmalar gibi görevler.
3. Erken etkileşimi ölçün ve değerlendirin. Etkileşimli bir öğe erken sunulduğunda (örneğin bir site arama öğesi) ve daha sonra yüklenen JavaScript tarafından kontrol edildiğinde, öğeyle herhangi bir etkileşim anında bir düzen güncellemesi tetiklemez. Ya işlevselliği önceliklendirin ya da düzgün çalışmadan önce öğeyi gizleyin/devre dışı bırakın.
4. JavaScript'i tarayıcının ana iş parçacığı dışında çalıştırmak için web workers kullanın. Web workers, betiğin ana iş parçacığı dışında çalışmasına olanak tanır. Bu, ana iş parçacığının bloke olmasını önleyecek ve INP input delay sorunlarına neden olmasını engelleyecektir.
   
5. Olsa iyi olur üçüncü taraf betiklerini tarayıcı boşta kalma süresinde yükleyin.  Bazı betikler diğerlerinden daha kritiktir. Bu betikleri önceliklendirmek ve daha az önemli betikleri tarayıcı boşta kalma süresinde yüklemek mantıklıdır. Örneğin bir sohbet betiği

Processing Time'ı En Aza İndirin

1. Gereksiz kodu kaldırın. Gereksiz kod, hâlâ çalışan eski kod veya bu belirli sayfada gerekli olmayan ama yine de CPU zamanı harcayan yeni koddur. Bu, INP'yi hemen iyileştirmenin açık ara en kolay yoludur.
2. Bir sonraki boyamadan önce çalışması gerekmeyen kodu erteleyin. Kodu, INP'den önce çalışması gereken kritik kod ve kritik olmayan kod (örneğin analitik gönderme) olarak ayırın ve bunu requestIdleCallback() yöntemiyle INP olayından sonra planlayın. 
3. Boyamadan önce çalışması gereken kodu optimize edin. Kodunuzu kontrol edin ve yavaş veya verimsiz kısımları yeniden yazın.
4. Anında geri bildirim sağlayın. Karmaşık veya potansiyel olarak yavaş görevlerde ana kodu çalıştırmadan önce anında geri bildirim sağlayın.

Presentation Delay'i En Aza İndirin

1.  DOM'u küçük ve basit tutun. Temel olarak, tarayıcının az sayıda ve basit iç içe geçmemiş DOM öğelerine (HTML düğümleri) sahip bir sayfayı işlemesi, çok sayıda iç içe geçmiş DOM düğümlerine sahip bir sayfayı işlemesinden çok daha kolay olacaktır.
   
2. Ekran dışı içeriği gecikmeli işlemek için content-visibility kullanın.  Content-visibility, ekran dışı içeriğin işlenmesini tam zamanında erteleyerek sayfanın görünür kısımlarının işlenmesini hızlandıracaktır.