First Input Delay (FID)

Philip Walton

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

Web'de iyi bir ilk izlenim, birinin sadık bir kullanıcı olması veya ayrılıp bir daha geri dönmemesi arasındaki farkı yaratabilir. Peki, iyi bir izlenim nasıl oluşturulur ve kullanıcılarınızda nasıl 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ği ile hızı ve duyarlılığı hakkında ilk izlenimler 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 ne kadar hızlı yüklendiğine dair ilk izlenimleri İlk Zengin İçerikli Boyama (FCP) ile ölçülebilir. Ancak sitenizin ekrana piksel çizme hızı, hikayenin yalnızca bir parçasıdır. Kullanıcılar bu piksellerle etkileşime geçmeye çalışırken sitenizin ne kadar duyarlı olduğu da aynı derecede önemlidir.

İlk Giriş Gecikmesi (FID) metriği, kullanıcınızın sitenizin etkileşimi ve yanıt verme hızı ile ilgili ilk izlenimini ölçmenize yardımcı olur.

FID nedir?

FID, kullanıcının bir sayfayla ilk kez etkileşime girmesinden (yani kullanıcı bir bağlantıyı tıkladığında, bir düğmeye dokunduğunda ya da JavaScript'le çalıştırılan özel bir denetimi kullandığında) tarayıcının bu etkileşime yanıt olarak etkinlik işleyicileri işlemeye gerçekten 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 100 milisaniye veya daha kısa olmalıdır. Kullanıcılarınızın çoğu için bu hedefe ulaştığınızdan emin olmak amacıyla iyi bir ölçüm eşiği, mobil ve masaüstü cihazlara göre segmentlere ayrılmış sayfa yüklemelerinin 75. yüzdelik dilimidir.

Ayrıntılı FID

Etkinliklere yanıt veren kod yazan geliştiriciler olarak, genellikle kodumuzun etkinlik gerçekleştiği anda, anında çalıştırılacağını varsayarız. Ancak kullanıcılar olarak hepimiz sık sık bunun tam tersini deneyimledik. Telefonumuza bir web sayfası yükledik, sayfayla etkileşim kurmaya çalıştık ve hiçbir şey olmadığında hayal kırıklığına uğradık.

Genel olarak giriş gecikmesi (diğer adıyla giriş gecikmesi), 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 verememesinden kaynaklanır. Bunun en yaygın nedenlerinden biri, tarayıcının uygulamanız tarafından yüklenen büyük bir JavaScript dosyasını ayrıştırıp yürütmekte olmasıdır. Bu işlem sırasında, yüklediği JavaScript başka bir şey yapmasını söyleyebileceğinden hiçbir etkinlik dinleyicisini çalıştıramaz.

Tipik bir web sayfası yükleme işleminin 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ğinde bulunan ve bu kaynakların indirilmesi tamamlandıktan sonra ana iş parçacığında işlenir.

Bu, ana iş parçacığının anlık olarak meşgul olduğu dönemlere yol açar. Bu, bej renkli görev bloklarıyla gösterilir.

Uzun ilk giriş gecikmeleri genellikle ilk zengin içerikli boyama (FCP) ile etkileşime hazır olma süresi (TTI) arasında gerçekleşir. Bunun nedeni, sayfanın içeriğinin bir kısmının oluşturulmuş ancak henüz güvenilir bir şekilde etkileşime açık olmamasıdır. Bunun nasıl olabileceğini göstermek için zaman çizelgesine FCP ve TTI eklenmiştir:

FCP ve TTI arasında oldukça uzun bir süre olduğunu (üç uzun görev dahil) bir kullanıcı bu süre içinde sayfayla etkileşim kurmaya çalışırsa (örneğin, bir bağlantıyı tıklayarak) fark etmiş olabilirsiniz. Tıklamanın alınması ile ana iş parçacığının yanıt verebildiği zaman arasında bir gecikme olacaktır.

Kullanıcı en uzun görevin başlangıcına yakın bir yerde sayfayla etkileşim kurmaya çalışırsa ne olur?

Giriş, tarayıcı bir görevin ortasındayken gerçekleştiğinden, 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.

Bir etkileşimin etkinlik dinleyicisi yoksa ne olur?

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

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

• 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 duyarlılığıyla ilgili ilk izlenimi olacaktır. İlk izlenimler, sitenin kalitesi ve güvenilirliğiyle ilgili genel izlenimimizi şekillendirmede kritik öneme sahiptir.
• Günümüzde web'de en çok karşılaşılan etkileşim sorunları sayfa yükleme sırasında ortaya çıkıyor. Bu nedenle, başlangıçta 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 düzeltmesi için önerilen çözümler (kod bölme, önceden daha az JavaScript yükleme vb.), sayfa yüklendikten sonra yavaş giriş gecikmelerini düzeltmek için kullanılan çözümlerle aynı değildir. Bu metrikleri ayırarak web geliştiricilerine daha spesifik performans yönergeleri sağlayabiliriz.

İlk giriş olarak ne kabul edilir?

FID, bir sayfanın yüklenmesi sırasındaki duyarlılığını ölçen bir metriktir. Bu nedenle, yalnızca tıklama, dokunma ve tuşa 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 genellikle ayrı bir iş parçacığında çalıştırarak gecikmelerini gizleyebilir).

