Giriş gecikmesini optimize edin

Giriş gecikmesinin ne olduğunu öğrenin ve daha hızlı etkileşim için bu gecikmeyi azaltmaya yönelik teknikleri inceleyin.

Jeremy Wagner

Web'deki etkileşimler, tarayıcıda gerçekleşen her türlü etkinliğin yönlendirdiği karmaşık işlemlerdir. Ancak hepsinin ortak noktası, etkinlik geri çağırmaları çalışmaya başlamadan önce giriş gecikmesine neden olmalarıdır. Bu rehberde, 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şimde bulunduğu andan (ör. ekrana dokunma, fareyle tıklama veya tuşa basma) etkileşim için etkinlik geri çağırmaları çalışmaya başlayana kadar geçen süredir. Her etkileşim, bir miktar giriş gecikmesiyle başlar.

Giriş gecikmesinin basitleştirilmiş görselleştirilmesi. Sol tarafta, etkileşimin başlangıcını gösteren, arkasında yıldız patlaması olan bir fare imleci çizimi yer alıyor. Sağda, bir etkileşimin etkinlik işleyicilerinin ne zaman çalışmaya başladığını gösteren bir dişli resmi yer alıyor. Aradaki boşluk, küme paranteziyle giriş gecikmesi olarak belirtilir.
Giriş gecikmesinin arkasındaki mekanizmalar. İşletim sistemi bir giriş aldığında, etkileşim başlamadan önce bu girişi tarayıcıya iletmelidir. 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 ve sayfanın kendisinde, giriş gecikmelerinin sorunlara neden olacak kadar uzun olmasına yol açabilecek başka şeyler de olur.

Giriş gecikmesi hakkında düşünme

Genel olarak, kullanıcının cihazından bağımsız olarak web sitenizin 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 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şimde bulunmaya çalışırken ana iş parçacığında aşırı yüklenmeden kaçındığınız sürece giriş gecikmeniz sorunları önleyecek kadar düşük olmalıdır.

Giriş gecikmesini en aza indirme

Daha önce de belirtildiği gibi, giriş gecikmesinin bir kısmı kaçınılmazdır ancak diğer yandan, giriş gecikmesinin bir kısmı önlenebilir. Uzun giriş gecikmeleriyle ilgili sorun yaşıyorsanız dikkate almanız gereken bazı noktaları aşağıda bulabilirsiniz.

Aşırı ana ileti dizisi çalışmasına neden olan 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 işlevinin belirtilen bir süre sonra çalışacak bir geri arama planlamasıdır. setInterval ise geri çağırma işlemini süresiz olarak veya zamanlayıcı clearInterval ile durdurulana kadar her n milisaniyede bir çalışacak şekilde planlar.

setTimeout kendi başına sorunlu değildir. Hatta uzun görevlerden kaçınmaya 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ışırken kullanıcının sayfayla etkileşimde bulunmaya çalışıp çalışmadığına bağlıdır.

Ayrıca, setTimeout, setInterval gibi davranarak döngü içinde veya yinelemeli olarak çalıştırılabilir. Ancak tercihen bir önceki yineleme tamamlanmadan sonraki yineleme planlanmaz. Bu, döngünün her setTimeout çağrıldığında ana iş parçacığına geçeceği anlamına gelse de geri çağırma işleminin aşırı iş yapmadığından emin olmanız gerekir.

setInterval belirli aralıklarla geri çağırma işlemi çalıştırır ve bu nedenle etkileşimleri engelleme olasılığı çok daha yüksektir. Bunun nedeni, setTimeout çağrısının tek bir örneğinin, kullanıcı etkileşimini engelleyebilecek tek seferlik bir geri çağırma olmasıdır. setInterval'ın yinelenen yapısı, etkileşimi engelleme olasılığını artırarak etkileşimin giriş gecikmesini yükseltir.

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 normalde olacağından daha geç çalışmasına neden olur.
Önceki bir setInterval çağrısı tarafından kaydedilen ve Chrome Geliştirici Araçları'nın performans panelinde gösterildiği gibi giriş gecikmesine katkıda bulunan bir zamanlayıcı. Eklenen giriş gecikmesi, etkileşimle ilgili etkinlik geri çağırmalarının normalde olabileceğinden daha geç çalışmasına neden olur.

Zamanlayıcılar birinci taraf kodunda gerçekleşiyorsa bunları kontrol edebilirsiniz. Bunlara ihtiyacınız olup olmadığını değerlendirin veya mümkün olduğunca bu alanlardaki iş yükünü azaltmaya çalışın. Ancak üçüncü taraf komut dosyalarındaki zamanlayıcılar farklıdır. Genellikle üçüncü taraf komut dosyalarının ne yaptığı üzerinde kontrolünüz olmaz. Üçüncü taraf kodundaki performans sorunlarını düzeltmek için paydaşlarla birlikte çalışarak belirli bir üçüncü taraf komut dosyasının gerekli olup olmadığını belirlemeniz ve 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 görevlerden kaçının

