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şık şeylerdir ve bunları yönlendirmek için tarayıcıda her tür etkinlik gerçekleşir. Ancak hepsinin ortak özelliği, etkinlik geri çağırmaları çalışmaya başlamadan önce giriş gecikmesine maruz kalmalarıdır. Bu kılavuzda, giriş gecikmesinin ne olduğunu ve web sitenizdeki etkileşimlerin 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 kez etkileşimde bulunmasından (ör. bir ekrana dokunma, fare ile tıklama veya bir tuşa basma) başlayıp etkileşim için geri çağırma işleminin ç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örseli. Sol tarafta, arkasında yıldız patlaması yapan ve etkileşimin başladığını simgeleyen fare imlecinin çizimi bulunuyor. Sağda, bir etkileşimin etkinlik işleyicilerinin ne zaman çalışmaya başladığını belirten bir dişli çark çizimi var. Aradaki boşluk, süslü ayraç içinde giriş gecikmesi olarak belirtilir.
Giriş gecikmesinin ardındaki mekanizma. İşletim sistemi tarafından bir giriş alındığında, etkileşim başlamadan önce bu girişin tarayıcıya iletilmesi gerekir. Bu, belirli bir zaman 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 aktarması her zaman biraz zaman alır. Ancak giriş gecikmesinin bu kısmı çoğu zaman fark edilmez ve sayfanın kendisinde meydana gelen başka şeyler de vardır. Bu durum, giriş gecikmelerini sorunlara neden olacak kadar uzun süre yaratabilir.

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

Genel olarak, web sitenizin kullanıcının cihazından bağımsız olarak Sonraki Boyamayla Etkileşim (INP) metriğinin "iyi" eşiğini karşılama şansını en üst düzeye çıkarmak 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.

Sonuç olarak, INP'nin "iyi" eşiğine ulaşmak 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şimde bulunmaya çalışırken aşırı ana iş parçacığı işlemlerinden kaçındığınız sürece, giriş gecikmenizin sorunları önleyecek kadar düşük olması gerekir.

Giriş gecikmesini en aza indirme

Daha önce de belirtildiği gibi, bir miktar giriş gecikmesi kaçınılmazdır ancak diğer yandan, bir miktar giriş gecikmesinden önlenebilir. Uzun giriş gecikmeleri yaşıyorsanız göz önünde bulundurmanız gereken bazı noktalar aşağıda verilmiştir.

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

JavaScript'te giriş gecikmesine neden olabilecek, yaygın olarak kullanılan iki zamanlayıcı işlevi vardır: setTimeout ve setInterval. İkisi arasındaki fark şudur: setTimeout, bir geri çağırmayı belirli bir sürenin sonunda çalışacak şekilde planlamaktadır. Öte yandan setInterval, sürekli olarak her n milisaniyede bir veya zamanlayıcı clearInterval ile durdurulana kadar bir geri çağırma planlar.

setTimeout tek başına sorun teşkil etmez. Hatta, uzun görevlerden kaçınmaya yardımcı olabilir. Ancak, zaman aşımının ne zaman gerçekleştiğine ve kullanıcının zaman aşımı geri çağırması çalışırken sayfayla etkileşimde bulunmaya çalışıp çalışmadığına bağlıdır.

Buna ek olarak, setTimeout bir döngü halinde veya yinelemeli olarak çalıştırılabilir. Burada, daha çok setInterval işlevi görür ancak önceki yineleme tamamlanana kadar bir sonraki yinelemeyi planlamaz. Bu, setTimeout her çağrıldığında döngünün ana iş parçacığına vereceği anlamına gelse de, geri çağırmanın aşırı iş yapmaması için dikkatli olmanız gerekir.

setInterval belirli aralıklarla geri çağırma çalıştırır. Bu nedenle, etkileşimleri engelleme olasılığı çok daha yüksektir. Bunun nedeni, kullanıcı etkileşimine engel olabilecek tek seferlik bir geri çağırma olan setTimeout çağrısının tek bir örneğinin aksine, setInterval'in yinelenen yapısının etkileşimi engelleme olmasını ve dolayısıyla etkileşimin giriş gecikmesini artırmasıdır.

Chrome Geliştirici Araçları'ndaki performans profil aracının 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şimini başlatmadan hemen önce gerçekleşir. Ancak kronometre, 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 normalde olduğundan daha sonra çalışmasına neden olur.

