Laboratuvardaki yavaş etkileşimleri manuel olarak teşhis etme

Manuel testler aracılığıyla yavaş etkileşimlerin nedenlerini yeniden oluşturmak ve tespit etmek için saha verilerinizi laboratuvara nasıl taşıyacağınızı öğrenin.

Jeremy Wagner

Yayınlanma tarihi: 9 Mayıs 2023

Interaction to Next Paint (INP) metriğini optimize etmenin zor bir kısmı, INP'nin düşük olmasına neyin neden olduğunu bulmaktır. Ana iş parçacığında birçok görevi planlayan üçüncü taraf komut dosyaları, büyük DOM boyutları, pahalı etkinlik geri çağırmaları ve diğer suçlular gibi birçok olası neden vardır.

INP'yi iyileştirmek zor olabilir. Öncelikle, bir sayfanın INP'sinden hangi etkileşimlerin sorumlu olduğunu bilmeniz gerekir. Web sitenizde gerçek kullanıcı açısından en yavaş etkileşimlerin hangileri olduğunu bilmiyorsanız Alanda yavaş etkileşimleri bulma başlıklı makaleyi okuyun. Size yol gösterecek saha verilerine sahip olduktan sonra, bu etkileşimlerin neden yavaş olduğunu anlamak için laboratuvar araçlarında bu etkileşimleri manuel olarak test edebilirsiniz.

Alan verileriniz yoksa ne olur?

Hangi etkileşimlerin optimize edilmesi gerektiğini belirlemeye çalışırken size çok zaman kazandıracağından, alan verilerine sahip olmak çok önemlidir. Ancak, alan verilerinizin bulunmadığı bir konumda olabilirsiniz. Durumunuz bu şekildeyse biraz daha çaba ve farklı bir yaklaşım gerektirse de geliştirilebilecek etkileşimler bulmak yine de mümkündür.

Toplam Engelleme Süresi (TBT), yükleme sırasında sayfanın yanıt vermesini değerlendiren bir laboratuvar metriğidir ve INP ile iyi bir ilişki içindedir. Sayfanızın TBT değeri yüksekse sayfanız yüklenirken kullanıcı etkileşimlerine çok duyarlı olmayabilir.

Sayfanızın TBT'sini öğrenmek için Lighthouse'u kullanabilirsiniz. Bir sayfanın TBT değeri yüksekse sayfa yükleme sırasında ana iş parçacığının çok meşgul olma ihtimali vardır. Bu durum, sayfa yaşam döngüsündeki bu önemli dönemde bir sayfanın ne kadar duyarlı olduğunu etkileyebilir.

Sayfa yüklendikten sonra yavaş etkileşimleri bulmak için web sitenizin analizlerinde daha önce tanımlamış olabileceğiniz yaygın kullanıcı akışları gibi başka veri türlerine ihtiyacınız olabilir. Örneğin, bir e-ticaret web sitesinde çalışıyorsanız kullanıcıların online alışveriş sepetine ürün eklerken ve ödeme yaparken gerçekleştirdiği işlemler yaygın bir kullanıcı akışı olacaktır.

Alan verileriniz olsun veya olmasın, sonraki adım yavaş etkileşimleri manuel olarak test etmek ve yeniden oluşturmaktır. Çünkü yavaş etkileşimleri yalnızca yeniden oluşturabildiğinizde düzeltebilirsiniz.

Laboratuvarda yavaş etkileşimleri yeniden oluşturma

Manuel test aracılığıyla laboratuvarda yavaş etkileşimleri yeniden oluşturmanın birkaç yolu vardır ancak aşağıdaki çerçeveyi deneyebilirsiniz.

Geliştirici Araçları Performans paneli canlı metrikleri

DevTools performans profilleyicisi, yavaş olduğu bilinen etkileşimleri teşhis etmek için önerilen yaklaşımdır ancak hangi etkileşimlerin sorunlu olduğunu bilmiyorsanız yavaş etkileşimleri belirlemek zaman alabilir.

Ancak Performans panelini ilk açtığınızda canlı metrik görünümü görürsünüz. Bu özellik, daha ayrıntılı performans profilleyicisine geçmeden önce, sorunlu olanları bulmak için bir dizi etkileşimi hızlıca denemek amacıyla kullanılabilir. Etkileşimde bulunduğunuzda, etkileşimler günlüğünde teşhis verileri gösterilir (INP etkileşimi vurgulanır). Bu etkileşimler aşama dökümlerini alacak şekilde genişletilebilir:

