Giriş gecikmesini optimize edin

Giriş gecikmesinin ne olduğunu ve daha hızlı etkileşim için bu süreyi azaltma tekniklerini öğrenin.

Jeremy Wagner

Web'deki etkileşimler karmaşık şeylerdir ve bunları yönlendirmek için tarayıcıda her türlü etkinlik gerçekleşir. Ancak hepsinin ortak noktası, etkinlik geri çağırmaları başlamadan önce bir miktar giriş gecikmesi yaşanmasıdır. Bu kılavuzda, giriş gecikmesinin ne olduğunu ve web sitenizdeki etkileşimlerin daha hızlı çalışması için bunu en aza indirmek amacıyla neler yapabileceğinizi öğreneceksiniz.

Giriş gecikmesi nedir?

Giriş gecikmesi, kullanıcının bir sayfayla ilk kez etkileşimde bulunmasından (ekrana dokunma, fare ile tıklama veya bir tuşa basma) ilgili etkinlik geri çağırmalarının çalışmaya başlamasına kadar geçen süredir. Her etkileşim bir miktar giriş gecikmesiyle başlar.

Giriş gecikmesinin basitleştirilmiş bir görselleştirmesi. Sol tarafta, arkasında bir etkileşimin başladığını gösteren yıldız patlamasıyla fare imlecinin çizimi bulunuyor. Sağda ise etkileşimin etkinlik işleyicilerin çalışmaya başladığı zamanı gösteren bir dişli çarkın çizgi çizimi bulunuyor. Aradaki boşluk, süslü ayraç ile giriş gecikmesi olarak belirtilir.
Giriş gecikmesinin arkasındaki mekanizma. İşletim sistemi tarafından bir giriş alındığında, etkileşim başlamadan önce tarayıcıya iletilmelidir. Bu, belirli bir zaman alır ve mevcut ana iş parçacığı çalışması tarafından artırılabilir.

Giriş gecikmesinin bir kısmı kaçınılmazdır: İşletim sisteminin bir giriş etkinliğini tanıması ve tarayıcıya iletmesi her zaman biraz zaman alır. Bununla birlikte, giriş gecikmesinin bu kısmı çoğu zaman fark edilmez ve sayfanın kendisinde gerçekleşen başka şeyler de sorunlara yol açacak kadar uzun süre girişlerde gecikmelere neden olabilir.

Giriş gecikmesi nasıl düşünülmeli?

Genel anlamda, web sitenizin Sonraki Boyamayla Etkileşim (INP) metriğinin "iyi" metriğini karşılama şansının en üst düzeye çıkarılması için etkileşimin her bölümünü mümkün olduğunca kısa tutmak istersiniz. eşik değeri, kullanıcının cihazından bağımsız olarak. Giriş gecikmesini kontrol altında tutmak, bu eşiği karşılamanın yalnızca bir parçasıdır.

Sonuç olarak, INP’nin “iyi” koşulunu karşılamak için mümkün olan en kısa giriş gecikmesini hedeflemelisiniz eşikler. Ancak, giriş gecikmelerini tamamen ortadan kaldırmayı beklememelisiniz. Kullanıcılar sayfanızla etkileşim kurmaya çalışırken ana iş parçacığının aşırı çalışmasından kaçındığınız sürece, giriş gecikmeniz sorunları önleyecek kadar düşük olmalıdır.

Giriş gecikmesi nasıl en aza indirilir?

Daha önce de belirtildiği gibi, bir miktar giriş gecikmesi kaçınılmazdır ancak diğer yandan, bir miktar giriş gecikmesi önlenebilir. Uzun giriş gecikmeleri konusunda sorun yaşıyorsanız şunları göz önünde bulundurun:

Ana iş parçacığının aşırı miktarda çalışmasını başlatan yinelenen zamanlayıcılardan kaçının

JavaScript'te, giriş gecikmesine katkıda bulunabilen yaygın olarak kullanılan iki kronometre işlevi vardır: setTimeout ve setInterval. İkisi arasındaki fark, setTimeout özelliğinin belirli bir süreden sonra çalıştırılacak bir geri çağırma programlamasıdır. Diğer yandan setInterval, n milisaniyede bir sürekli olarak veya zamanlayıcı clearInterval ile durdurulana kadar çalışacak bir geri çağırma planlar.