Zamanlayıcılar birinci taraf kodunda oluşuyorsa bunlarla ilgili kontrol sizdedir. Bunlara ihtiyacınız olup olmadığını değerlendirin veya içlerindeki işi mümkün olduğunca azaltmak için elinizden geleni yapın. Ancak üçüncü taraf komut dosyalarındaki kronometreler farklıdır. Genellikle üçüncü taraf komut dosyalarının ne yaptığı üzerinde kontrol sahibi olmazsınız ve üçüncü taraf koddaki performans sorunlarını düzeltmek genellikle, belirli bir üçüncü taraf komut dosyasının gerekli olup olmadığını belirlemek üzere paydaşlarla çalışmayı gerektirir. Gerekiyorsa, web sitenizde neden olabilecek performans sorunlarını düzeltmek için neler yapılabileceğini belirlemek üzere bir üçüncü taraf komut dosyası tedarikçi firmasıyla iletişim kurun.

Uzun görevlerden kaçının

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ışmanız varsa bu durum, uzun görevler tamamlanmadan önce giriş gecikmesine neden olur.

Görevlerin giriş gecikmesini ne kadar uzattığının görselleştirmesi. En üstte, etkileşim, tek bir uzun görev çalıştırıldıktan kısa bir süre sonra gerçekleşir. Bu da, etkinlik geri çağırmalarının olduğundan çok daha geç çalışmasına neden olan önemli bir giriş gecikmesine neden olur. Alt kısımda, etkileşim aşağı yukarı aynı zamanda gerçekleşir, ancak uzun görev sonuç vererek daha küçük görevlere bölünür. Böylece etkileşimin etkinlik geri çağırmaları çok daha erken gerçekleşir.
Görevler çok uzun olduğunda ve tarayıcı etkileşimlere yeterince hızlı yanıt veremediğinde, uzun görevlerin daha küçük görevlere ayrıldığı durumlardaki etkileşimlere ne olduğunun görselleştirmesi.

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. Ayrıca, uzun görevleri bölerek kullanıcı girişine duyarlılığı artırabilirsiniz.

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

INP'yi optimize etmenin özellikle zorlu yanı, çakışan etkileşimlerinizin olması olabilir. Etkileşim çakışması, bir öğe ile etkileşim kurduktan sonra, ilk etkileşim sonraki kareyi oluşturma fırsatı bulana kadar sayfayla başka bir etkileşim yaptığınız anlamına gelir.

Uzun giriş gecikmeleri oluşturmak için görevlerin ne zaman üst üste binebileceğinin tasviri. Bu tasvirde, bir tıklama etkileşimi, keydown etkileşimi için giriş gecikmesini artırmak üzere bir keydown etkileşimiyle örtüşmektedir.
Chrome Geliştirici Araçları'nda, performans profil aracındaki iki eşzamanlı etkileşimin görselleştirilmiş hali. İlk tıklama etkileşimindeki oluşturma çalışması, sonraki klavye etkileşimi için giriş gecikmesine neden olur.

Etkileşim çakışması kaynakları, kullanıcıların kısa süre içinde çok sayıda etkileşim kurması kadar basit olabilir. Kullanıcılar, çok kısa bir süre içinde klavye etkileşimlerinin çok fazla gerçekleşebileceği form alanlarına giriş yaptıklarında bu durumla karşılaşılabilir. Ağ isteklerinin bir arka uca yapıldığı otomatik tamamlama alanlarında olduğu gibi, önemli bir etkinlik üzerinde çalışmak özellikle pahalıysa iki seçeneğiniz vardır:

  • Bir etkinlik geri çağırmanın belirli bir dönemde yürütülme sayısını sınırlandırmak için girişleri sıfırdan geri döndürmeyi kullanmayı düşünebilirsiniz.
  • Ana ileti dizisinin fetch geri aramalarının işlenmesinde tıkanıklık olmaması için giden fetch isteklerini iptal etmek üzere AbortController özelliğini kullanın. Not: AbortController örneğine ait signal özelliği, etkinlikleri iptal etmek için de kullanılabilir.

Örtüşen etkileşimler nedeniyle giriş gecikmesinde artışa neden olan bir başka kaynak da pahalı animasyonlar olabilir. Özellikle JavaScript'teki animasyonlar, kullanıcı etkileşimlerinin önüne geçebilecek birçok requestAnimationFrame çağrısını tetikleyebilir. Bu sorunu gidermek amacıyla, pahalı olabilecek animasyon karelerini sıraya koymamak için mümkün olduğunda CSS animasyonlarını kullanın. Ancak bunu yaparsanız animasyonların ana iş parçacığında değil, GPU ve birleştirici iş parçacıklarında çalışması için birleştirilmemiş animasyonlardan kaçındığınızdan emin olun.

Sonuç

Etkileşimlerinizin gerçekleşmesi için gereken sürenin büyük çoğunluğu giriş gecikmeleri olmayabilir. Ancak etkileşimin her aşamasının belirli bir sürede tamamlanacağını bilmek önemlidir. Uzun giriş gecikmesi gözlemliyorsanız bunu 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 daha hızlı etkileşime geçmesini sağlayabilir.

Erik Mclean'in Unsplash oyunundan hero resim.