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

Manuel test yaparak yavaş etkileşimlerin nedenlerini yeniden oluşturmak ve belirlemek için alan verilerinizi laboratuvara nasıl alacağınızı öğrenin.

Jeremy Wagner

Sonraki Boyamayla Etkileşimi (INP) optimize etmenin zorlayıcı kısımlarından biri, INP'nin düşük olmasına neyin neden olduğunu bulmaktır. Bu durumun pek çok olası nedeni vardır. Ana iş parçacığında çok sayıda 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 vardır.

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

Alan verileriniz yoksa ne olur?

Hangi etkileşimlerin optimize edilmesi gerektiğini anlamaya çalışırken size çok fazla zaman kazandırdığından, alan verilerine sahip olmak son derece önemlidir. Bununla birlikte, alan verilerinizin olmadığı bir konumda olabilirsiniz. Bu durum durumunuzu açıklıyorsa, biraz daha fazla çaba ve farklı bir yaklaşım gerektirse de, iyileştirilebilecek etkileşimleri bulabilirsiniz.

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

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

Sayfa yüklendikten sonra gerçekleşen yavaş etkileşimleri bulmak için, web sitenizin analizlerinde daha önce tanımlamış olabileceğiniz genel 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 çevrimiçi alışveriş sepetine ürün eklerken ve ödeme yaparken gerçekleştirdikleri işlemler ortak bir kullanıcı işlemleri akışıdır.

Alan verileriniz olsun ya da olmasın, bir sonraki adım yavaş etkileşimleri manuel olarak test etmek ve yeniden oluşturmaktır. Yavaş bir etkileşimi yeniden oluşturabildiğiniz için bunu düzeltebilirsiniz.

Laboratuvardaki yavaş etkileşimleri yeniden oluşturma

Laboratuvardaki yavaş etkileşimleri manuel testlerle yeniden oluşturmanın birkaç yolu vardır ancak aşağıdaki adımları deneyebilirsiniz.

İz kaydedin

Yavaş etkileşimleri teşhis etmek ve gidermek için önerilen araç Chrome'un performans profil aracı'dır. Chrome'un performans profil aracındaki bir etkileşimin profilini belirlemek için şu adımları uygulayın:

1. Test etmek istediğiniz sayfayı açık tutun.
2. Chrome Geliştirici Araçları'nı açın ve Performans paneline gidin.
3. İzlemeyi başlatmak için panelin sol üst tarafındaki 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 kısmındaki etkinlik özeti olmalıdır. Etkinlik özeti, üst kısımda kayıtta uzun görevlerin gerçekleştiği kırmızı çubukları gösterir. Bu, sorunlu alanları hızlı bir şekilde yakınlaştırmanıza olanak tanır.

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şturucuda içerik haritası özelliğini kullanabilirsiniz.

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

Farenizi etkileşimler kanalında iterasyonun üzerine getirerek etkileşimin en uzun kısmıyla ilgili ek ayrıntılar öğrenebilirsiniz:

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

1. Giriş gecikmesi: Sol bıyıkla gösterilir.
2. İşleme süresi: Sol ve sağ bıyıklar arasındaki düz blokla görselleştirilir.
3. Sunum gecikmesi: Sağ bıyıkla gösterilir.

Burada, yavaş etkileşime neden olan sorunları derinlemesine araştırmanız gerekir. Bu konuyu bu kılavuzun ilerleyen bölümlerinde ele alacağız.

Web Verileri Chrome Uzantısı

Performans profil aracı, yavaş olduğu bilinen etkileşimleri teşhis etmek için önerilen yaklaşımdır. Ancak hangi etkileşimlerin sorunlu etkileşimleriniz olduğunu bilmediğinizde yavaş etkileşimleri belirlemek zaman alabilir. Dikkate alabileceğiniz yaklaşımlardan biri Web Verileri Chrome Uzantısı'nı kullanmaktır. Bu uzantı, performans profili aracına geçmeden önce sorunlu olanları bulmak üzere bir dizi etkileşimi hızlı bir şekilde denemek için kullanılabilir.

Web Verileri uzantısı yüklendikten sonra aşağıdaki adımları uygularsanız DevTools konsolunda etkileşim verileri görüntülenir:

1. Chrome'da adres çubuğunun sağındaki uzantılar simgesini tıklayın.
2. Açılır menüde Web Verileri 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 etkinleştirin ve Kaydet'i tıklayın.

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