Uzun giriş gecikmelerini azaltmanın bir yolu, uzun görevlerden kaçınmaktır. Etkileşimler sırasında ana ileti dizisini engelleyen aşırı ana ileti dizisi işiniz olduğunda, uzun görevler tamamlanmadan önce giriş gecikmesi artar.

Görevlerin giriş gecikmesini ne kadar uzattığını gösteren görselleştirme. En üstte, tek bir uzun görev çalıştıktan kısa süre sonra bir etkileşim gerçekleşir. Bu durum, etkinlik geri çağırmalarının gerekenden çok daha sonra çalışmasına neden olan önemli bir giriş gecikmesine yol açar. En altta, etkileşim yaklaşık olarak aynı anda gerçekleşir ancak uzun görev, kontrolü bırakılarak birkaç küçük göreve bölünür. Bu sayede etkileşimin etkinlik geri çağırmaları çok daha erken çalışabilir.
Görevler çok uzun olduğunda ve tarayıcı etkileşimlere yeterince hızlı yanıt veremediğinde etkileşimlere ne olduğu ile daha uzun görevler daha küçük görevlere bölündüğünde etkileşimlere ne olduğunun görselleştirilmesi.

Bir görevde yaptığınız iş miktarını en aza indirmenin (ana ileti dizisinde her zaman mümkün olduğunca az iş yapmaya çalışmalısınız) yanı sıra uzun görevleri bölerek kullanıcı girişine verilen yanıt hızını artırabilirsiniz.

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

Özellikle çakışan etkileşimleriniz varsa INP'yi optimize etmek zor olabilir. Etkileşim çakışması, bir öğeyle etkileşim kurduktan sonra ilk etkileşim bir sonraki kareyi oluşturma fırsatı bulmadan sayfayla başka bir etkileşim kurmanız anlamına gelir.

Görevlerin uzun giriş gecikmelerine neden olacak şekilde ne zaman çakışabileceğini gösteren bir resim. Bu resimde, bir 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şturucuda eşzamanlı olarak gerçekleşen iki etkileşimin görselleştirilmesi. İlk tıklama etkileşimindeki oluşturma işlemi, sonraki klavye etkileşiminde giriş gecikmesine neden oluyor.

Etkileşim çakışmasının kaynakları, kullanıcıların kısa süre içinde çok sayıda etkileşimde bulunması kadar basit olabilir. Bu durum, kullanıcıların form alanlarına yazdığı sırada meydana gelebilir. Bu alanlarda çok kısa bir süre içinde birçok klavye etkileşimi gerçekleşebilir. Bir önemli etkinlik üzerinde çalışmak özellikle maliyetli ise (ör. arka uca ağ isteklerinin yapıldığı otomatik tamamlama alanlarının yaygın olduğu durumda) birkaç seçeneğiniz vardır:

  • Belirli bir süre içinde etkinlik geri çağırmasının yürütülme sayısını sınırlamak için girişleri sekmeyi kaldırma işlemini yapmayı deneyin.
  • Ana iş parçacığının fetch geri çağırmalarını işlemede tıkanmaması için giden fetch isteklerini iptal etmek üzere AbortController kullanın. Not: AbortController örneğinin signal özelliği, etkinlikleri durdurmak için de kullanılabilir.

Çakışan etkileşimler nedeniyle giriş gecikmesinin artmasına neden olan bir başka kaynak da maliyetli animasyonlar olabilir. Özellikle JavaScript'teki animasyonlar, kullanıcı etkileşimini engelleyebilecek çok sayıda requestAnimationFrame çağrısı tetikleyebilir. Bunu önlemek için mümkün olduğunda CSS animasyonlarını kullanarak potansiyel olarak maliyetli animasyon karelerinin sıraya alınmasını önleyin. Ancak bunu yaparsanız animasyonların esas olarak ana iş parçacığında değil, GPU ve birleştirici iş parçacıklarında çalışması için bileşik olmayan animasyonlardan kaçındığınızdan emin olun.

Sonuç

Giriş gecikmeleri, etkileşimlerinizin çalışması için gereken sürenin büyük bir bölümünü oluşturmayabilir ancak etkileşimin her bir bölümünün, azaltabileceğiniz bir süre aldığını anlamanız önemlidir. Uzun giriş gecikmesi gözlemliyorsanız bunu azaltma fırsatlarınız vardır. Tekrarlanan 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 anlamına gelir.

Unsplash'ten Erik Mclean'inlokomotif resmi