Giriş gecikmesini optimize edin

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

Jeremy Wagner

Web'deki etkileşimler karmaşıktır ve tarayıcıda etkileşimi sağlamak için her türlü etkinlik gerçekleşir. Ancak bunların hepsinin ortak noktası, etkinlik geri çağırmalarının çalışmaya başlamasından önce bazı giriş gecikmeleri yaşamalarıdır. Bu kılavuzda, giriş gecikmesinin ne olduğunu ve web sitenizin etkileşimlerinin daha hızlı gerçekleşmesi için bu 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, etkileşimin başlangıcını gösteren, arkasında yıldız patlaması olan bir fare imleci çizgi resmi vardır. 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 hakkında düşünme

Genel olarak, web sitenizin kullanıcının cihazından bağımsız olarak Interaction to Next Paint (INP) metriğinin "iyi" eşiğini aşma şansını artırmak için etkileşimin her bir 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ş gecikmesini en aza indirme

Daha önce de belirtildiği gibi, bazı giriş gecikmeleri kaçınılmazdır ancak diğer yandan bazı giriş gecikmeleri önlenebilir. Uzun giriş gecikmeleri yaşıyorsanız dikkate alabileceğiniz bazı unsurlar aşağıda açıklanmıştır.

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'ün belirli bir zamanda çalışacak şekilde geri çağırma planlaması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, belirli bir aralıklarla geri çağırma işlevi yürütür. Bu nedenle, etkileşimlerin önüne geçme olasılığı çok daha yüksektir. Bunun nedeni, kullanıcı etkileşimini engelleyebilecek tek seferlik bir geri çağırma olan tek bir setTimeout çağrı örneğinin aksine, setInterval'ın tekrar eden yapısının etkileşimin önüne geçme olasılığını çok daha yüksek hale getirmesidir. Bu da etkileşimin giriş gecikmesini artırı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ını sağlar.
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 üzerinde kontrol sahibi olursunuz. 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çı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ın çalışmasını engelleyen aşırı ana iş parçacığı çalışması olduğunda, uzun görevlerin tamamlanma şansı bulamadan bu işlemler için giriş gecikmesi artar.

Görevlerin giriş gecikmesini ne kadar uzattığına dair görselleştirme. Ü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 tarafta, etkileşim yaklaşık olarak aynı zamanda 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 çalışma miktarını en aza indirmenin yanı sıra (her zaman ana iş akışında mümkün olduğunca az çalışma yapmaya çalışmalısınız) uzun görevleri bölerek kullanıcı girişine olan yanıt vermeyi artırabilirsiniz.

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

INP'yi optimize etmenin özellikle zor bir kısmı, çakışık etkileşimleriniz olmasıdır. Etkileşim çakışma, bir öğeyle etkileşim kurduktan sonra ilk etkileşimin sonraki kareyi oluşturma şansı bulamadan sayfayla başka bir etkileşim kurmanı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ştirilmesi. İ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:

  • Belirli bir süre içinde bir etkinlik geri çağırma işlevinin kaç kez çalışacağını sınırlamak için girişleri debouncing 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: 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, çok sayıda requestAnimationFrame çağrısı tetikleyebilir ve bu da kullanıcı etkileşimlerinin önüne geçebilir. Bu sorunu önlemek için, pahalı olabilecek animasyon karelerinin sıraya eklenmesini önlemek amacıyla mümkün olduğunda CSS animasyonlarını kullanın. Ancak bunu yaparsanız animasyonların ana iş parçacığında değil, esas olarak GPU ve kompozitör iş parçalarında çalışacağından 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 bu sorunu azaltma fırsatları 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.