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

Manuel testler yoluyla yavaş etkileşimlerin yeniden üretilmesi ve nedenleri belirlenmesi için alan verilerinizi laboratuvara nasıl taşıyacağınızı öğrenin.

Jeremy Wagner

Sonraki Boyamayla Etkileşimi (INP) optimize etmenin zor bir kısmı, düşük INP'ye neyin neden olduğunu bulmaktır. Ana iş parçacığında birçok görev planlayan üçüncü taraf komut dosyaları, büyük DOM boyutları, pahalı etkinlik geri çağırmaları ve diğer nedenler gibi pek çok olası neden olabilir.

INP'yi iyileştirmek zor olabilir. Başlamak için, bir sayfanın INP'sinden genellikle hangi etkileşimlerin sorumlu olduğunu bilmeniz gerekir. Gerçek bir kullanıcı açısından bakıldığında web sitenizdeki hangi etkileşimlerin en yavaş olduğunu bilmiyorsanız Alandaki yavaş etkileşimleri bulma başlıklı makaleyi okuyun. Size yol gösterecek alan verilerini elde ettikten sonra bu etkileşimlerin neden yavaş olduğunu anlamak için bu etkileşimleri laboratuvar araçlarında manuel olarak test edebilirsiniz.

Alan verileriniz yoksa ne olur?

Saha verilerine sahip olmak çok önemlidir çünkü hangi etkileşimlerin optimize edilmesi gerektiğini belirlemeye çalışırken size epey zaman kazandırır. Ancak, alan verilerinizin olmadığı bir konumda olabilirsiniz. Durumunuzu bu şekilde tanımlarsanız düzeltilecek etkileşimler bulabilirsiniz ancak bunu yapmak biraz daha fazla çaba ve farklı bir yaklaşım gerektirir.

Toplam Engelleme Süresi (TBT), yükleme sırasında sayfa duyarlılığını değerlendiren bir laboratuvar metriğidir ve INP ile iyi bir ilişki içindedir. Sayfanızın TBT'sinin yüksek olması, sayfa yüklenirken sayfanızın kullanıcı etkileşimlerine çok duyarlı olmayabileceğine dair potansiyel bir sinyaldir.

Sayfanızın TBT'sini belirlemek için Lighthouse'tan birini 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ı olacağını etkileyebilir.

Sayfa yüklendikten sonra yavaş etkileşimleri bulmak için, web sitenizin analizlerinde önceden belirlemiş 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 olsa da olmasa da bir sonraki adım, yavaş etkileşimleri manuel olarak test etmek ve yeniden oluşturmaktır. Çünkü bunu ancak yavaş bir etkileşimi yeniden oluşturabiliyorsanız düzeltebilirsiniz.

Laboratuvarda yavaş etkileşimleri yeniden oluşturma

Laboratuvarda yavaş etkileşimleri manuel testlerle yeniden oluşturmanın çeşitli yolları vardır ancak deneyebileceğiniz çerçeveler aşağıda verilmiştir.

İz kaydetme

Chrome'un performans profil aracı, yavaş etkileşimlerin teşhisi ve sorunlarını gidermek için önerilen araçtır. Chrome'un performans profil aracında bir etkileşimin profilini belirlemek için şu adımları izleyin:

1. Test etmek istediğiniz sayfayı açık tutun.
2. Chrome Geliştirici Araçları'nı açıp Performans paneline gidin.
3. İzlemeye başlamak için panelin sol üst köşesindeki Kaydet 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 özetinin üst kısmında, kayıttaki uzun görevlerin yer aldığı kırmızı çubuklar gösteriliyor. Bu, sorunlu alanları hızlı bir şekilde yakınlaştırmanızı sağlar.

Etkinlik özetinde bir bölgeyi sürükleyip seçerek sorunlu alanlara hızlı bir şekilde odaklanabilirsiniz. Zaman çizelgesini daraltmanıza ve alakasız etkinlikleri yoksaymanıza yardımcı olması için isteğe bağlı olarak profil oluşturucudaki içerik haritaları özelliğini kullanabilirsiniz.

Etkileşimin gerçekleştiği yere odaklandıktan sonra Etkileşimler kanalı, etkileşimi ve altındaki ana ileti dizisinde gerçekleşen etkinliği sıralamanıza yardımcı olur:

Etkileşimler kanalındaki yinelemenin üzerine gelerek etkileşimin en uzun kısmını içeren ek ayrıntılara ulaşabilirsiniz:

Etkileşimin çizgili kısmı, etkileşim süresinin 200 milisaniyeyi ne kadar aştığını gösterir. Bu, "iyi"nin üst sınırıdır. için bir INP eşiği olmalıdır. Listelenen etkileşim bölümleri şunlardır:

1. Sol bıyık tarafından görselleştirilmiş giriş gecikmesi.
2. İşleme süresi: Sol ve sağ bıyıkların arasındaki düz blok tarafından görselleştirilir.
3. Sağ bıyık tarafından görselleştirilmiş sunum gecikmesi.