Başka bir deyişle, FID, RAIL performans modelindeki R'ye (duyarlılığa) odaklanır. Kaydırma ve yakınlaştırma ise daha çok A ile (animasyon) ilgilidir ve performans özellikleri ayrı ayrı değerlendirilmelidir.

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

Tüm kullanıcılar sitenizi her ziyaret ettiğinde sitenizle etkileşim kurmaz. Ayrıca, etkileşimlerin tümü FID ile alakalı değildir (önceki bölümde belirtildiği gibi). Ayrıca, bazı kullanıcıların ilk etkileşimleri kötü zamanlarda (ana iş parçacığı uzun süre meşgul olduğunda) gerçekleşirken bazı kullanıcıların ilk etkileşimleri iyi zamanlarda (ana iş parçacığı tamamen boşta olduğunda) gerçekleşir.

Bu, bazı kullanıcıların FID değerlerinin yer almayacağı, bazı kullanıcıların düşük FID değerlerine, bazı kullanıcıların ise muhtemelen yüksek FID değerlerine sahip olacağı anlamına gelir.

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

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

Yukarıda da belirtildiği gibi, FID yalnızca etkinlik işlenmesinde yaşanan "gecikmeyi" ö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ği için bu metriğe dahil edilmez. Yani geliştiriciler, etkinlik işleyici mantıklarını etkinlikle ilişkili görevden ayırmak için setTimeout() veya requestAnimationFrame() aracılığıyla ayarsız geri çağırma işlevine sarmalayabilirler. Sonuç, metrik puanında iyileşme ancak kullanıcı tarafından algılanan daha yavaş bir yanıt olur.

Ancak FID yalnızca etkinlik gecikmesinin "gecikme" kısmını ölçse de etkinlik yaşam döngüsünün daha uzun bir kısmını izlemek isteyen geliştiriciler bu işlemi Event Timing API'yi kullanarak yapabilir. Daha ayrıntılı bilgi için özel metrikler kılavuzuna bakın.

FID'yi ölçme

FID, sayfanızla etkileşim kurmak için gerçek bir kullanıcının gerektirdiğinden yalnızca alanda ölçülebilen bir metriktir. FID'yi aşağıdaki araçlarla ölçebilirsiniz.

Alan araçları

• Chrome Kullanıcı Deneyimi Raporu
• 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 konsola kaydeden bir PerformanceObserver nasıl oluşturulacağı 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 delta dikkate alınarak ölçülür. Çoğu durumda bu, FID değeri olacaktır. Ancak tüm first-input girişleri FID'yi ölçmek için geçerli değildir.

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

Metrik ile API arasındaki farklar

• API, arka plan sekmesinde yüklenen sayfalar için first-input giriş gönderir, ancak FID hesaplamasında bu sayfalar yoksayılmalıdır.
• API, sayfa ilk girişten önce arka plana alındıysa first-input girişlerini de gönderir. Ancak FID hesaplamasında bu sayfalar da yoksayılmalıdır (girişler yalnızca sayfa boyunca tüm süre ön planda olduğunda dikkate alınır).
• Sayfa geri-ileri önbellekten geri yüklendiğinde API, first-input girişlerini raporlamaz ancak kullanıcılar bunları farklı sayfa ziyaretleri olarak deneyimlediği için bu durumlarda FID ölçülmelidir.
• API, iframe'lerde gerçekleşen girişleri bildirmez ancak sayfanın kullanıcı deneyiminin bir parçası oldukları için metrik bu girişleri bildirir. Bu durum CrUX ile RUM arasında fark olarak gösterilebilir. FID'yi doğru şekilde ölçmek için bunları göz önünde bulundurmanız gerekir. Alt çerçeveler, toplama için first-input girişlerini ebeveyn ç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 önemlidir.

Tüm Core Web Vitals eşiklerinin yüzdelik dilimi 75. sırada olsa da özellikle FID için 95.-99. yüzdelik dilimlere bakmanızı önemle tavsiye ederiz. Bu yüzdelik dilimler, kullanıcıların sitenizde yaşadığı özellikle kötü ilk deneyimlere denk gelir. En çok iyileştirilmesi gereken alanları gösterir.

Raporlarınızı cihaz kategorisine veya türe 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 önemsediğiniz FID değeri, masaüstü kullanıcılarının 95.-99. yüzdelik dilimi ve mobilde en çok önem verdiğiniz FID değeri mobil kullanıcıların 95.-99. yüzdelik dilimi olmalıdır.

FID'yi iyileştirme

Bu metriği iyileştirme teknikleri konusunda size yol gösterecek FID'yi optimize etme konulu tam bir kılavuz mevcuttur.

Değişiklik günlüğü

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

Bu metrikleri 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 bildirimlerinizi web-vitals-feedback Google grubunda paylaşabilirsiniz.