Giriş gecikmesini optimize edin

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

Jeremy Wagner

Web'deki etkileşimler karmaşıktır ve tarayıcıda bunları yönlendirmek için her türlü etkinlik gerçekleşir. Ancak hepsinin ortak noktası, etkinlik geri çağırmaları çalışmaya başlamadan önce bir miktar giriş gecikmesine neden olmalarıdır. Bu kılavuzda, giriş gecikmesinin ne olduğunu ve web sitenizin etkileşimlerinin daha hızlı çalışması için bu gecikmeyi en aza indirmek üzere neler yapabileceğinizi öğreneceksiniz.

Giriş gecikmesi nedir?

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

Giriş gecikmesinin basitleştirilmiş bir görselleştirmesi. Sol tarafta, arkasında yıldız patlaması olan bir fare imlecinin çizgi resmi, etkileşimin başlangıcını simgeliyor. Sağda, bir etkileşimin etkinlik işleyicilerinin ne zaman çalışmaya başladığını gösteren bir dişli çark çizimi yer alır. Aradaki boşluk, giriş gecikmesi olarak belirtilir ve küme paranteziyle gösterilir.
Giriş gecikmesinin arkasındaki mekanikler. İşletim sistemi bir giriş aldığında, etkileşim başlamadan önce bu girişin tarayıcıya iletilmesi gerekir. Bu işlem belirli bir süre alır ve mevcut ana iş parçacığı çalışmasıyla 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. Ancak giriş gecikmesinin bu kısmı genellikle fark edilmez bile. Sayfanın kendisinde gerçekleşen ve giriş gecikmelerini sorunlara neden olacak kadar uzatabilen başka şeyler de vardır.

Giriş gecikmesini nasıl değerlendirmelisiniz?

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 karşılama şansının en yüksek olması için etkileşimin her bölümünü mümkün olduğunca kısa tutmanız gerekir. 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ırmayı bekleyemeyeceğinizi unutmayın. Kullanıcılar sayfanızla etkileşim kurmaya çalışırken aşırı ana iş parçacığı çalışmasından kaçındığınız sürece giriş gecikmeniz sorunları önleyecek kadar düşük olacaktır.

Giriş gecikmesini en aza indirme

Daha önce de belirtildiği gibi, bazı giriş gecikmeleri kaçınılmazdır ancak bazı giriş gecikmeleri önlenebilir. Uzun giriş gecikmeleriyle ilgili sorun yaşıyorsanız dikkat etmeniz gereken bazı noktalar şunlardı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 en çok tercih edilen iki zamanlayıcı işlevi vardır: setTimeout ve setInterval. İkisi arasındaki fark, setTimeout yönteminin belirli bir süreden sonra çalıştırılacak bir geri çağırma planlamasıdır. setInterval ise her 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 süren 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ğı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, bir döngüde veya yinelemeli olarak çalıştırılabilir. Bu durumda, setInterval gibi davranır ancak tercihen bir önceki yineleme tamamlanana kadar bir sonraki yinelemeyi planlamaz. Bu, döngünün setTimeout her çağrıldığında ana iş parçacığına geçeceği anlamına gelse de geri çağırma işlevinin aşırı iş yapmadığından emin olmanız gerekir.

setInterval, bir geri çağırmayı belirli bir aralıkta çalıştırdığından etkileşimleri engelleme olasılığı çok daha yüksektir. Bunun nedeni, kullanıcı etkileşimini engelleyebilecek tek seferlik bir geri çağırma olan setTimeout çağrısının tek bir örneğinin aksine, setInterval'nin yinelenen yapısının bir etkileşimi engelleme olasılığını çok daha yüksek hale getirmesi ve böylece etkileşimin giriş gecikmesini artırmasıdır.

Chrome Geliştirici Araçları'ndaki performans profil oluşturucunun giriş gecikmesini gösteren ekran görüntüsü. Zamanlayıcı işlevi tarafından tetiklenen bir görev, kullanıcı bir tıklama etkileşimi 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 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ışmasına neden olur.

Zamanlayıcılar birinci taraf kodunda gerçekleşiyorsa bunlar üzerinde kontrolünüz vardır. Bu toplantılara ihtiyacınız olup olmadığını değerlendirin veya bu toplantılardaki işleri mümkün olduğunca azaltmak için elinizden geleni yapın. Ancak üçüncü taraf komut dosyalarındaki zamanlayıcılar farklıdır. Üçüncü taraf komut dosyalarının ne yaptığını genellikle kontrol edemezsiniz. Üçüncü taraf kodundaki performans sorunlarını düzeltmek için genellikle paydaşlarla birlikte çalışarak belirli bir üçüncü taraf komut dosyasının gerekli olup olmadığını belirlemeniz gerekir. Gerekliyse üçüncü taraf komut dosyası satıcısıyla iletişime geçerek web sitenizde neden olabileceği performans sorunlarını düzeltmek için neler yapılabileceğini belirlemeniz gerekir.

