First Input Delay (FID)

Philip Walton

İyi bir ilk izlenim yaratmanın ne kadar önemli olduğunu hepimiz biliyoruz. Yeni insanlarla tanışırken ve web'de deneyimler oluştururken önemlidir.

Web'de iyi bir ilk izlenim, kullanıcıların sadık bir kullanıcı olup olmaması veya ayrılıp bir daha geri gelmemesi arasında fark yaratabilir. Peki, iyi bir izlenim nasıl oluşturulur ve kullanıcılarınız üzerinde ne tür bir izlenim bıraktığınızı nasıl ölçersiniz?

Web'de ilk izlenimler birçok farklı biçimde olabilir. Bir sitenin tasarımı ve görsel çekiciliğiyle ilgili ilk izlenimlerin yanı sıra hızı ve duyarlılığıyla ilgili ilk izlenimler de vardır.

Kullanıcıların bir sitenin tasarımını ne kadar beğendiğini web API'leriyle ölçmek zor olsa da hızını ve duyarlılığını ölçmek zor değildir.

Kullanıcıların sitenizin yüklenme hızıyla ilgili ilk izlenimi, İlk Zengin İçerikli Boyama (FCP) ile ölçülebilir. Ancak sitenizin ekrana piksel çizme hızı, hikayenin yalnızca bir bölümünü anlatır. Kullanıcılar bu piksellerle etkileşim kurmaya çalıştığında sitenizin ne kadar duyarlı olduğu da aynı derecede önemlidir.

First Input Delay (FID) metriği, kullanıcınızın sitenizin etkileşim ve yanıt verme durumuyla ilgili ilk izlenimini ölçmenize yardımcı olur.

FID nedir?

FID, kullanıcının bir sayfayla ilk kez etkileşime girmesinden (yani bir bağlantıyı tıkladığında, bir düğmeye dokunduğunda veya JavaScript ile çalışan özel bir denetimi kullandığında) tarayıcının bu etkileşime yanıt olarak etkinlik işleyicilerini işlemeye başlayabildiği zamana kadar geçen süreyi ölçer.

İyi bir FID puanı nedir?

İyi bir kullanıcı deneyimi sağlamak için sitelerde İlk Giriş Gecikmesi'nin 100 milisaniye veya daha az olması gerekir. Kullanıcılarınızın büyük çoğunluğu açısından bu hedefe ulaştığınızdan emin olmak için mobil ve masaüstü cihazlarda bölümlendirilmiş sayfa yüklemelerinin 75. yüzdelik dilim eşiğini ölçebilirsiniz.

FID ile ilgili ayrıntılar

Etkinliklere yanıt veren kodlar yazan geliştiriciler olarak, kodumuzun etkinlik gerçekleşir gerçekleşmez hemen çalıştırılacağını varsayarız. Ancak kullanıcılar olarak hepimiz sık sık bunun tam tersini deneyimledik. Telefonumuzda bir web sayfası yükledik, sayfayla etkileşime geçmeye çalıştık ve hiçbir şey olmayınca hayal kırıklığına uğradık.

Genel olarak giriş gecikmesi (diğer adıyla giriş gecikme süresi), tarayıcının ana iş parçacığı başka bir şeyle meşgul olduğu için kullanıcıya (henüz) yanıt veremediğinde meydana gelir. Bunun yaygın bir nedeni, tarayıcının uygulamanız tarafından yüklenen büyük bir JavaScript dosyasını ayrıştırmak ve yürütmekle meşgul olmasıdır. Tarayıcı bunu yaparken, yüklediği JavaScript'in kendisine başka bir şey yapmasını söyleyebileceği için herhangi bir etkinlik dinleyicisini çalıştıramaz.

Tipik bir web sayfası yüklemesinin aşağıdaki zaman çizelgesini göz önünde bulundurun:

Yukarıdaki görselleştirme, kaynaklar (büyük olasılıkla CSS ve JS dosyaları) için birkaç ağ isteği gönderen bir sayfayı gösteriyor. Bu kaynakların indirilmesi tamamlandıktan sonra ana iş parçacığında işleniyorlar.

Bu durum, ana iş parçacığının kısa süreliğine meşgul olduğu dönemlere yol açar. Bu dönemler, bej renkli görev bloklarıyla gösterilir.

Uzun İlk Giriş Gecikmeleri genellikle First Contentful Paint (FCP) ile Time to Interactive (TTI) arasında meydana gelir. Bunun nedeni, sayfanın içeriğinin bir kısmını oluşturmuş olması ancak henüz güvenilir bir şekilde etkileşimli olmamasıdır. Bunun nasıl olabileceğini göstermek için zaman çizelgesine FCP ve TTI eklenmiştir:

FCP ile TTI arasında oldukça uzun bir süre (üç uzun görev dahil) olduğunu fark etmiş olabilirsiniz. Kullanıcı bu süre zarfında sayfayla etkileşime girmeye çalışırsa (örneğin, bir bağlantıyı tıklayarak) tıklama alındığında ve ana iş parçacığı yanıt verebildiğinde bir gecikme olur.

Kullanıcının en uzun görevin başlangıcına yakın bir zamanda sayfayla etkileşim kurmaya çalıştığını düşünün:

Giriş, tarayıcı bir görevi çalıştırırken gerçekleştiği için girişe yanıt verebilmek için görevin tamamlanmasını beklemesi gerekir. Beklemesi gereken süre, bu kullanıcının bu sayfadaki FID değeridir.

Etkileşimde etkinlik dinleyici yoksa ne olur?

FID, bir giriş etkinliğinin alındığı zaman ile ana iş parçacığının bir sonraki boşta kalma zamanı arasındaki farkı ölçer. Bu, FID'nin bir etkinlik işleyicinin kaydedilmediği durumlarda bile ölçüldüğü anlamına gelir. Bunun nedeni, birçok kullanıcı etkileşiminin bir etkinlik dinleyicisi gerektirmemesi ancak çalışmak için ana iş parçacığının boşta olmasını gerektirmesidir.

Örneğin, aşağıdaki HTML öğelerinin tümü, kullanıcı etkileşimlerine yanıt vermeden önce ana iş parçacığındaki devam eden görevlerin tamamlanmasını beklemelidir:

• Metin alanları, onay kutuları ve radyo düğmeleri (<input>, <textarea>)
• Açılır listeleri seçin (<select>)
• bağlantılar (<a>)

Neden yalnızca ilk giriş dikkate alınır?

Herhangi bir girişteki gecikme kötü bir kullanıcı deneyimine yol açsa da öncelikle birkaç nedenden dolayı ilk giriş gecikmesini ölçmenizi öneririz:

• İlk giriş gecikmesi, kullanıcının sitenizin yanıt verme hızıyla ilgili ilk izlenimi olacaktır. İlk izlenimler, bir sitenin kalitesi ve güvenilirliğiyle ilgili genel izlenimimizi şekillendirmede kritik öneme sahiptir.
• Web'de bugün karşılaştığımız en büyük etkileşim sorunları sayfa yükleme sırasında meydana geliyor. Bu nedenle, ilk olarak sitenin ilk kullanıcı etkileşimini iyileştirmeye odaklanmanın, web'in genel etkileşimini iyileştirme konusunda en büyük etkiye sahip olacağına inanıyoruz.
• Sitelerin yüksek ilk giriş gecikmelerini nasıl düzelteceğine dair önerilen çözümler (kod bölme, daha az JavaScript'i önceden yükleme vb.), sayfa yüklendikten sonraki yavaş giriş gecikmelerini düzeltmek için mutlaka aynı çözümler değildir. Bu metrikleri ayırarak web geliştiricilere daha spesifik performans yönergeleri sunabileceğiz.

Neler ilk giriş olarak kabul edilir?

FID, bir sayfanın yükleme sırasındaki duyarlılığını ölçen bir metriktir. Bu nedenle, yalnızca tıklama, dokunma ve tuşlara basma gibi ayrı işlemlerden gelen giriş etkinliklerine odaklanır.

Kaydırma ve yakınlaştırma gibi diğer etkileşimler sürekli işlemlerdir ve tamamen farklı performans kısıtlamalarına sahiptir (Ayrıca tarayıcılar, bunları ayrı bir iş parçacığında çalıştırarak gecikmelerini genellikle gizleyebilir).

Başka bir deyişle, FID, RAIL performans modelindeki R (yanıt verme) özelliğine odaklanırken kaydırma ve yakınlaştırma daha çok A (animasyon) ile ilgilidir ve performans nitelikleri ayrı ayrı değerlendirilmelidir.

Kullanıcı sitenizle hiç etkileşim kurmazsa ne olur?

Tüm kullanıcılar, her ziyaretlerinde sitenizle etkileşimde bulunmaz. Ayrıca, önceki bölümde belirtildiği gibi tüm etkileşimler FID ile alakalı değildir. Ayrıca, bazı kullanıcıların ilk etkileşimleri kötü zamanlarda (ana iş parçacığı uzun süre boyunca meşgulken), bazılarının ise iyi zamanlarda (ana iş parçacığı tamamen boşta olduğunda) gerçekleşir.

Bu, bazı kullanıcıların FID değerlerinin olmayacağı, bazılarının FID değerlerinin düşük olacağı ve bazılarının ise FID değerlerinin yüksek olacağı anlamına gelir.

FID'yi izleme, raporlama ve analiz etme şekliniz, alışkın olduğunuz diğer metriklerden muhtemelen oldukça farklı olacaktır. Bunu en iyi şekilde nasıl yapacağınız sonraki bölümde açıklanmaktadır.

Neden yalnızca giriş gecikmesi dikkate alınır?

Yukarıda da belirtildiği gibi, FID yalnızca etkinlik işleme "gecikmesini" ölçer. Toplam etkinlik işleme süresini veya etkinlik işleyicileri çalıştırdıktan sonra tarayıcının kullanıcı arayüzünü güncellemesi için geçen süreyi ölçmez.

Bu süre kullanıcı için önemli olsa ve deneyimi etkilese de, geliştiricileri deneyimi daha da kötüleştiren geçici çözümler eklemeye teşvik edebileceğinden bu metriğe dahil edilmez. Örneğin, etkinlik işleyici mantıklarını, etkinlikle ilişkili görevden ayırmak için eşzamansız bir geri çağırma işlevi (setTimeout() veya requestAnimationFrame() aracılığıyla) içine sarmalayabilirler. Bu durumda metrik puanı iyileşir ancak kullanıcı tarafından algılanan yanıt hızı düşer.

Ancak FID yalnızca etkinlik gecikmesinin "gecikme" kısmını ölçerken etkinlik yaşam döngüsünün daha fazlasını izlemek isteyen geliştiriciler bunu Event Timing API'yi kullanarak yapabilir. Daha ayrıntılı bilgi için özel metrikler hakkındaki rehbere bakın.

FID nasıl ölçülür?

FID, yalnızca sahada ölçülebilen bir metriktir. Bunun nedeni, FID'nin ölçülebilmesi için gerçek bir kullanıcının sayfanızla etkileşimde bulunması gerekmesidir. FID'yi aşağıdaki araçlarla ölçebilirsiniz.

Saha araçları

• Chrome User Experience Report
• PageSpeed Insights
• Search Console (Core Web Vitals raporu)
• web-vitals JavaScript kitaplığı

JavaScript'te FID'yi ölçme

JavaScript'te FID'yi ölçmek için Event Timing API'yi kullanabilirsiniz. Aşağıdaki örnekte, first-input girişlerini dinleyen ve bunları konsola kaydeden bir PerformanceObserver oluşturma işlemi gösterilmektedir:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    const delay = entry.processingStart - entry.startTime;
    console.log('FID candidate:', delay, entry);
  }
}).observe({type: 'first-input', buffered: true});

