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ür 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 sitenizin etkileşimlerinin daha hızlı gerçekleşmesi için gecikmeyi en aza indirmek üzere neler yapabileceğinizi öğreneceksiniz.

Giriş gecikmesi nedir?

Giriş gecikmesi, kullanıcının bir sayfayla ilk kez etkileşime geçtiği andan (ör. ekrana dokunma, fareyle tıklama veya bir tuşa basma) etkileşimle ilgili etkinlik geri çağırmalarının çalışmaya başladığı ana kadar geçen süredir. Her etkileşim bir miktar giriş gecikmesiyle başlar.

Giriş gecikmesinin basitleştirilmiş görselleştirmesi. Sol tarafta, arkasında bir etkileşimin başladığını gösteren yıldız patlamasıyla fare imlecinin çizimi yer alıyor. Sağ tarafta, bir etkileşimin etkinlik işleyicilerinin ne zaman çalışmaya başladığını gösteren bir dişli çarkı çizgi resmi yer alır. Aradaki boşluk, girilen gecikme olarak gösterilir.
Giriş gecikmesinin mekanizması. İşletim sistemi tarafından alınan girişler, etkileşim başlamadan önce tarayıcıya aktarılmalıdır. Bu işlem belirli bir süre alır ve mevcut ana iş parçacığı çalışmasıyla uzatı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. Ancak giriş gecikmesinin bu kısmı genellikle fark edilmez. Ayrıca sayfanın kendisinde, giriş gecikmesini soruna yol açacak kadar uzun hale getirebilecek başka şeyler de vardır.

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

Genel olarak konuşacak olursak, web sitenizin, kullanıcının cihazından bağımsız olarak Sonraki Boyamayla Etkileşim (INP) metriğinin "iyi" eşiğine ulaşma ş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. Giriş gecikmesini kontrol altında tutmak, bu eşiği karşılamanın yalnızca bir parçasıdır.

Bu nedenle, INP'nin "iyi" eşiğini karşılamak için mümkün olan en kısa giriş gecikmesini hedeflemeniz gerekir. Ancak giriş gecikmelerini tamamen ortadan kaldıramayacağınızı unutmayın. Kullanıcılar sayfanızla etkileşime geçmeye çalışırken aşırı ana iş parçacığı çalışmasından kaçındığınız sürece giriş gecikmeniz, sorunları önlemek için yeterince düşük olmalıdır.

Giriş gecikmesi nasıl en aza indirilir?

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

Aşırı ana iş parçacığı çalışması başlatan yinelenen zamanlayıcılardan kaçının

JavaScript'te giriş gecikmesine katkıda bulunabilecek, yaygın olarak kullanılan iki zamanlayıcı 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. Öte yandan setInterval, geri çağırma işlevini n milisaniyede bir veya zamanlayıcı clearInterval ile durdurulana kadar sürekli olarak çalışacak şekilde planlar.

setTimeout, kendi başına sorunlu değildir. Hatta uzun görevlerden kaçınmanıza yardımcı olabilir. Ancak bu durum, zaman aşımının ne zaman gerçekleştiğine ve zaman aşımı geri çağırma işlevi çalıştırıldığında kullanıcının sayfayla etkileşim kurmaya çalışıp çalışmadığına bağlıdır.

Ayrıca setTimeout, döngü içinde veya yinelemeli olarak çalıştırılabilir. Bu durumda, önceki iterasyon tamamlanana kadar sonraki iterasyonun planlanmaması tercih edilirse de setTimeout daha çok setInterval gibi davranır. Bu, döngünün setTimeout her çağrıldığında ana iş parçacığına vereceği anlamına gelir. Ancak geri çağırma işlevinin aşırı çalışma yapmadığından emin olmanız 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 profilleyicinin, giriş gecikmesini gösteren ekran görüntüsü. Bir zamanlayıcı işlevi tarafından tetiklenen görev, kullanıcı tıklama etkileşimini başlatmadan hemen önce gerçekleşir. Ancak zamanlayıcı, giriş gecikmesini uzatarak etkileşimin etkinlik geri çağırmalarının normalden daha geç çalışmasına neden olur.
Chrome DevTools'un 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. Bu sayfalara ihtiyacınız olup olmadığını değerlendirin veya bu sayfalardaki çalışmaları mümkün olduğunca azaltmak için elinizden geleni yapın. Ancak üçüncü taraf komut dosyalarındaki zamanlayıcılar farklı bir konudur. Üçüncü taraf komut dosyalarının işlevleri genellikle sizin kontrolünüzde değildir. Üçüncü taraf kodundaki performans sorunlarını düzeltmek için genellikle ilgili üçüncü taraf komut dosyasının gerekli olup olmadığını belirlemek üzere paydaşlarla birlikte çalışmanız ve gerekliyse web sitenizde neden olabilecek performans sorunlarını düzeltmek için neler yapılabileceğini belirlemek üzere üçüncü taraf komut dosyası tedarikçisiyle iletişime geçmeniz gerekir.