Uzun süren görevlerden kaçının

Uzun giriş gecikmelerini azaltmanın bir yolu, uzun süren görevlerden kaçınmaktır. Etkileşimler sırasında ana iş parçacığını engelleyen aşırı ana iş parçacığı çalışmanız olduğunda, uzun süren görevler tamamlanmadan önce bu etkileşimlerin giriş gecikmesi artar.

Uzun süren görevlerin giriş gecikmesini ne kadar uzattığını gösteren bir görselleştirme. Üstte, tek bir uzun süren görev çalıştırıldıktan kısa bir süre sonra etkileşim gerçekleşir. Bu durum, etkinlik geri çağırmalarının olması gerekenden çok daha geç çalışmasına neden olan önemli bir giriş gecikmesine yol açar. Altta, etkileşim yaklaşık olarak aynı anda gerçekleşir ancak uzun süren görev, yield işlemiyle birkaç küçük göreve bölünür. Bu sayede etkileşimin etkinlik geri çağırmaları çok daha erken çalıştırılabilir.
Görevler çok uzun olduğunda ve tarayıcı etkileşimlere yeterince hızlı yanıt veremediğinde etkileşimlere ne olduğunu gösteren bir görselleştirme ve daha uzun görevlerin daha küçük görevlere bölündüğü durum.

Bir görevde yaptığınız iş miktarını en aza indirmenin yanı sıra (ana iş parçacığında her zaman mümkün olduğunca az iş yapmaya çalışmalısınız), uzun görevleri bölerek kullanıcı girişine yanıt verme süresini iyileştirebilirsiniz.

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

INP'yi optimize etmenin özellikle zorlayıcı bir kısmı, çakışan etkileşimleriniz varsa olabilir. Etkileşim çakışması, bir öğeyle etkileşim kurduktan sonra, ilk etkileşimin bir sonraki kareyi oluşturma fırsatı olmadan sayfayla başka bir etkileşim kurduğunuz anlamına gelir.

Görevlerin ne zaman çakışarak uzun giriş gecikmelerine neden olabileceğini gösteren bir resim. Bu resimde, tıklama etkileşimi, tuşa basma etkileşiminin giriş gecikmesini artırmak için tuşa basma etkileşimiyle çakışıyor.
Chrome'un Geliştirici Araçları'ndaki performans profil oluşturucusunda 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ının nedeni, kullanıcıların kısa bir süre içinde çok sayıda etkileşimde bulunması kadar basit olabilir. Bu durum, kullanıcılar form alanlarına yazı yazarken ortaya çıkabilir. Bu alanlarda çok kısa bir süre içinde birçok klavye etkileşimi gerçekleşebilir. Önemli bir etkinlikteki çalışma özellikle maliyetliyse (ör. ağ isteklerinin arka uca gönderildiği otomatik tamamlama alanları gibi yaygın bir durumda) birkaç seçeneğiniz vardır:

  • Belirli bir süre içinde bir etkinlik geri çağırma işlevinin yürütülme sayısını sınırlamak için girişleri ardışık tekrar düşünebilirsiniz.
  • Giden fetch isteklerini iptal etmek için AbortController kullanın. Böylece ana iş parçacığı, fetch geri çağırmalarını işlerken tıkanmaz. Not: Bir AbortController örneğinin signal özelliği, etkinlikleri iptal etmek için de kullanılabilir.

Çakışan etkileşimler nedeniyle giriş gecikmesinin artmasının bir başka nedeni de yüksek maliyetli animasyonlar olabilir. Özellikle JavaScript'teki animasyonlar, kullanıcı etkileşimlerini engelleyebilecek birçok requestAnimationFrame çağrısını tetikleyebilir. Bu sorunu çözmek için mümkün olduğunda CSS animasyonlarını kullanarak potansiyel olarak pahalı animasyon karelerini sıraya almaktan kaçının. Ancak bunu yaparsanız birleştirilmemiş animasyonlardan kaçındığınızdan emin olun. Böylece animasyonlar ana iş parçacığında değil, esas olarak GPU ve birleştirici iş parçacıklarında çalışır.

Sonuç

Giriş gecikmeleri, etkileşimlerinizin çalışması için gereken sürenin çoğunu temsil etmese de etkileşimin her bölümünün, azaltabileceğiniz bir süre aldığını anlamak önemlidir. Uzun giriş gecikmesi gözlemliyorsanız bunu azaltma fırsatlarınız vardır. Yinelenen zamanlayıcı geri çağırmalarından kaçınmak, uzun süren 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.