Yukarıdaki örnekte, first-input girişinin gecikme değeri, girişin startTime ve processingStart zaman damgaları arasındaki fark alınarak ölçülür. Çoğu durumda bu değer FID değeri olur ancak tüm first-input girişleri FID ölçümü için geçerli değildir.

Aşağıdaki bölümde, API'nin bildirdiği değerler ile metriğin hesaplanma şekli arasındaki farklar listelenmektedir.

Metrik ile API arasındaki farklar

• API, arka plandaki bir sekmede yüklenen sayfalar için first-input girişleri gönderir ancak FID hesaplanırken bu sayfalar yoksayılmalıdır.
• API, ilk giriş gerçekleşmeden önce sayfa arka plana alınmışsa first-input girişlerini de gönderir ancak bu sayfalar FID hesaplanırken de yoksayılmalıdır (girişler yalnızca sayfa tüm süre boyunca ön planda ise dikkate alınır).
• API, sayfa geri/ileri önbelleğinden geri yüklendiğinde first-input girişlerini bildirmez ancak kullanıcılar bunları ayrı sayfa ziyaretleri olarak deneyimlediğinden bu durumlarda FID ölçülmelidir.
• API, iframe'lerdeki girişleri raporlamaz ancak metrik, sayfanın kullanıcı deneyiminin bir parçası oldukları için bu girişleri raporlar. Bu durum, CrUX ile RUM arasında bir fark olarak görünebilir. FID'yi doğru şekilde ölçmek için bunları göz önünde bulundurmanız gerekir. Alt çerçeveler, first-input girişlerini toplama için üst çerçeveye bildirmek üzere API'yi kullanabilir.

FID verilerini analiz etme ve raporlama

FID değerlerinde beklenen varyans nedeniyle, FID hakkında rapor oluştururken değerlerin dağılımına bakmanız ve daha yüksek yüzdelik dilimlere odaklanmanız çok önemlidir.

Tüm Core Web Vitals eşikleri için yüzdelik dilim seçimi 75. yüzdelik dilim olsa da özellikle FID için 95. ve 99. yüzdelik dilimlere bakmanızı önemle tavsiye ederiz. Bu yüzdelik dilimler, kullanıcıların sitenizle yaşadığı özellikle kötü ilk deneyimlere karşılık gelir. Ayrıca, en çok geliştirilmesi gereken alanları da gösterir.

Raporlarınızı cihaz kategorisine veya türüne göre segmentlere ayırsanız bile bu durum geçerlidir. Örneğin, masaüstü ve mobil için ayrı raporlar çalıştırıyorsanız masaüstünde en çok önem verdiğiniz FID değeri, masaüstü kullanıcılarının %95-99'luk dilimi olmalı, mobil cihazlarda en çok önem verdiğiniz FID değeri ise mobil kullanıcıların %95-99'luk dilimi olmalıdır.

FID nasıl iyileştirilir?

Bu metriği iyileştirmeye yönelik teknikler konusunda size yol gösterecek FID'yi optimize etme hakkında kapsamlı bir kılavuz mevcuttur.

Değişiklik günlüğü

Zaman zaman, metrikleri ölçmek için kullanılan API'lerde ve bazen de metriklerin tanımlarında hatalar keşfedilir. Bu nedenle, bazen değişiklikler yapılması gerekir ve bu değişiklikler, dahili raporlarınızda ve kontrol panellerinizde iyileştirme veya gerileme olarak görünebilir.

Bu durumu yönetmenize yardımcı olmak için bu metriklerin uygulanmasında veya tanımında yapılan tüm değişiklikler bu Değişiklik Günlüğü'nde gösterilir.

Bu metriklerle ilgili geri bildiriminiz varsa web-vitals-feedback Google grubunda paylaşabilirsiniz.