setTimeout kendi başına sorunlu değildir. Hatta, uzun görevlerden kaçınmaya yardımcı olabilir. Ancak bu, zaman aşımının ne zaman gerçekleştiğine ve zaman aşımı geri çağırması yapıldığında kullanıcının sayfayla etkileşimde bulunmayı deneyip denemediğine bağlıdır.

Buna ek olarak, setTimeout daha çok setInterval işlevinde olduğu bir döngüde veya yinelemeli olarak çalıştırılabilir. Ancak tercihen bir sonraki yinelemenin, öncekinin tamamlanmasına kadar planlanmaması tercih edilir. Bu durumda, setTimeout her çağrıldığında döngü ana iş parçacığına bırakılacaktır ancak geri çağırmanın aşırı iş yapmaya neden olmamasına dikkat etmeniz gerekir.

setInterval, bir aralıkta geri arama çalıştırır ve bu nedenle etkileşimleri engelleme olasılığı çok daha yüksektir. Bunun nedeni, kullanıcı etkileşimini engellemesi olabilecek tek seferlik bir geri arama olan setTimeout çağrısının tek bir örneğinden farklı olarak, setInterval'ın tekrar eden yapısı, etkileşimi engelleme olasılığını artırarak etkileşimin giriş gecikmesini artırmasıdır.

Chrome Geliştirici Araçları'ndaki performans profili oluşturucunun giriş gecikmesini gösteren ekran görüntüsü. Zamanlayıcı işlevi tarafından tetiklenen bir görev, kullanıcının tıklama etkileşimini başlatmadan hemen önce gerçekleşir. Bununla birlikte, zamanlayıcı giriş gecikmesini uzatarak etkileşimin etkinlik geri çağırmalarının normalde olduğundan daha geç çalışmasına neden olur.
Chrome Geliştirici Araçları'nın performans panelinde gösterildiği gibi, önceki bir setInterval çağrısı tarafından kaydedilen ve giriş gecikmesine katkıda bulunan bir zamanlayıcı. Eklenen giriş gecikmesi, etkileşim için etkinlik geri çağırmalarının normalden daha geç çalıştırılmasına neden olur.

Zamanlayıcılar birinci taraf kodunda gerçekleşiyorsa bunların kontrolü sizdedir. Bunlara ihtiyaç duyup duymadığınızı değerlendirin veya bu araçlardaki yükü mümkün olduğunca azaltmak için elinizden geleni yapın. Ancak üçüncü taraf komut dosyalarındaki zamanlayıcılar farklı bir hikayedir. Genellikle üçüncü taraf komut dosyalarının ne yapacağını kontrol edemezsiniz ve üçüncü taraf kodlarındaki performans sorunlarının düzeltilmesi için genellikle belirli bir üçüncü taraf komut dosyasının gerekli olup olmadığını belirlemek üzere paydaşlarla birlikte çalışmak gerekir. Bu durumda, web sitenizde neden olabileceği performans sorunlarını düzeltmek için neler yapılabileceğini belirlemek üzere üçüncü taraf bir komut dosyası tedarikçi firmasıyla iletişime geçin.

Uzun görevlerden kaçınma

Uzun giriş gecikmelerini azaltmanın bir yolu da uzun görevlerden kaçınmaktır. Etkileşimler sırasında ana iş parçacığını engelleyen çok fazla ana iş parçacığı çalışması olduğunda, bu durum uzun görevler tamamlanmadan önce ana iş parçacığı için giriş gecikmesini artırır.

Görevlerin giriş gecikmesini ne kadar uzattığına dair görsel bir görsel. Üst kısımda, tek uzun görev çalıştırıldıktan kısa bir süre sonra bir etkileşim gerçekleşir. Bu da, etkinlik geri çağırmalarının olması gerekenden çok daha geç çalıştırılmasına neden olan önemli bir giriş gecikmesine neden olur. Özetle, etkileşim hemen hemen aynı anda gerçekleşir. Ancak uzun görev, verim alarak daha küçük görevlere bölünür. Böylece etkileşimin etkinlik geri çağırmaları daha erken gerçekleşir.
Görevler çok uzun olduğunda ve tarayıcının etkileşimlere yeterince hızlı yanıt veremediğinde ya da daha uzun görevlerin küçük görevlere bölündüğünde etkileşimlere ne olduğunu gösteren bir görsel.

