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
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 veriniz olmayabilir. 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 olasılığı vardır. Bu durum, sayfa yaşam döngüsünün bu kritik anında 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ışı olabilir.

Alan verileriniz olsun veya olmasın, bir 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.

Yavaş etkileşimleri laboratuvarda 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 kez 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 almak için genişletilebilir:

Etkileşimlerin günlükleri, Performans panelinin gerçek zamanlı metrikler ekranında nasıl görünür?
Performans panelinin canlı metrikler ekranı.

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.

Profilleyici doldurulduğunda ilk bakılması gereken yer, profilleyicinin üst kısmındaki etkinlik özetidir. 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.

Chrome Geliştirici Araçları'nın performans panelinin üst kısmında görünen etkinlik özeti. Gösterilen etkinlik çoğunlukla JavaScript'ten gelir ve uzun bir göreve neden olur. Bu görev, alev grafiğinin üzerinde kırmızıyla vurgulanır.
Chrome'un performans profilleyicisinin üst kısmındaki etkinlik özeti. Uzun görevler, etkinlik alev grafiğinin üzerinde kırmızıyla vurgulanır. Bu durumda, uzun görevdeki çalışmaların büyük kısmı önemli komut dosyası çalışmalarıyla ilgiliydi.

Etkinlik özetinde bir bölgeyi sürükleyip seçerek sorunlu alanlara hızlıca 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:

Chrome Geliştirici Araçları'nın performans panelinde görselleştirilen bir etkileşim. Ana mesaj dizisi kanalının üzerindeki etkileşim kanalı, bir etkileşimin süresini gösterir. Bu süre, altındaki ana mesaj dizisi etkinliğiyle hizalanabilir.
Chrome'un Geliştirici Araçları'ndaki performans profilleyicisinde profil oluşturulan bir etkileşim. Etkileşim sayısı kanalı, bir tıklama etkileşimine karşılık gelen bir dizi etkinlik gösterir. Etkileşimler izleme girişleri, etkileşimi artırmaktan sorumlu görevlere yayılır.

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:

Chrome Geliştirici Araçları'nın performans panelinde gösterilen bir etkileşim için fareyle üzerine gelmeyle açılan ipucu. İpucu, etkileşimde ne kadar sürenin harcandığını ve etkileşimin giriş gecikmesi, işleme süresi ve sunum gecikmesi dahil olmak üzere hangi kısımda harcandığını gösterir.
Fareyle performans panelinin etkileşimler izindeki bir etkileşimin üzerine geldiğinizde görünen ipucu. İpucu, etkileşimin her bir bölümünde ne kadar süre harcandığını gösterir.

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ı çubukla görselleştirilen giriş gecikmesi.
  2. İşleme süresi: Sol ve sağ kenar çubukları arasındaki katı blokla gösterilir.
  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'sini düşürmek için etkileşimi nasıl optimize edeceğiniz, en çok zaman alan bölümüne 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 kısmıdır. Bu, kullanıcı işleminin işletim sistemi tarafından ilk kez alındığı andan tarayıcının bu etkileşimin ilk etkinlik işleyici geri çağırma işlevini işlemeye başlayabildiği noktaya 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.

Chrome'un performans panelinde gösterilen giriş gecikmesi. Üçüncü taraf komut dosyasından tetiklenen bir zamanlayıcı nedeniyle artan giriş gecikmesi nedeniyle etkileşimin başlangıcı, etkinlik geri çağırmalarından önemli ölçüde önce gerçekleşir.
Bir üçüncü taraf komut dosyasından zamanlayıcı tarafından tetiklenen bir görev nedeniyle giriş gecikmesi. Etkileşimler kanalında gösterilen etkileşimdeki kıl çizgisinin sol kısmı, giriş gecikmesini görselleştirir.

Ö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şlevleri, giriş gecikmesinden hemen sonra çalışır ve tamamlanmaları için geçen süre işleme süresi olarak bilinir. Etkinlik geri çağırma işlevleri çok uzun süre çalıştırılırsa tarayıcının bir sonraki kareyi sunması gecikir ve etkileşimin toplam gecikmesi önemli ölçüde artabilir. 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 profilleyicide bu, etkileşimler kanalındaki etkileşimin katı kısmıyla gösterilir.

Chrome'un performans panelindeki etkinlik geri çağırma görevlerini gösteren resim. Zaman çizelgesinde etkileşimin üzerine geldiğinizde gösterilen ipucu, uzun bir işlem süresi olduğunu gösterir.
Chrome Geliştirici Araçları'ndaki performans profilleyicisinde gösterildiği gibi, bir tıklama etkileşimine yanıt olarak çalışan etkinlik geri çağırma işlevleri. İşleme süresinin uzun olduğuna dikkat edin.

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 sınıfa kadar 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 hafıza önbelleğe alma özelliği, bileşenin özellikleri değişmediğinde bileşen için gereksiz oluşturma işlemini 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 verdiğinizde, geçerli görevin yürütülmesini sonlandırır ve çalışmanın geri kalanını ayrı bir göreve bölersiniz. 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 için kullanıcı arayüzünde görsel güncellemeler oluşturmasının sürdüğü süre sunum gecikmesi olarak bilinir.

Chrome Geliştirici Araçları'nın performans panelinde görselleştirilen oluşturma işlemi. Oluşturma işlemi, bir sonraki kareyi boyamak için etkinlik geri çağırma işleminden sonra gerçekleşir.
Chrome'un performans profilleyicisinde gösterildiği gibi oluşturma görevleri. Sağ bıyıklı çubuk, sunum gecikmelerinin uzunluğunu görselleştirir.

Oluşturma işlemi genellikle stil yeniden hesaplama, düzen, boya ve kompozisyon gibi görevlerden oluşur ve profilleyicinin 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 inceleyin.
  • 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 içermeyen işlemler yapmak için requestAnimationFrame() kullanıyorsanız sonraki kareyi geciktirdiğinizi unutmayın.
  • ResizeObserver geri çağırma işlevleri. 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 tüm mantığı erteleyin.

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

Saha verileriniz belirli bir etkileşimin yavaş olduğunu gösteriyorsa ancak sorunu laboratuvarda manuel olarak 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 cihazda hızlı bir bağlantı kullanıyor olsanız da kullanıcılarınız da aynı bağlantıyı kullanıyor olmayabilir. 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 cihazınız yoksa Chrome Geliştirici Araçları'nda CPU tarama ö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ğ kullanıyorsanız ağ sınırlamayı etkinleştirerek daha yavaş ağ koşullarını simüle edin ve ardından sayfa boyandıktan hemen sonra sayfayla etkileşime geçin. 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. Düşük INP sorunlarını giderirken sistematik bir yaklaşım izleyerek soruna neyin neden olduğunu güvenilir bir şekilde belirleyebilir ve doğru çözüme daha hızlı ulaşabilirsiniz. İncelemek için:

  • Yavaş etkileşimleri bulmak için saha verilerini kullanın.
  • Sorunlu alan etkileşimlerinin yeniden oluşturulup oluşturulamayacağı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 en önemlisi sonuncusudur. 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.