Uzun görevlerden kaçınma

Uzun giriş gecikmelerini azaltmanın bir yolu, uzun görevlerden kaçınmaktır. Etkileşimler sırasında ana iş parçacığının çalışmasını engelleyen aşırı ana iş parçacığı çalışması varsa uzun görevler tamamlanmadan önce bu etkileşimler için giriş gecikmesi artar.

Görevlerin giriş gecikmesini ne kadar uzattığını gösteren bir görsel. Üstte, tek bir uzun görev çalıştıktan kısa bir süre sonra bir etkileşim gerçekleşiyor. Bu da, etkinlik geri çağırmalarının olması gerekenden çok daha geç çalışmasına neden olan önemli bir giriş gecikmesine yol açıyor. Alt kısımda, yaklaşık olarak aynı zamanda bir etkileşim gerçekleşir ancak uzun görev, yield verilerek birkaç küçük göreve bölünür. Bu sayede, etkileşimin etkinlik geri çağırmalarının çok daha erken çalışması sağlanır.
Görevler çok uzun olduğunda ve tarayıcı etkileşimlere yeterince hızlı yanıt veremediğinde etkileşimlere ne olduğunun, uzun görevlerin daha küçük görevlere bölündüğünde ise ne olduğunun görselleştirilmesi.

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ışmaları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 çakıştığından dolayı uzun giriş gecikmeleri yaşanabileceğini gösteren bir resim. Bu gösterimde, tıklama etkileşimi, keydown etkileşiminin giriş gecikmesini artırmak için keydown etkileşimiyle örtüşüyor.
Chrome'un Geliştirici Araçları'ndaki performans profilleyicisinde iki eşzamanlı etkileşimin görselleştirmesi. İlk tıklama etkileşimindeki oluşturma çalışması, sonraki klavye etkileşimi için giriş gecikmesine neden olur.

Etkileşim çakışmalarının kaynakları, kullanıcıların kısa süre içinde çok sayıda etkileşim yapması kadar basit olabilir. Bu durum, kullanıcılar çok kısa bir süre içinde çok sayıda klavye etkileşimi gerçekleştirebilecekleri form alanlarına yazarken ortaya çıkabilir. Bir önemli etkinlikle ilgili çalışma özellikle pahalıysa (ör. arka uca ağ isteklerinin gönderildiği yaygın otomatik tamamlama alanları durumunda) 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ğırma işlemlerini işlerken tıkanmaması için giden fetch isteklerini iptal etmek üzere AbortController kullanın. Not: Bir AbortController örneğinin signal özelliği etkinlikleri iptal etmek için de kullanılabilir.

Çakışan etkileşimler nedeniyle giriş gecikmesinin artmasına neden olan bir diğer faktör de 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 yayınlanmasının çoğu zamanını temsil etmese de bir etkileşimin her bölümünün azaltabileceğiniz bir süreyi kapsadığını anlamanız önemlidir. Giriş gecikmesinin uzun olduğunu gözlemliyorsanız bunu azaltma fırsatlarınız vardır. Yinelenen zamanlayıcı geri çağırmaları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ı olabilir. Bu da web sitenizin kullanıcıları için daha hızlı etkileşim sağlar.

Erik Mclean tarafından Unsplash'tan alınan lokomotif resim.