Web Verileri 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 gezinmeniz gereken ayrıntılı verileri sağladığından yavaş etkileşimleri teşhis etmek için performans profil aracını kullanmanız gerekebilir.

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'sini düşürmek için etkileşimi nasıl optimize edeceğiniz, sayfanın hangi bölümünün en çok zaman aldığına bağlıdır.

Uzun giriş gecikmelerini tanımlama

Giriş gecikmeleri, yüksek etkileşim gecikmesine neden olabilir. Giriş gecikmesi, etkileşimin ilk parçasıdır. Bu, kullanıcı işleminin işletim sistemi tarafından ilk kez alındığı andan tarayıcının, söz konusu etkileşimin ilk etkinlik işleyici geri çağırma işlemini gerçekleştirmeye başladığı ana kadar geçen süredir.

Chrome'un performans profil aracındaki giriş gecikmelerini belirlemek için etkileşimler kanalında etkileşim bulunabilir. Sol bıyık uzunluğu, etkileşimin giriş gecikmesinin kısmını gösterir ve kesin değer, performans profil aracındaki etkileşimin üzerine gelinerek ipucunda bulunabilir.

Giriş gecikmeleri hiçbir zaman sıfır olamaz, ancak giriş gecikmesinin ne kadar süre olduğu konusunda bir miktar kontrole sahip olursunuz. Önemli olan, ana iş parçacığında geri aramalarınızın gerektiği gibi yapılmasını engelleyen bir çalışma olup olmadığını belirlemektir.

Önceki şekilde, kullanıcı sayfayla etkileşime geçmeye çalışırken üçüncü taraf komut dosyasından bir görev çalışmakta olup bu nedenle giriş gecikmesini uzatı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 bunların tamamlanması 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, hesaplama açısından pahalı olan birinci taraf veya üçüncü taraf JavaScript'ten (ve bazı durumlarda her ikisinden) kaynaklanabilir. Performans profil aracında bu, etkileşimler kanalındaki etkileşimin düz kısmıyla temsil edilir.

Belirli bir etkileşim için izde aşağıdakiler gözlemlenerek pahalı etkinlik geri çağırma işlemlerini bulabilirsiniz:

1. Etkinlik geri çağırmalarıyla ilişkili görevin uzun bir görev olup olmadığını belirleyin. Laboratuvar ayarındaki uzun görevleri daha güvenilir şekilde ortaya çıkarmak için performans panelinde CPU kısıtlamasını etkinleştirmeniz veya düşük ve orta seviye bir Android cihazı bağlayarak uzaktan hata ayıklama'yı kullanmanız gerekebilir.
2. Etkinlik geri çağırmalarını çalıştıran görev uzun bir görevse girişin sağ üst köşesinde kırmızı bir üçgenin bulunduğu çağrı yığınında 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. Olabildiğince az iş yapın. Pahalı bir etkinlik geri çağırma işleminde gerçekleşen her şey kesinlikle gerekli midir? Böyle bir durum söz konusu değilse mümkünse bu kodu tamamen kaldırmayı veya yapamıyorsanız daha sonraki bir zamana erteleyebilirsiniz. Yardımcı olması için çerçeve özelliklerinden de yararlanabilirsiniz. Örneğin, React'ın notlama özelliği, sahne donanımı değişmemiş bir bileşenin gereksiz oluşturma işlemini atlayabilir.
2. Etkinlik geri çağırmadaki oluşturulmayan işleri daha sonraki bir noktaya erteleyin. Uzun görevler, ana iş parçacığına dönülerek bölünebilir. Ana iş parçacığına her alıştığınızda, mevcut görevin yürütülmesini sonlandırmış ve çalışmanın geri kalanını ayrı bir göreve bölmüş olursunuz. Bu, oluşturucuya etkinlik geri çağırma işleminin öncesinde gerçekleştirilen kullanıcı arayüzü güncellemelerini işleme fırsatı verir. React'i kullanıyorsanız geçiş özelliği sizin için bu işlemi gerçekleştirebilir.

Bu stratejiler etkinlik geri çağırmalarını optimize etmenize yardımcı olabilir. Böylece, etkinlik geri çağırmaları daha az zaman harcanır.

Sunum gecikmelerini belirleme

INP'nin kötü 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ünde görsel güncellemeleri oluşturması için geçen süre sunu gecikmesi olarak bilinir.

Oluşturma işi çoğunlukla 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ında etkileşimin sağ bıyığıyla gösterilir.

Yüksek etkileşim gecikmesinin olası tüm nedenleri arasında, sunum gecikmelerinin giderilmesi ve düzeltilmesi en zor olan olabilir. Aşırı sayıda oluşturma çalışması, aşağıdakilerden herhangi biri nedeniyle olabilir:

• Büyük DOM boyutları. Bir sayfanın sunumunu güncellemek için gereken oluşturma işlemi, genellikle sayfanın DOM'sinin 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 akışlar. Bu durum, JavaScript'teki öğelere stil değişiklikleri uygulayıp ardından hemen bu çalışmanın sonuçlarını sorguladığınızda ortaya çıkar. Sonuç olarak, tarayıcının güncellenen stilleri döndürebilmesi için başka herhangi bir işlem yapmadan önce düzen çalışmasını gerçekleştirmesi gerekir. Zorunlu yeniden düzenlemeyi önlemeyle ilgili daha fazla bilgi ve ipucu için Büyük, karmaşık düzenler ve düzen karmaşasından kaçınma başlıklı makaleyi okuyun.
• requestAnimationFrame geri çağırmalarında aşırı veya gereksiz iş. requestAnimationFrame() geri çağırma, etkinlik döngüsünün oluşturma aşamasında çalıştırılır ve bir sonraki kare sunulmadan önce tamamlanmalıdır. Kullanıcı arayüzünde değişiklik yapmayan işler için requestAnimationFrame() kullanıyorsanız bir sonraki karede gecikme yaşayabileceğinizi göz önünde bulundurun.
• ResizeObserver geri arama. Bu tür geri çağırmalar, oluşturma işleminden önce çalışır ve içindeki iş pahalıysa sonraki karenin sunulmasını geciktirebilir. Etkinlik geri çağırma işlemlerinde olduğu gibi, sonraki kare için gerekli olmayan mantığı da erteleyin.

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

Alan verileriniz belirli bir etkileşimin yavaş olduğunu gösteriyorsa ancak laboratuvarda sorunu manuel olarak yeniden oluşturamıyorsanız ne olur? Bu durumun birkaç nedeni olabilir.

Birincisi, test 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ıya sahip hızlı bir cihaz kullanıyor olabilirsiniz ancak bu, kullanıcılarınızın hızlı olduğu anlamına gelmez. Bu sizin için geçerliyse şu üç seçenekten birini deneyebilirsiniz:

1. Fiziksel bir Android cihazınız varsa uzaktan hata ayıklama'yı kullanarak ana makinenizde bir Chrome DevTools örneği açın ve orada yavaş etkileşimleri 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 kolayca görülebilir.
2. Fiziksel bir cihazınız yoksa Chrome Geliştirici Araçları'ndan CPU kısıtlama özelliğini etkinleştirin.

Bunun bir diğer nedeni de bir sayfayla etkileşimde bulunmadan önce sayfanın yüklenmesini beklemenize rağmen kullanıcılarınızın yüklenmemesi olabilir. Hızlı bir ağdaysanız ağ sınırlamayı etkinleştirerek daha yavaş ağ koşullarını simüle edin ve ardından sayfa boyandığı anda etkileşimde bulunun. Ana iş parçacığı başlatma sırasında genellikle en yoğun olduğu ve bu süre zarfında yapılan test, kullanıcılarınızın neler yaşadığını ortaya çıkarabileceği için bunu yapmanız gerekir.

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

INP'nin düşük olmasına yol açan yüksek etkileşim gecikmesine neyin neden olduğunu bulmak için çok uğraşmak gerekir, ancak nedenleri belirleyebilirseniz işin yarısı olmuş demektir. Zayıf INP sorununu gidermek için yöntemli bir yaklaşım izleyerek, soruna yol açan nedeni güvenilir bir şekilde tespit edebilir ve doğru düzeltmeye daha hızlı bir şekilde ulaşabilirsiniz. İncelemek için:

• Yavaş etkileşimleri bulmak için alan verilerinden yararlanın.
• Sorunlu alan etkileşimlerinin yeniden oluşturulabilir olup olmadığını görmek için laboratuvarda manuel olarak test edin.
• Bu durumun uzun giriş gecikmesinden, pahalı etkinlik geri çağırma işlemlerinden veya yüksek oluşturma çalışmasından kaynaklanıp kaynaklanmadığını belirleyin.
• Tekrarla.

Bunlardan sonuncusu en önemli olanıdır. Sayfa performansını iyileştirmek için yaptığınız diğer birçok çalışma gibi, sorun giderme ve INP'yi iyileştirme de döngüsel bir süreçtir. Bir yavaş etkileşimi düzelttiğinizde bir sonrakine geçin ve sonuç almaya başlayana kadar tekrarlayın.