Burada önemli olan, yavaş etkileşime neden olan sorunları ayrıntılı olarak incelemektir. Bu konuyu kılavuzun ilerleyen bölümlerinde ele alacağız.

Web Verileri Chrome Uzantısı

Performans profili oluşturucu, 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. Dikkate alınması gereken yaklaşımlardan biri, Web Verileri Chrome uzantısını kullanmaktır. Bu uzantı, performans profili oluşturucuya geçmeden önce sorunlu olanları bulmak amacıyla bir dizi etkileşimi hızlı bir şekilde denemek için kullanılabilir.

Web Vitals uzantısı yüklendikten sonra, aşağıdaki adımları uygularsanız Dev Tools Console'da etkileşim verileri gösterilir:

1. Chrome'da adres çubuğunun sağındaki uzantılar simgesini tıklayın.
2. Açılır menüden Web Vitals uzantısını bulun.
3. Uzantının ayarlarını açmak için sağdaki simgeyi tıklayın.
4. Seçenekler'i tıklayın.
5. Açılan ekranda Konsol günlük kaydı onay kutusunu işaretleyip Kaydet'i tıklayın.

Bu adımları uyguladıktan sonra, Chrome Geliştirici Araçları'nda konsolu açın ve bir sayfada şüpheli etkileşimleri test etmeye başlayın. Etkileşim sırasında teşhis verileri konsolda gösterilir:

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

Etkileşimin hangi bölümü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ş gecikmelerini belirleme

Giriş gecikmeleri, yüksek etkileşim gecikmesine 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 bu etkileşimin ilk etkinlik işleyici geri çağırmasını işlemeye başlayabileceği ana kadar geçen süredir.

Etkileşimler kanalındaki etkileşimi bularak Chrome'un performans profil aracındaki giriş gecikmelerini belirleyebilirsiniz. Sol bıyık uzunluğu, etkileşimin giriş gecikmesinin bir kısmını gösterir. Kesin değer, performans profil aracındaki etkileşimin üzerine gelerek ipucunda bulunabilir.

Giriş gecikmeleri hiçbir zaman sıfır olamaz ancak giriş gecikmesinin ne kadar uzun olacağını kontrol edebilirsiniz. Buradaki püf noktası, ana iş parçacığında geri aramalarınızın gerektiği gibi çalışmasını engelleyen bir çalışma olup olmadığını tespit etmektir.

Önceki şekilde, kullanıcı sayfayla etkileşim kurmaya çalışırken üçüncü taraf komut dosyasından gelen bir görev çalışmaktadır ve bu nedenle giriş gecikmesi uzatılır. Uzatılmış giriş gecikmesi, etkileşimin gecikmesini etkiler ve bu nedenle sayfanın INP'sini etkileyebilir.

Uzun işleme 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şleme süreleri, işlem yükü açısından pahalı birinci taraf veya üçüncü taraf JavaScript'ten (ve bazı durumlarda her ikisinde birden) kaynaklanabilir. Performans profili oluşturucuda bu, etkileşim kanalındaki etkileşimin katı kısmıyla gösterilir.

Pahalı etkinlik geri çağırmaları bulmak için belirli bir etkileşim izde aşağıdaki öğeler gözlemlenebilir:

1. Etkinlik geri çağırmalarıyla ilişkili görevin uzun bir görev olup olmadığını belirleyin. Laboratuvar ortamında uzun görevleri daha güvenilir şekilde ortaya çıkarmak için performans panelinde CPU kısıtlamayı etkinleştirmeniz veya düşük seviye ile orta seviye bir Android cihaz bağlayıp uzaktan hata ayıklama kullanmanız gerekebilir.
2. Etkinlik geri çağırmalarının çalıştırıldığı görev uzun bir görevse çağrı yığınında, girişin sağ üst köşesinde kırmızı bir üç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 kısaltmak için aşağıdaki stratejilerden birini deneyebilirsiniz:

1. Mümkün olduğunca az iş yapın. Pahalı bir etkinlik geri çağırmasında olan her şey kesinlikle gerekli mi? Aksi takdirde, mümkünse bu kodu tamamen kaldırmayı veya mümkün değilse kodun yürütülmesini daha sonraya erteleyebilirsiniz. Dilerseniz ç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. Etkinlik geri çağrısındaki oluşturma dışı çalışmaları daha sonraki bir zamana erteleyin. Uzun görevler, ana iş parçacığına getiri sağlayarak 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. Böylece oluşturucuya, etkinlik geri çağırmasının öncesinde gerçekleştirilen kullanıcı arayüzü güncellemelerini işleme fırsatı verilir. React özelliğini kullanıyorsanız geçişler özelliği bunu sizin için yapabilir.

Bu stratejiler, etkinliklerin daha az zaman almasını sağlayacak şekilde etkinlik geri çağırmalarını optimize etmenize yardımcı olabilir.