Bir görevde yaptığınız iş miktarını en aza indirmenin (ve daima ana ileti dizisi üzerinde mümkün olduğunca az iş yapmaya çalışmalısınız) uzun görevleri parçalara ayırarak kullanıcı girişine verilen yanıt verme düzeyini artırabilirsiniz.

Etkileşim çakışmasına dikkat edin

Çakışan etkileşimlerinizin olması, INP'yi optimize etmenin özellikle zor bir yanı olabilir. Etkileşim çakışması, bir öğeyle etkileşimde bulunduktan sonra, ilk etkileşim sonraki kareyi oluşturma fırsatı bulmadan önce sayfayla başka bir etkileşim yaptığınız anlamına gelir.

Görevlerin ne zaman uzun giriş gecikmelerine yol açacak şekilde çakışabileceğinin tasviri. Bu örnekte, tıklama etkileşimi, tuş aşağı tıklama etkileşimi için giriş gecikmesini artırmak üzere bir tuş aşağı etkileşimi ile çakışır.
Chrome'un Geliştirici Araçları'ndaki performans profil oluşturucuda iki eşzamanlı etkileşimin görselleştirmesi. İlk tıklama etkileşimindeki oluşturma işlemi, sonraki klavye etkileşimi için giriş gecikmesine neden olur.

Etkileşim çakışması kaynakları, kullanıcıların kısa bir süre içinde çok sayıda etkileşimde bulunması kadar basit olabilir. Bu hata, kullanıcılar form alanlarına yazarken çok kısa bir süre içinde birçok klavye etkileşimi gerçekleştirdiğinde ortaya çıkabilir. Önemli bir etkinlik üzerinde yapılan çalışma özellikle pahalıysa (ör. arka uca ağ isteklerinin yapıldığı otomatik tamamlama alanlarında ortaya çıkan yaygın durum) birkaç seçeneğiniz vardır:

  • Bir etkinlik geri çağırmasının belirli bir süre içinde yürütülme miktarını sınırlandırmak için girişlerin artık geri çağırmasını yapabilirsiniz.
  • Ana iş parçacığının, fetch geri çağırmalarının işlenmesinde sıkışık olmaması için giden fetch isteklerini iptal etmek üzere AbortController komutunu kullanın. Not: Bir AbortController örneğinin signal özelliği etkinlikleri iptal etmek için de kullanılabilir.

Çakışan etkileşimler nedeniyle artan giriş gecikmesinin bir başka kaynağı da pahalı animasyonlar olabilir. Özellikle JavaScript'teki animasyonlar birçok requestAnimationFrame çağrısı tetikleyebilir ve bu da kullanıcı etkileşimlerini engelleyebilir. Bu sorunu aşmak için mümkün olduğunda CSS animasyonlarını kullanarak pahalı olabilecek animasyon karelerini sıraya alın. Ancak bunu yaparsanız animasyonların ana iş parçacığında değil, çoğunlukla GPU ve birleştirici iş parçacıklarında çalışması için birleştirilmemiş animasyonlardan kaçının.

Sonuç

Giriş gecikmeleri, etkileşimlerinizin tamamlanması için gereken sürenin çoğunu temsil etmese de etkileşimin her bölümünün, azaltabileceğiniz bir süreyi gerektireceğini bilmeniz önemlidir. Uzun giriş gecikmesini gözlemliyorsanız süreyi azaltabilirsiniz. Yinelenen zamanlayıcı geri çağırmalarından kaçınmak, uzun görevleri bölmek ve olası etkileşim çakışmasının farkında olmak, giriş gecikmesini azaltmanıza yardımcı olarak web sitenizin kullanıcılarının etkileşimini hızlandırmayı sağlar.

Erik Mclean'in hazırladığı Unsplash'teki hero resim.