Web Vitals uzantısı, yavaş etkileşimleri belirlemenize yardımcı olur ve INP'de hata ayıklamanıza yardımcı olacak bazı ayrıntılar sağlar. Bununla birlikte, yavaş etkileşimlerin nedenlerini bulmak için web sitenizin üretim kodunda gezinmek üzere ihtiyaç duyacağınız ayrıntılı verileri sağladığından yavaş etkileşimleri teşhis etmek için performans profilleyiciyi kullanmanız gerekebilir.

İz kaydetme

Yavaş etkileşimlerin teşhis edilmesi ve sorunlarının giderilmesi için önerilen araç Chrome'un performans profilleyicisidir. Chrome'un performans profilleyicisinde bir etkileşimin profilini oluşturmak için aşağıdaki adımları uygulayın:

1. Test etmek istediğiniz sayfa açık olmalıdır.
2. Chrome Geliştirici Araçları'nı açıp Performans paneline gidin.
3. İzlemeyi başlatmak için panelin sol üst tarafındaki Kayıt düğmesini tıklayın.
4. Sorun gidermek istediğiniz etkileşimleri gerçekleştirin.
5. İzlemeyi durdurmak için Kaydet düğmesini tekrar tıklayın.

Profil oluşturucu doldurulduğunda bakılacak ilk yer, profil oluşturucunun üst tarafındaki etkinlik özeti olmalıdır. Etkinlik özetinde, kayıtta uzun görevlerin gerçekleştiği üst kısımda kırmızı çubuklar gösterilir. Bu sayede sorunlu alanları hızlıca yakınlaştırabilirsiniz.

Etkinlik özetinde bir bölgeyi sürükleyip seçerek sorunlu alanlara hızlı bir şekilde odaklanabilirsiniz. Zaman çizelgesini daraltmanıza ve alakasız etkinliği yok saymanıza yardımcı olması için isteğe bağlı olarak profilleyicideki ekmek kırıntıları özelliğini kullanabilirsiniz.

Etkileşimin gerçekleştiği yere odaklandıktan sonra Etkileşimler kanalı, etkileşimi ve altındaki ana mesaj kanalı etkinliğini hizalamanıza yardımcı olur:

Fareyle etkileşimler kanalındaki etkileşimin üzerine gelerek etkileşimin en uzun hangi kısmında gerçekleştiği hakkında ek ayrıntılar edinebilirsiniz:

Etkileşimin çizgili kısmı, etkileşimin ne kadarının 200 milisaniyeyi aştığını gösterir. Bu değer, bir sayfanın INP'si için "iyi" eşiğinin üst sınırıdır. Etkileşimin listelenen bölümleri şunlardır:

1. Sol bıyıklı tarafından görselleştirilen giriş gecikmesi.
2. İşleme süresi: Sol ve sağ kenar çubukları arasındaki katı blokla görselleştirilir.
3. Sağ bıyıklı tarafından görselleştirilen sunu gecikmesi.

Ardından, yavaş etkileşime neden olan sorunları daha ayrıntılı incelemeniz gerekir. Bu konu bu kılavuzun ilerleyen bölümlerinde ele alınmaktadır.

Etkileşimin hangi kısmının yavaş olduğunu belirleme

Etkileşimler üç bölümden oluşur: giriş gecikmesi, işleme süresi ve sunum gecikmesi. Bir sayfanın INP değerini azaltmak için etkileşimi nasıl optimize edeceğiniz, etkileşimin hangi bölümünün en çok zaman aldığına bağlıdır.

Uzun giriş gecikmeleri nasıl tespit edilir?

Giriş gecikmeleri, etkileşim gecikmesinin yüksek olmasına neden olabilir. Giriş gecikmesi, etkileşimin ilk bölümüdür. Bu, kullanıcı işleminin işletim sistemi tarafından ilk kez alınmasından tarayıcının söz konusu etkileşimin ilk etkinlik işleyici geri çağırmasını işlemeye başlayabileceği ana kadar geçen süredir.

Chrome'un performans profilleyicisinde giriş gecikmeleri, etkileşimler kanalında etkileşim bulunarak tanımlanabilir. Sol bıyığın uzunluğu, etkileşimin giriş gecikmesinin bölümünü gösterir. Tam değer, performans profilleyicisinde fareyle etkileşimin üzerine gelerek gösterilen ipucuda bulunabilir.

Giriş gecikmeleri hiçbir zaman sıfır olamaz ancak giriş gecikmesinin ne kadar uzun olacağı üzerinde bir miktar kontrol sahibisiniz. Ana iş parçacığında, geri çağırma işlevlerinizin gerektiği kadar hızlı çalışmasını engelleyen bir çalışma olup olmadığını anlamak önemlidir.

Önceki şekilde, kullanıcı sayfayla etkileşime geçmeye çalışırken üçüncü taraf komut dosyasından bir görev çalışıyor ve bu nedenle giriş gecikmesi uzuyor. Uzatılmış giriş gecikmesi, etkileşimin gecikmesini etkiler ve bu nedenle sayfanın INP'sini etkileyebilir.

