Giriş gecikmesinin ne olduğunu ve daha hızlı etkileşim için bu gecikmeyi azaltma tekniklerini öğrenin.
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 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.
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.
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.
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 gidenfetch
isteklerini iptal etmek üzereAbortController
özelliğini kullanın. Not:AbortController
örneğine aitsignal
ö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.