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ü etkinlikle desteklenen karmaşık işlemlerdir. Ancak hepsinin ortak noktası, etkinlik geri çağırmaları çalışmaya başlamadan önce bir 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, belirli bir 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 imlecinin çizgi resmi yer alıyor. Sağda, etkileşim için etkinlik işleyicilerinin ne zaman çalışmaya başladığını gösteren bir dişli çark resmi var. Aradaki boşluk, giriş gecikmesi olarak kıvırcık ayraçla gösterilir.
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ı çalışma yapmadığı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 neden olabilecek iki en çok tercih edilen 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 döngü içinde veya yinelemeli olarak çalıştırılabilir. Bu durumda, önceki yineleme tamamlanana kadar bir sonraki yinelemeyi planlamamak tercih edilse de setInterval gibi davranır. 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ğırmasının aşırı iş yapmadığından emin olmanız gerekir.

setInterval, belirli aralıklarla geri çağırma işlemi yaptığından etkileşimleri engelleme olasılığı çok daha yüksektir. Bunun nedeni, setTimeout çağrısının tek bir örneği, kullanıcı etkileşimini engelleyebilecek tek seferlik bir geri çağırma olsa da setInterval'nin tekrarlayan yapısı nedeniyle etkileşimi engelleme olasılığının çok daha yüksek olması ve dolayısıyla etkileşimin giriş gecikmesinin artması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 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 yoktur. Üçü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 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 bu etkileşimlerin giriş gecikmesi artar.

Görevlerin giriş gecikmesini ne kadar uzattığını gösteren görsel. 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 süren görev, kontrol verilerek 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ğuna dair görselleştirme.

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

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

INP'yi optimize etmenin özellikle zorlayıcı bir kısmı, çakışan etkileşimleriniz varsa ortaya çıkar. 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 kurduğunuz 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 bir 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 maliyetliyse (ö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 bir etkinlik geri çağırmasının yürütülme sayısını sınırlamak için girişlerde ardışık tekrar 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şimlerini 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 birleştirilmemiş 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. Tekrarlayan 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.

Unsplash'ten Erik Mclean'in hero resmi