Sunum gecikmelerini belirleme

Düşük INP'nin tek nedeni uzun giriş gecikmeleri ve işleme süreleri değildir. Bazen küçük miktarda etkinlik geri çağırma koduna yanıt olarak bile 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 çalışmaları 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şim kanalındaki etkileşimin sağ bıyığı ile temsil edilir.

Yüksek etkileşim gecikmesinin tüm olası nedenleri arasında, sunum gecikmeleri, sorun giderme ve düzeltmenin en zor kısmı olabilir. Aşırı sayıda oluşturma işi aşağıdakilerden herhangi birinden kaynaklanabilir:

• Büyük DOM boyutları. Bir sayfanın sunumunu güncellemek için gereken oluşturma işi genellikle sayfanın DOM'sinin boyutuyla birlikte artar. Daha fazla bilgi için Büyük DOM boyutlarının etkileşim üzerindeki etkisi ve bununla ilgili neler yapabileceğiniz başlıklı makaleyi okuyun.
• Zorunlu yeniden akışlar. Bu durum, JavaScript'teki öğelere stil değişiklikleri uygulayıp, ardından bu çalışmanın sonuçlarını hemen sorguladığınızda meydana gelir. Sonuç olarak tarayıcının, güncellenen stilleri döndürebilmesi için düzen çalışmalarını başka bir şey yapmadan önce gerçekleştirmesi gerekir. Zorunlu yeniden akıştan kaçınmayla ilgili daha fazla bilgi ve ipuçları için Büyük, karmaşık düzenlerden ve düzen baskılarından kaçınma başlıklı makaleyi inceleyin.
• requestAnimationFrame geri aramalarında aşırı veya gereksiz iş. requestAnimationFrame() geri çağırmaları, etkinlik döngüsünün oluşturma aşamasında çalıştırılır ve sonraki karenin sunulabilmesi için tamamlanmaları 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şturma işleminden önce çalışır ve içlerindeki iş pahalıysa sonraki karenin sunulmasını geciktirebilir. Etkinlik geri çağırmalarında olduğu gibi, bir sonraki kare için gerekli olmayan mantığı erteleyin.

Yavaş bir etkileşimi yeniden oluşturamazsanı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? Bu durumun birkaç nedeni olabilir.

Birincisi, test etkileşimleri sırasındaki koşullarınız donanımınıza ve ağ bağlantınıza bağlıdır. Hızlı bir bağlantıyla hızlı bir cihaz kullanıyor olabilirsiniz, ancak bu, kullanıcılarınızın hızlı bağlantı kurduğu anlamına gelmez. Bu durum sizin için geçerliyse aşağıdaki üç yöntemden birini deneyebilirsiniz:

1. Fiziksel bir Android cihazınız varsa ana makinenizde bir Chrome Geliştirici Araçları örneği açmak için uzaktan hata ayıklama özelliğini kullanın ve yavaş etkileşimleri bu örnekte yeniden oluşturmaya çalışın. Mobil cihazlar genellikle dizüstü veya masaüstü bilgisayarlar kadar hızlı değildir. Bu nedenle, bu cihazlarda yavaş etkileşimler daha kolay görülebilir.
2. Fiziksel bir cihazınız yoksa Chrome Geliştirici Araçları'nda CPU kısıtlama özelliğini etkinleştirin.

Bunun bir diğer nedeni de etkileşimde bulunmadan önce bir sayfanın yüklenmesini bekliyor olmanız, ancak kullanıcılarınızın yüklenmemesi olabilir. 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 başlatma sırasında en yoğun olduğu için bunu yapmanız gerekir ve bu süre boyunca yapılan testler kullanıcılarınızın neler yaşadığını ortaya koyabilir.

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

Düşük INP'ye yol açan yüksek etkileşim gecikmesinin nedenini bulmak için çok fazla uğraş gerekir. Ancak nedenleri belirleyebilirseniz yolun yarısına ulaşmışsınızdır. 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 hızlı ulaşabilirsiniz. İncelemek için:

• Yavaş etkileşimleri bulmak için alan verilerinden yararlanın.
• Sorunlu alan etkileşimlerini, tekrarlanabilir olup olmadıklarını görmek için laboratuvarda manuel olarak test edin.
• Bunun nedeninin uzun giriş gecikmesi, pahalı etkinlik geri çağırmaları mı yoksa pahalı oluşturma çalışmalarından mı kaynaklandığını belirleyin.
• Tekrarla.

Bunlardan sonuncusu en önemlisidir. Sayfa performansını iyileştirmek için yaptığınız diğer çoğu çalışma gibi INP ile ilgili sorunları giderme ve iyileştirme de döngüsel bir süreçtir. Yavaş bir etkileşimi düzelttiğinizde, sonrakine geçin ve sonuçları görene kadar işlemi tekrarlayın.