Uzun işlem sürelerini belirleme

Etkinlik geri çağırma işlemleri, giriş gecikmesinden hemen sonra çalışır ve tamamlanmaları için gereken süre, işleme süresi olarak bilinir. Etkinlik geri çağırmaları çok uzun süre çalışırsa tarayıcının bir sonraki kareyi sunmasını geciktirir ve etkileşimin toplam gecikmesine önemli ölçüde katkıda bulunabilir. Uzun işlem süreleri, hesaplama açısından pahalı birinci taraf veya üçüncü taraf JavaScript'in ve bazı durumlarda her ikisinin de sonucu olabilir. Performans profili oluşturucuda bu, etkileşim kanalındaki etkileşimin katı kısmıyla gösterilir.

Pahalı etkinlik geri çağırmalarını bulmak için belirli bir etkileşime ait izlemede aşağıdakileri gözlemleyebilirsiniz:

1. Etkinlik geri çağırmalarıyla ilişkili görevin uzun bir görev olup olmadığını belirleyin. Laboratuvar ortamındaki uzun görevleri daha güvenilir bir şekilde tespit etmek için performans panelinde CPU tarama özelliğini etkinleştirmeniz veya orta ve alt segment bir Android cihaz bağlayıp uzak hata ayıklama özelliğini kullanmanız gerekebilir.
2. Etkinlik geri çağırmalarını çalıştıran görev uzunsa çağrı yığınında, girişin sağ üst köşesinde kırmızı üçgen bulunan etkinlik işleyici girişlerini (ör. Etkinlik: tıklama gibi adlara sahip girişler) arayın.

Bir etkileşimin işleme süresini azaltmak için aşağıdaki stratejilerden birini deneyebilirsiniz:

1. Mümkün olduğunca az iş yapın. Pahalı bir etkinlik geri aramasında gerçekleşen her şey kesinlikle gerekli mi? Aksi takdirde, mümkünse bu kodu tamamen kaldırabilir veya kaldıramıyorsanız yürütmesini daha sonraya erteleyebilirsiniz. Ayrıca, çerçeve özelliklerinden de yararlanabilirsiniz. Örneğin, React'in not alma özelliği, süsleri değişmediğinde bileşen için gereksiz oluşturma işini atlayabilir.
2. Oluşturma dışındaki işlemleri, etkinlik geri çağırma işlevinde daha sonraya erteleyin. Uzun görevler, ana iş parçacığına verilerek bölünebilir. Ana iş parçacığına her yanıt verdiğinizde, mevcut görevin yürütülmesini sonlandırıp işin geri kalanını ayrı bir göreve bölüyorsunuz. Bu, oluşturma aracına, etkinlik geri çağırma işlevinde daha önce yapılan kullanıcı arayüzü güncellemelerini işleme fırsatı verir. React kullanıyorsanız geçişler özelliği bunu sizin için yapabilir.

Bu stratejiler, etkinlik geri çağırmalarının daha kısa sürede çalışacak şekilde optimize edilmesine yardımcı olabilir.

Sunuda gecikme olup olmadığını anlama

INP'nin düşük olmasının tek nedeni uzun giriş gecikmeleri ve işleme süreleri değildir. Bazen, küçük miktarlarda etkinlik geri çağırma koduna yanıt olarak gerçekleşen oluşturma güncellemeleri pahalı olabilir. Tarayıcının, bir etkileşimin sonucunu yansıtmak üzere kullanıcı arayüzündeki görsel güncellemeleri oluşturması için gereken süre sunum gecikmesi olarak bilinir.

Oluşturma işleri genellikle stil yeniden hesaplama, düzen, boyama ve kompozit gibi görevlerden oluşur ve profil oluşturucunun alev grafiğinde mor ve yeşil bloklarla temsil edilir. Toplam sunum gecikmesi, etkileşimler kanalındaki etkileşimin sağ anteniyle temsil edilir.

Yüksek etkileşim gecikmesinin olası tüm nedenlerinden biri olan sunum gecikmeleri, sorun giderme ve düzeltme açısından en zor olanı olabilir. Aşırı oluşturma işleminin nedeni aşağıdakilerden biri olabilir:

• Büyük DOM boyutları. Bir sayfanın sunumunu güncellemek için gereken oluşturma çalışması, genellikle sayfanın DOM boyutuyla birlikte artar. Daha fazla bilgi için Büyük DOM boyutlarının etkileşimi nasıl etkilediği ve bu konuda neler yapabileceğiniz başlıklı makaleyi okuyun.
• Zorunlu yeniden düzenlemeler. Bu durum, JavaScript'teki öğelere stil değişiklikleri uyguladıktan sonra bu çalışmanın sonuçlarını hemen sorguladığınızda ortaya çıkar. Sonuç olarak, tarayıcının güncellenmiş stilleri döndürülebilmesi için başka bir işlem yapmadan önce sayfa düzeni çalışmasını yapması gerekir. Zorunlu yeniden akışlardan kaçınma hakkında daha fazla bilgi ve ipucu için Büyük, karmaşık düzenlerden ve düzen karmaşasından kaçınma başlıklı makaleyi okuyun.
• requestAnimationFrame geri çağırmalarında aşırı veya gereksiz çalışma requestAnimationFrame() geri çağırma işlevleri, etkinlik döngüsünün oluşturma aşamasında çalıştırılır ve sonraki karenin sunulabilmesi için tamamlanması gerekir. Kullanıcı arayüzünde değişiklik gerektirmeyen işler için requestAnimationFrame() kullanıyorsanız sonraki kareyi geciktiriyor olabileceğinizi unutmayın.
• ResizeObserver geri aramaları. Bu tür geri çağırmalar oluşturmadan önce çalıştırılır ve içerdikleri işlemler pahalıysa sonraki karenin sunumunu geciktirebilir. Etkinlik geri çağırmalarında olduğu gibi, bir sonraki kare için gerekli olmayan mantığı erteleyin.

Yavaş bir etkileşimi yeniden oluşturamıyorsanız ne olur?

Alan verileriniz belirli bir etkileşimin yavaş olduğunu gösterdiği halde sorunu laboratuvarda el ile yeniden oluşturamıyorsanız ne olur? Bunun birkaç nedeni olabilir. Ancak en önemli neden, etkileşimleri test ederken bulunduğunuz koşulların donanımınıza ve ağ bağlantınıza bağlı olmasıdır. Hızlı bir bağlantıda hızlı bir cihaz kullanıyor olsanız da kullanıcılarınız da aynı bağlantıyı kullanmıyor olabilir. Bu durum sizin için geçerliyse şu üç seçenekten birini deneyebilirsiniz:

1. Fiziksel bir Android cihazınız varsa ana makinenizde bir Chrome Geliştirici Araçları örneği açmak için uzak hata ayıklama özelliğini kullanın ve yavaş etkileşimleri burada yeniden oluşturmayı deneyin. Mobil cihazlar genellikle dizüstü veya masaüstü bilgisayarlar kadar hızlı olmadığından, yavaş etkileşimler bu cihazlarda daha kolay gözlemlenebilir.
2. Fiziksel bir cihazınız yoksa Chrome Geliştirici Araçları'nda CPU kısıtlama özelliğini etkinleştirin.
3. Bir sayfayla etkileşime geçmeden önce sayfanın yüklenmesini bekleyebilirsiniz ancak kullanıcılarınız beklemeyebilir. Hızlı bir ağdaysanız ağ sınırlama özelliğini etkinleştirerek daha yavaş ağ koşullarını simüle edin, ardından boyandığı anda sayfayla etkileşimde bulunun. Ana iş parçacığı genellikle en yoğun zamanını başlatma sırasında yaşadığından ve bu dönemde yapılan testler kullanıcılarınızın neler yaşadığını ortaya çıkarabileceğinden bunu yapmanız gerekir.

INP ile ilgili sorunları giderme, yinelemeli bir süreçtir

INP'nin düşük olmasına neden olan yüksek etkileşim gecikmesine neyin yol açtığını bulmak çok fazla çalışma gerektirir. Ancak nedenleri belirleyebilirseniz yolun yarısındasınız demektir. Kötü INP sorununu gidermek için metodik bir yaklaşım uygulayarak soruna neyin sebep olduğunu güvenilir bir şekilde belirleyebilir ve doğru çözüme daha kısa sürede ulaşabilirsiniz. İnceleme yapmak için:

• Yavaş etkileşimleri bulmak için saha verilerini kullanın.
• Sorunlu alan etkileşimlerini, tekrarlanabilir olup olmadıklarını görmek için laboratuvarda manuel olarak test edin.
• Nedenin uzun giriş gecikmesi, pahalı etkinlik geri çağırmaları veya pahalı oluşturma çalışması olup olmadığını belirleyin.
• Tekrarla.

Bunlardan sonuncusu en önemlisidir. Sayfa performansını iyileştirmek için yaptığınız diğer çalışmaların çoğu gibi, INP ile ilgili sorunları gidermek ve INP'yi iyileştirmek de döngüsel bir süreçtir. Yavaş bir etkileşimi düzelttiğinizde bir sonrakine geçin ve sonuç almaya başlayana kadar bu işlemi tekrarlayın.