Web üzerindeki etkileşimler, onları yönlendirmek için tarayıcıda meydana gelen her türlü etkinlikle karmaşık şeylerdir. Yine de hepsinin ortak noktası, olay geri aramaları çalışmaya başlamadan önce bir miktar giriş gecikmesine maruz kalmalarıdır. Bu kılavuzda, giriş gecikmesinin ne olduğunu ve web sitenizin etkileşimlerinin daha hızlı çalışması için bunu en aza indirmek için neler yapabileceğinizi öğreneceksiniz.
giriş gecikmesi nedir? #
Giriş gecikmesi kullanıcının bir sayfayla ilk etkileşimde bulunduğu (bir ekrana dokunmak, fareyle tıklamak veya bir tuşa basmak gibi) ile etkileşim için olay geri aramalarının çalışmaya başladığı ana kadar geçen süredir. Her etkileşim bir miktar giriş gecikmesiyle başlar.
Giriş gecikmesinin bir kısmı kaçınılmazdır: işletim sisteminin bir giriş olayını tanıması ve tarayıcıya iletmesi her zaman biraz zaman alır. Bununla birlikte, giriş gecikmesinin bu kısmı genellikle fark edilmez bile ve sayfanın kendisinde meydana gelen ve giriş gecikmelerini sorunlara neden olacak kadar uzun hale getirebilecek başka şeyler de vardır.
Giriş gecikmesi hakkında nasıl düşünülür? #
Genel olarak, bir etkileşimin her bölümünü olabildiğince kısa tutmak istersiniz, böylece web siteniz, kullanıcının cihazından bağımsız olarak Etkileşim to Next Paint (INP) metriğinin “iyi” eşiğini karşılama şansına sahip olur. Giriş gecikmesini kontrol altında tutmak, bu eşiği karşılamanın yalnızca bir parçasıdır.
Giriş gecikmeleri için bir ödenek belirlemek amacıyla İlk Giriş Gecikmesi (FID) eşiklerine bakmak isteyebilirsiniz; ancak FID için “iyi” eşik, 100 milisaniye veya daha az. Bu eşiği geçerseniz, bütçenizin yarısını yalnızca giriş gecikmesine INP için ayırmış olursunuz. Bir etkileşimin olay geri aramalarını çalıştırması ve tarayıcının bir sonraki çerçeveyi boyaması için de zaman gerektirdiğini düşündüğünüzde bu tavsiye edilmez.
INP’nin “iyi” eşiğini karşılamak için mümkün olan en kısa giriş gecikmesini hedeflemek isteyeceksiniz, ancak bunu tamamen ortadan kaldırmayı beklememelisiniz, çünkü bu imkansızdır. Kullanıcılar sayfanızla etkileşime girmeye çalışırken aşırı ana iş parçacığı ç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 öte yandan, bir miktar giriş gecikmesi dır-dir kaçınılabilir. Uzun giriş gecikmeleriyle mücadele ediyorsanız, göz önünde bulundurmanız gereken bazı noktalar şunlardır.
Aşırı ana iş parçacığı çalışmasını başlatan yinelenen zamanlayıcılardan kaçının #
Giriş gecikmesine katkıda bulunabilecek, JavaScript’te yaygın olarak kullanılan iki zamanlayıcı işlevi vardır: setTimeout Ve setInterval. İkisi arasındaki fark şu ki setTimeout belirli bir süre sonra çalışacak bir geri arama planlar. setIntervalÖte yandan, her seferinde çalışacak bir geri arama planlar. N sürekli olarak veya zamanlayıcı ile durdurulana kadar milisaniye clearInterval.
setTimeout kendi başına sorunlu değildir – aslında, yardımcı olabilir uzun görevlerden kaçınmak. Ancak, bağlıdır Ne zaman zaman aşımı oluşur ve zaman aşımı geri araması çalıştığında kullanıcının sayfayla etkileşime girme girişiminde bulunup bulunmadığı.
Bunlara ek olarak, setTimeout bir döngüde veya yinelemeli olarak çalıştırılabilir, burada daha çok şu şekilde davranır: setInterval, ancak tercihen önceki yineleme tamamlanana kadar bir sonraki yinelemeyi programlamamak. Bu, döngünün her seferinde ana iş parçacığına yol açacağı anlamına gelirken setTimeout çağrıldığında, geri aramasının aşırı iş yapmamasına dikkat etmelisiniz.
setInterval belirli aralıklarla bir geri arama çalıştırır ve bu nedenle etkileşimlerin önüne geçme olasılığı çok daha yüksektir. Bunun nedeni, tek bir örneğin aksine setTimeout tek seferlik bir geri arama olan çağrı mayıs bir kullanıcı etkileşiminin önüne geçmek—setInterval‘nin yinelenen doğası, bunun olma olasılığını çok daha fazla artırıyor. irade etkileşimin önüne geçerek etkileşimin giriş gecikmesini arttırır.
setInterval Chrome DevTools’un performans panelinde gösterildiği gibi giriş gecikmesine katkıda bulunan çağrı. Eklenen giriş gecikmesi, etkileşim için olay geri aramalarının normalde çalışabileceklerinden daha geç çalışmasına neden olur.Zamanlayıcılar birinci taraf kodunda oluşuyorsa, bunlar üzerinde kontrol sahibi olursunuz. Onlara ihtiyacınız olup olmadığını değerlendirin veya içlerindeki işi mümkün olduğunca azaltmak için elinizden gelenin en iyisini yapın. Ancak, üçüncü taraf komut dosyalarındaki zamanlayıcılar farklı bir hikaye. Genellikle bir üçüncü taraf komut dosyasının ne yaptığı üzerinde kontrolünüz olmaz ve üçüncü taraf kodundaki performans sorunlarını düzeltmek, genellikle belirli bir üçüncü taraf komut dosyasının gerekli olup olmadığını belirlemek için paydaşlarla birlikte çalışmayı ve gerekliyse bir yetkiliyle iletişim kurmayı içerir. Web sitenizde neden olabilecekleri performans sorunlarını düzeltmek için neler yapılabileceğini belirlemek için üçüncü taraf komut dosyası satıcısı.
Uzun görevlerden kaçının #
Uzun giriş gecikmelerini azaltmanın bir yolu, uzun görevlerden kaçınmaktır. Etkileşimler sırasında ana iş parçacığını bloke eden aşırı ana iş parçacığı işiniz olduğunda, bu, uzun görevlerin bitme şansı bulamadan onlar için girdi gecikmesine katkıda bulunacaktır.
Bir görevde yaptığınız iş miktarını en aza indirmenin yanı sıra – ve yapmalısınız Her zaman ana iş parçacığında mümkün olduğunca az iş yapmaya çalışın; uzun görevleri bölerek kullanıcı girişine yanıt verme hızını artırabilirsiniz.
Etkileşim çakışmasına dikkat edin #
INP’yi optimize etmenin özellikle zorlu bir kısmı, örtüşen etkileşimleriniz varsa olabilir. Etkileşim çakışması, bir öğeyle etkileşim kurduktan sonra, ilk etkileşimin bir sonraki kareyi oluşturma şansı bulamadan sayfayla başka bir etkileşim kurmanız anlamına gelir.
Etkileşim kaynakları, kullanıcıların kısa bir süre içinde birçok etkileşimde bulunması kadar basit olabilir. Bu, kullanıcılar çok kısa bir süre içinde birçok klavye etkileşiminin gerçekleşebileceği form alanlarına girdiklerinde ortaya çıkabilir. Önemli bir olay üzerinde çalışmak özellikle pahalıysa (örneğin, ağ isteklerinin bir arka uca yapıldığı yaygın otomatik tamamlama alanlarında olduğu gibi), birkaç seçeneğiniz vardır:
- Bir olay geri aramasının belirli bir süre içinde yürütülme sayısını sınırlamak için girişleri kaldırmayı düşünün.
- Kullanmak
AbortControllergideni iptal etmekfetchana iş parçacığının sıkışık işleme haline gelmemesi için isteklerfetchgeri aramalar. Not: birAbortControllerörneğininsignalözellik ayrıca kullanılabilir iptal olayları.
Çakışan etkileşimler nedeniyle artan giriş gecikmesinin bir başka kaynağı da pahalı animasyonlar olabilir. Özellikle, JavaScript’teki animasyonlar birçok kişiyi tetikleyebilir. requestAnimationFrame kullanıcı etkileşimlerinin önüne geçebilecek çağrılar. Bunu aşmak için, potansiyel olarak pahalı animasyon karelerini kuyruğa almaktan kaçınmak için mümkün olduğunda CSS animasyonlarını kullanın; ancak bunu yaparsanız, birleştirilmemiş animasyonlardan kaçının böylece animasyonlar ana iş parçacığında değil, esas olarak GPU ve birleştirici iş parçacıklarında çalışır.
Çözüm #
Girdi gecikmeleri, etkileşimlerinizin çalışması için gereken sürenin çoğunu temsil etmese de, bir etkileşimin her bölümünün azaltabileceğiniz bir süreyi kapladığını anlamak önemlidir. Uzun giriş gecikmesi gözlemliyorsanız, bunu azaltmak için fırsatlarınız var demektir. Yinelenen zamanlayıcı geri aramalarından kaçınmak, uzun görevleri bölmek ve olası etkileşim çakışmalarının farkında olmak, giriş gecikmesini azaltmanıza yardımcı olarak web sitenizin kullanıcıları için daha hızlı etkileşim sağlar.
Gönderen kahraman resmi Unsplashile Erik McLean.