Manuel testler aracılığıyla yavaş etkileşimlerin nedenlerini yeniden oluşturmak ve belirlemek için alan verilerinizi laboratuvara nasıl alacağınızı öğrenin.
Sonraki Boyamayla Etkileşimi (INP) optimize etmenin zor bir kısmı, INP'nin düşük olmasına neyin neden olduğunu bulmaktır. Bunun çok çeşitli olası nedenleri vardı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 daha fazlası.
Zayıf INP'yi düzeltmenin yollarını bulmak zor olabilir. Başlamak için, bir sayfanın INP'sinden hangi etkileşimlerin sorumlu olma eğiliminde olduğunu bilmeniz gerekir. Web sitenizdeki hangi etkileşimlerin gerçek bir kullanıcı bakış açısından en yavaş olduğunu bilmiyorsanız, önce Alandaki yavaş etkileşimleri bulma başlıklı makaleyi okuyun. Size yol gösterecek alan verilerine sahip olduğunuzda, bu etkileşimlerin neden yavaş olduğunu anlamak için laboratuvar araçlarında bu belirli etkileşimleri manuel olarak test edebilirsiniz.
Alan verileriniz yoksa ne olur?
Hangi etkileşimlerin optimize edilmesi gerektiğini anlamaya çalışırken size epey zaman kazandırdığından, alan verilerine sahip olmak son derece önemlidir. Ancak alan verilerinizin olmadığı bir durumda olabilirsiniz. Durumunuz bu şekilde tanımlanırsa, 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 çok iyi ilişkilidir. Sayfanızın TBT'sinin yüksek olması, sayfanın ilk sayfa yükleme sırasındaki kullanıcı etkileşimlerine çok duyarlı olmayabileceğine dair önemli bir işarettir.
Sayfanızın TBT'sini öğrenmek için Lighthouse veya PageSpeed Insights'ı kullanabilirsiniz. Bir sayfanın TBT'si "iyi" eşiğini karşılamıyorsa ana iş parçacığının sayfa yükleme sırasında çok meşgul olma olasılığı yüksektir. Bu durum, sayfa yaşam döngüsündeki söz konusu önemli dönemde etkileşimlerin ne kadar hızlı gerçekleştiğini etkileyebilir.
Sayfa yüklendikten sonra yavaş etkileşimleri bulmak için diğer veri türlerini (web sitenizin analizlerinde zaten tanımlamış olabileceğiniz yaygın kullanıcı akışları gibi) kullanmanız gerekebilir. Örneğin, bir e-ticaret web sitesinde çalışıyorsanız kullanıcıların çevrimiçi bir alışveriş sepetine ürün eklerken ve ardından ödeme sürecini tamamlarken gerçekleştirdiği 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. Zira bu, yavaş etkileşimi yalnızca kesin olarak tespit edebildiğinizde düzeltilebilir.
Laboratuvardaki yavaş etkileşimleri yeniden oluşturma
Laboratuvardaki yavaş etkileşimleri manuel testlerle yeniden oluşturmanın birkaç yolu vardır ancak aşağıda, bilişsel çabayı en aza indirirken yavaş etkileşimleri laboratuvar ortamında yeniden üretmek için kullanabileceğiniz bir çerçeve bulunmaktadır.
Performans profili aracına hemen ulaşmayın
Chrome'un performans profil aracı hakkında zaten bilginiz varsa, bu aracın sayfa performansı sorunlarını giderirken tonlarca faydalı teşhis bilgisi sağladığını biliyorsunuzdur. Pek çok avantajı olan kullanışlı bir araç.
Ancak bu yöntemin dezavantajı, Chrome'un performans profil aracının sayfayla etkileşimde bulunurken canlı görüntüleme sağlamamasıdır. Kullanımı çok zaman alır ve ilk olarak etkileşimleri manuel olarak test etmenin daha etkili yolları vardır. Burada amaç, yavaş etkileşimleri yeniden oluşturmak için minimum miktarda zaman ve çaba harcamaktır. Yavaş bir etkileşim kesin olarak belirlendikten sonra, ardından bunun arkasındaki nedenleri derinlemesine incelemek için performans profil aracını kullanmanız gerekir.
Web Verileri Chrome Uzantısı'nı kullanma
Web Verileri Chrome Uzantısı, etkileşim gecikmesini manuel olarak test etmek için en düşük çaba miktarını gösterir. Uzantı yüklendikten sonra, önce aşağıdakileri yapmanız şartıyla, DevTools konsolunda etkileşim verilerini görüntüler:
- Chrome'da adres çubuğunun sağındaki uzantılar simgesini tıklayın.
- Açılır menüde Web Verileri uzantısını bulun.
- Uzantının ayarlarını açmak için sağdaki simgeyi tıklayın.
- Seçenekler'i tıklayın.
- Açılan ekranda Konsol günlük kaydı onay kutusunu etkinleştirin ve Kaydet'i tıklayın.
Bu işlem tamamlandıktan sonra, Chrome Geliştirici Araçları'nda konsolu açın ve web sitenizdeki şüpheli etkileşimleri test etmeye başlayın. Siz sayfayla etkileşime girdikçe konsolda yararlı teşhis verileri görüntülenir.
JavaScript snippet'i kullanma
Web Verileri uzantısı, ne kadar faydalı olsa da herkes için uygun bir seçenek olmayabilir. Tarayıcı uzantıları, cihaz güvenliği politikaları nedeniyle bazı ortamlarda engellenebilir. Uzantılar mobil cihazlara da yüklenemez. İkincisi, uzaktan hata ayıklama ile Android destekli fiziksel bir cihazda manuel olarak test yapmak istiyorsanız sorunludur.
Web Verileri uzantısını kullanmaya alternatif bir yöntem de bazı JavaScript'lerin kopyalanıp Geliştirici Araçları konsoluna yapıştırılmasını içerir. Aşağıdaki kod, her etkileşim için Web Verileri uzantısıyla aynı konsol çıkışını sağlar:
let worstInp = 0;
const observer = new PerformanceObserver((list, obs, options) => {
for (let entry of list.getEntries()) {
if (!entry.interactionId) continue;
entry.renderTime = entry.startTime + entry.duration;
worstInp = Math.max(entry.duration, worstInp);
console.log('[Interaction]', entry.duration, `type: ${entry.name} interactionCount: ${performance.interactionCount}, worstInp: ${worstInp}`, entry, options);
}
});
observer.observe({
type: 'event',
durationThreshold: 0, // 16 minimum by spec
buffered: true
});
Bir etkileşimin güvenilir şekilde yavaş olduğunu belirledikten sonra, yavaş olduğu neden hakkında ayrıntılı bilgi edinmek için performans profil aracında etkileşimin profilini çıkarabilirsiniz.
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 ve performans sorunlarının giderilmesinde sık karşılaşılan bir zorluk yaşanır.
İlk olarak, test sırasındaki koşullarınız kullandığınız donanıma ve ağ bağlantısına bağlıdır. Sonuçta, hızlı bir bağlantıya sahip hızlı bir cihaz kullanıyor olabilirsiniz. Ancak bu, kullanıcılarınızın çok şanslı olduğu anlamına gelmez. Sizin durumunuzda bu durum geçerliyse şu üç seçenekten birini tercih edebilirsiniz:
- Android destekli fiziksel bir 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 tür durumlarda yavaş etkileşimler kolay görülebilir.
- Fiziksel bir cihazınız yoksa Chrome Geliştirici Araçları'ndan CPU kısıtlama özelliğini etkinleştirin.
- 1. ve 2. adımları birlikte deneyin. Android destekli fiziksel bir cihaz için DevTools örneğinden CPU kısıtlamayı da etkinleştirebilirsiniz.
Bir diğer neden ise bir sayfayla etkileşimde bulunmadan önce yüklenmesini beklemenize rağmen kullanıcılarınızın yüklenmemesi olabilir. Hızlı bir ağdaysanız ağ daraltmayı etkinleştirerek daha yavaş ağ koşullarını simüle edin ve ardından sayfa boyanır yüklenmez etkileşimde bulunun. Ana iş parçacığı başlatma sırasında genellikle en yoğun olduğu ve o zamandaki test kullanıcılarınızın neler yaşadığını ortaya çıkarabileceği için bunu yapmanız gerekir.
İz kaydedin
Bir etkileşimin neden yavaş olduğu hakkında daha fazla bilgi edinmek için bir sonraki adım Chrome Geliştirici Araçları'ndaki performans profil aracını kullanmaktır. Chrome'un performans profil aracında bir etkileşimin profilini çıkarmak için aşağıdakileri yapın:
- Test etmek için ihtiyaç duyduğunuz sayfayı açık tutun.
- Chrome Geliştirici Araçları'nı açın ve Performans paneline gidin.
- İzlemeyi başlatmak için panelin sol üst tarafındaki Kaydet düğmesini tıklayın.
- Profil oluşturmak istediğiniz etkileşimleri gerçekleştirin.
- İ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. Etkileşimin gerçekleştiği yere odaklandıktan sonra, Etkileşimler kanalı, etkileşimi ve altındaki ana iş parçacığı kanalında gerçekleşen etkinliği sıralamanıza yardımcı olur:
Burada önemli olan, etkileşimin yavaş olmasına neden olan sorunu derinlemesine araştırmaktır. Yüksek etkileşim gecikmesine katkıda bulunabilecek pek çok şey vardır. Bunlardan bazıları, bu kılavuzda daha ayrıntılı bir şekilde ele alınmıştır.
İzlemeye alternatif olarak Lighthouse zaman aralıklarını kullanma
Chrome'un performans profil aracı tanılama bilgileri açısından zengin olsa da, bu araçla çalışmaya başlamamış kişiler biraz göz korkutabilir. Performans profil aracının bir alternatifi, Lighthouse'un zaman aralığı modudur. Bu modu kullanmak için aşağıdakileri yapın:
- Geliştirici Araçları açıkken Geliştirici Araçları'nda Lighthouse sekmesine gidin.
- Mod etiketli bölümden Zaman aralığı seçeneğini belirleyin.
- Cihaz etiketli bölümün altında Masaüstü veya Mobil cihaz türünü seçin.
- Kategoriler etiketinin altında en azından Performans etiketli onay kutusunun seçildiğinden emin olun.
- Zaman aralığını başlat düğmesini tıklayın.
- Verilerini almak istediğiniz sayfadaki etkileşimleri test edin.
- Zaman aralığını sonlandır düğmesini tıklayın ve denetimin görünmesini bekleyin
- Lighthouse sekmesinde denetim doldurulduktan sonra, Alakalı denetimleri göster ifadesinin yanındaki etiketin yanındaki INP bağlantısını tıklayarak denetimleri INP'ye göre filtreleyebilirsiniz.
Bu noktada, başarısız olan veya geçmiş denetimler için bir açılır liste görünmelidir. Söz konusu açılır menüyü genişlettiğinizde, etkileşim sırasında harcanan sürenin dökümü olmalıdır.
Uzun giriş gecikmelerini tanımlama
Yüksek etkileşim gecikmesine neden olabilecek faktörlerden biri giriş gecikmesidir. Giriş gecikmesi bir etkileşimin ilk aşamasıdır. Bu, kullanıcı işleminin işletim sistemi tarafından ilk kez alındığı andan tarayıcının bu giriş tarafından tetiklenen ilk etkinliği işlemeye başlayabileceği noktaya kadar geçen süredir. Giriş gecikmesi, etkileşimin geri çağırması başladığı anda sona erer.
Chrome'un performans profil aracındaki giriş gecikmelerinin tanımlanması, etkileşimler kanalındaki bir etkileşimin başlangıcını bularak ve ardından bu etkileşim için etkinlik geri çağırmalarının çalışmaya başlama zamanını bularak yapılabilir.
İşletim sisteminin giriş etkinliğini tarayıcıya aktarması biraz zaman aldığından bir miktar giriş gecikmesi olması her zaman beklenir. Ancak giriş gecikmesinin uzunluğu sizin kontrolünüzdedir. Önemli olan, ana iş parçacığında geri çağırmalarınızın çalışmasını engelleyen bir çalışma olup olmadığını belirlemektir.
Önceki şekilde, kullanıcı sayfayla etkileşim kurmaya çalışırken üçüncü taraf komut dosyasından bir görev çalışmaktadır ve bu nedenle giriş gecikmesini uzatır. Uzatılmış giriş gecikmesi, etkileşimin gecikmesini etkiler ve bu nedenle sayfanın INP'sini etkileyebilir.
Pahalı etkinlik geri çağırmaları nasıl belirlenir?
Etkinlik geri çağırmaları, giriş gecikmesinden hemen sonra çalışır. Bir etkinlik geri çağırma işlemi çok uzun süre çalışırsa tarayıcının bir sonraki kareyi sunmasını geciktirir ve etkileşimin toplam gecikmesine önemli ölçüde eklenebilir. Uzun süreli etkinlik geri çağırmaları, hesaplama açısından pahalı olan birinci taraf veya üçüncü taraf JavaScript'in (ve bazı durumlarda her ikisinin) sonucu olabilir.
Belirli bir etkileşim için bir izde aşağıdakiler gözlemlenerek pahalı etkinlik geri çağırmalarını bulabilirsiniz:
- 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 bir şekilde ortaya çıkarmak için performans panelinde CPU kısıtlamasını etkinleştirmeniz veya düşük ve orta düzey Android destekli bir cihazı bağlayıp uzaktan hata ayıklama'yı kullanmanız gerekebilir.
- 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. Event: click gibi adlara sahip girişler) arayın. Bunlar, pahalı etkinlik geri çağırma işlemleridir.
Pahalı etkinlik geri çağırmalarıyla başa çıkmak için aşağıdaki stratejilerden birini deneyin:
- Olabildiğince az iş yapın. Pahalı bir etkinlik geri çağırma
işleminde yapılan her şey kesinlikle gerekli midir? Mümkünse bu kodu toplu olarak 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
PureComponentsınıfı ve notlama özelliği, bir bileşen için sahne ve durum değişmediğinde gereksiz oluşturma işini atlayabilir. - 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ığında her getiriyi sağladığınızda, mevcut görevin yürütülmesini sonlandırmış ve işin geri kalanını ayrı bir göreve bölmüş olursunuz. Bu, oluşturucuya etkinlik geri çağırma işleminin önceki kısımlarında gerçekleştirilen kullanıcı arayüzü güncellemelerini işleme fırsatı verir. React kullanıyorsanız geçiş özelliği sizin için bu işlemi yapabilir.
Bu stratejileri uygulayarak etkinlik geri çağırmalarınızı kullanıcı girişine daha hızlı yanıt verdikleri bir yerde toplayabilirsiniz.
Sunum gecikmelerini belirleme
Zayıf INP'nin olası tek nedeni uzun giriş gecikmeleri ve pahalı etkinlik geri çağırmaları 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 amacıyla kullanıcı arayüzünde görsel güncellemeleri oluşturması için gereken süre sunu gecikmesi olarak bilinir.
Yüksek etkileşim gecikmesinin olası tüm nedenleri arasında, oluşturma işinin giderilmesi ve düzeltilmesi en zor sorun olabilir ancak sonuç, gösterilen çabaya değer. 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şi, 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 ne yapabileceğiniz başlıklı makaleyi okuyun.
- Zorunlu yeniden akışlar. Bu, JavaScript'teki öğelere stil değişiklikleri uygulayıp ardından bu çalışmanın sonuçlarını sorguladığınızda gerçekleşir. Sonuç olarak, tarayıcı güncellenen stilleri döndürebilmesi için başka herhangi bir şey yapmadan önce düzen işlemini gerçekleştirmesi gerekir. Zorunlu yeniden düzenlemenin önüne geçme hakkında 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.
requestAnimationFramegeri ç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 içermeyen işler yapmak içinrequestAnimationFrame()kullanıyorsanız bir sonraki karede gecikme yaşayabileceğinizi unutmayın.ResizeObservergeri 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 herhangi bir mantığı erteleyin.
INP ile ilgili sorunları giderme yinelemeli bir süreçtir
Düşük INP'ye yol açan yüksek etkileşim gecikmesine neyin neden olduğunu bulmak çok fazla çaba gerektirir, ancak nedenleri belirleyebilirseniz işin yarısını halledebilirsiniz. Zayıf INP sorunlarını gidermeye yönelik yöntemli bir yaklaşım izleyerek, soruna yol açan nedeni güvenilir bir şekilde tespit edebilir ve doğru çözüme 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ı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ı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 iş 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çları görmeye başlayana kadar tekrarlayın. Tedbirli olun!