İlk Yükleme Gecikmesi (FID) Nedir?

Bir web sitesi için yüksek kullanıcı deneyimi yaratma yolundaki ilk adımı belli: İyi bir ilk izlenim! Şu ana kadar iyi bir ilk izlenim yaratabilmek adına neler yapabileceğinizle ilgili çok sayıda kavram öğrendik. Özellikle First Contentful Paid, yani İlk Zengin İçerikli Boyama, bize ”ilk izlenim” ile ilgili çok şey söylüyor.

Hatırlayalım: Neydi İlk Zengin İçerikli Boyama? Bu kavram, kullanıcının web sitesine girdikten sonra karşılaştığı ilk özelleşmiş yüzüdür. İçeriksel alanlar farklı renkler kullanılarak çerçeveler halinde gösterilir ve bu sayede kullanıcı sitenin genel görünümü ile ilgili bir fikir edinir. Zengin İçerikli Boyama, kullanıcının boş bir sayfaya bakmak yerine sitenin yükleniyor olduğunu işaret eden boyanmış alanlarla karşılaşmasını sağlar. Bu da kullanıcı deneyiminin artmasına yardımcı olabilir. İlk Zengin İçerikli Boyama ile ilgili daha fazlasını öğrenin.

FID ve İlk Zengin İçerikli Boyama da, aslında hız ile ilgili. Fakat her biri farklı bir hız tipini ölçüyor: İlk Zengin İçerikli Boyama, kullanıcının site yüklenme hızı deneyimini keşfetmenizi sağlayan bir metriktir. İlk Yükleme Gecikmesi ise, kullanıcının siteye girdikten sonra interaktif bir butona tıklamasıyla birlikte, bu butonun işlevini yerine getirmesi için ne kadar beklemesi gerektiğini ölçer.

Yani bunlardan ilk yüklenme hızını bize sunarken, bir diğeri interaktif çalışma hızını keşfetmemizi sağlar. Butonlar, formlar, imleçler, tıklamalar ve çok daha fazlası, FID skorunun güçlü olduğu bir sitede çok daha iyi bir deneyim yaşatır. FID, kısaca kullanıcının ‘’bu site gerçekten işime yarayacak mı?’’, ‘’bu site kullanmak istediğim fonksiyonu bana sunacak mı?’’ sorularına yanıt veren asıl değerdir.

Kısacası; Bir web sitesinde interaktif bir butona tıklamanız ile bu butonun yanıt verip yüklenmesi arasında geçen süre, FID olarak adlandırılır.

Google PageSpeed İlk Yükleme Gecikmesi Raporu

FID, First Input Delay ya da İlk Yükleme Gecikmesi, interaktif web site performansını ölçen bir metrik olarak kullanıcının ‘’ilk izleniminde’’ oldukça önemli bir yer tutar. Bu yüzden hem PageSpeed raporlarında ve kullanıcı deneyiminde bu metriğin etkisi oldukça büyük.

Sitenin yanıt ya da yükleme gecikmesi ile ilgili Google’ın size vereceği skoru nasıl yorumlamanız gerekiyor? Bir de buna bakalım.

• En iyi FID skoru 100 ms ve altında olan skordur. Skorunuz bu aralıktaysa yeşil renk ile sembolize edilir ve ‘’Güçlü’’ olarak değerlendirilir. Güçlü, yani kullanıcı web sitenize girdiğinde onunla gerçekten etkişim kurabiliyor.
• 100 ms ve 300 ms arasında bir değere sahip olan FID skoru turuncu renk ile boyanır ve ‘’Geliştirilebilir’’ olarak işaretlenir. Bu skoru iyileştirmek için neler yapılabileceğini içeriğin devamında inceleyeceğiz.
• 300 ms ve daha yüksek olan FID skorları ise ‘’Zayıf’’ olarak adlandırılıyor ve kırmızı renkle boyanıyor.
  

BONUS: Laboratuvar Ortamında İlk Yükleme Gecikmesini Ölçmek

Küçük bir hatırlatma: FID, bir labaratuvar deneyi yerine gerçek bir vaka çalışması gerektirir. Yani gerçek kullanıcıların gerçek deneyimlerini yaşarken sundukları veri en doğru FID skorunu elde etmenize yardımcı olur.

Örneğin Google Lighthouse, yaptığı hesaplamalar için laboratuvar araştırmaları gerçekleştirir.  Bunu yapmak için sistem bir URL’yi alır ve bu URL üzerinden deneyim gerçekleştirir. Sitenin farklı açılardan gösterdiği performanslar skor bazlı olarak belirlenir.

Eğer bir laboratuvar verisi olarak FID skorunuzu ölçmek istiyorsanız, Total Blocking Time (TBT) metriğinden yararlanabilirsiniz. Bu metrik, Google tarafından İlk Zengin İçerikli Boyama süresi ile Etkileşim Süresi arasındaki süreyi hesaplar. Bu sürenin iyileşmesi ise çoğu zaman otomatik olarak İlk Yükleme Gecikmesi’nin de iyileşmesi anlamına gelir.

İlk Yükleme Gecikmesinin Nedenleri Nelerdir?

İlk yükleme gecikmesi, genel olarak İlk Zengin İçerikli Boyama süreci ile Etkileşim Süresi arasında gerçekleşir. Bunun temel sebebi ise şu: Bu süre içerisinde sayfa, içeriğinin bir kısmını görüntüleyebilir hale gelir fakat işlem devam ettiği için henüz sayfanın her noktası interaktif hale gelmemiştir.

Bunu bir grafik aracılığı ile inceleyelim. Karmaşık simgeler sizi korkutmasın, adım adım inceleme yapacağız:

Yukarıda FCP, İlk Zengin İçerikli Boyama’yı, TTI ise Etkileşim Süresi’ni temsil ediyor. Kolayca görebildiğiniz gibi, İlk Zengin İçerikli Boyama ile Etkileşim Süresi arasında makul olarak kabul edilebilecek bir zaman aralığı var. Bu zaman aralığı içerisinde ise üçü de görece büyük olan üç temel işlev butonu kullanılmış (alt kısımdaki üç adet sarı kutucuklar, kullanılan işlevleri büyüklükleri ile temsil etmektedir).

İşte FCP ile TTI arasında başlatılmak istenen bu üç komut genel olarak kullanıcının gereğinden uzun süre beklemesini gerektirir, çünkü ana iş parçacığının yanıt vermesi uzun sürer.

İlk Yükleme Gecikmesini Azaltmak İçine Neler Yapılabilir?

İlk yükleme gecikmesi mutlaka optimize edilerek iyileştirilmesi gereken bir değer. FID’i azaltabilmek için yapabileceğiniz birkaç temel şey var:

1. Öncelikle, dış kaynak kodlarının azalmasını sağlayabilirsiniz.
2. İkincil olarak, Javascript kodlarının sitenizdeki yükünü azaltmayı deneyin.
3. Ayrıca, sayfada bulunan istek sayılarını azaltmak ve var olan aktarım boyutlarını küçültmeyi denemek de iyi bir fikir olabilir.

Javascript Yükünü Azaltmak

Eğer ana iş parçacığı üzerinde halen Javascript çalıştırılıyorsa, tarayıcı kullanıcının talep ettiği eylemi hızlı bir şekilde gerçekleştiremeyebilir. Çok sayıda Javascript yükü ise kullanıcının daha çok beklemek zorunda kalmasına anlamına gelir. Bu yüzden ana iş parçacığındaki Javascript yükünün mümkün olduğu kadar düşük düzeyde tutulması son derece önemli olacaktır. Peki, web sayfanızdaki Javascript yükünü azaltmak için neler yapabilirsiniz? Birlikte inceleyelim:

1. Uzun görevleri bölmeyi deneyin: Kullanıcının talep ettiği fonksiyonun 50 ms ya da daha fazla gecikmesine sebep olan uzun görevlerin bölünmesi işe yarayacaktır. Bu sayede sitenin girişin fonksiyonların çalışma hızındaki gecikmeler azalacaktır.
2. Optimizasyon gerçekleştirin: Sayfa etkileşiminin daha hızlı gerçekleşmesi için optimizasyon çalışmaları yapın.
3. Javascript’in yürütme süresinin azalmasını sağlayın: Sayfanızda bulunan Javascript kaynaklı kodların miktarının sınırlanması, tarayıcının bu kodları yürütmek için harcadığı zamanın da azalmasına yardımcı olacaktır. Bu da etkileşimli butonların daha hızlı yanıt vermesini sağlayacaktır. Yürütülen Javascript dosyalarının miktarını azaltmak için kullanılmayan JavaScript dosyalarının çalışmasını erteleyin ve çoklu dosyaları sıkıştırmayı deneyin.

İlk Giriş Gecikmesini Daha Yakından Tanıyım: İlk Etkileşim Süresinden Farkı Tam Olarak Ne?

İlk giriş gecikmesi optimizasyonu için yeni yollar bulmaya çalışan pek çok kişi onu ilk etkileşim süresi metriği ile karıştırıyor. Her ikisinin de birer performans metriği olarak son derece yararlı olduğunu söylemek mümkün. Fakat ikisi, tamamen farklı şeyler ölçüyor.

TTI olarak da sembolize edilen ve Google Lighthouse’un denetim gerçekleştirdiği metriklerden biri olan Etkileşim Süresi, bir sayfanın etkileşimli şekilde çalışabilmesi için yüklenmenin ilk anından itibaren geçmesi gereken süreyi ölçer. Etkileşimli şekilde çalışma ise genellikle üç temel adımdan sonra gerçekleşir:

1. Web sayfası içerisinde işe yarayan içeriklerin İlk Zengin İçerikli Boyama yöntemi ile işaretlenmesi,
2. Olay dinleyicilerinin sayfa öğelerinin büyük bir çoğunluğu için uygulanması,
3. Kullanıcı etkileşimin 50 ms ya da daha kısa süre içerisinde gerçekleşmesi.

Fakat İlk Yükleme Gecikmesi tamamen farklıdır. Bu metrik, sayfanın etkileşim için tamamen hazır olmadan önce kullanıcının etkileşim talep eden eyleminin nasıl yanıtlandığını inceler. Örneğin bir kullanıcı, Etkileşim Süresi gerçekleşmeden önce sayfa içerisinde beliren buton ya da linklerden birine tıklayabilir. İlk Giriş Gecikmesinin yaptığı şey kullanıcının site hakkındaki ‘’ilk izlenimini’’ etkileyen bu erken tıklamanın ne kadar hızlı yanıtlandığını ölçmektir.

Web Sayfanızın Performansını İyileştirmeye İlk Yükleme Gecikmesinden Başlamak Mantıklı Mı?

Elbette Google Lighthouse raporlarını ya da Pagespeed istatistiklerini tam olarak görmeden, ‘’web sitenizin optimizasyon çalışmalarına buradan başlayın!’’ demek yanlış olur. Fakat size İlk Yükleme Gecikmesi’nin optimizasyona başlamak için neden iyi bir yer olabileceğini genel hatları ile anlatabiliriz.

Az önce de belirttiğimiz gibi, İlk Giriş Gecikmesi bir laboratuvar verisi değildir. Doğrudan gerçek kullanıcının davranışları tarafından belirlenen bu metriğe ‘’Real User Metric’’, yani ‘’Gerçek Kullanıcı Metriği’’ adı veriliyor. Bu özelliği ile bu metrik, Google Lighthouse’taki performans skorlarından tamamen ayrılıyor.

Ne de olsa gerçek kullanıcı davranışına odaklı olan bir metriği kullanmak, ‘’gerçek kullanıcının’’ deneyimini arttırmanın en iyi yolu.

İlk Giriş Gecikmesi (FID) SEO’yu Etkiler Mi?

İlk giriş gecikmesi, web sitenizin kullanıcıya yanıt verme hızını ölçer. Bu metriğin ise SEO’yu doğrudan etkilediği artık resmi olarak bilinen bir şey. Google, ‘’Basic Web Vitals’’ ismi ile tanıttığı üç metriğe İlk Giriş Gecikmesini de dahil ediyor. Bunlar sırasıyla En Büyük Zengin İçerikli Boyama, İlk Giriş Gecikmesi ve Kümülatif Düzen Kayması olarak biliniyor.

1. Buradaki En Büyük Zengin İçerikli Boyama değeri, web sayfanızın yüklenme hızını ölçüyor.
2. İlk Yükleme Gecikmesi, web sayfanızın interaktivite / etkileşim hızını ölçüyor.
3. Kümülatif Düzen Kayması ise web sayfanızın görsel olarak ne kadar stabil ve kaliteli bir deneyim sunduğunu ölçüyor.

Largest Contentful Paint, yani En Büyük Zengin İçerikli Boyama ile İlk Zengin içerikli boyama arasındaki farkı daha önce anlatmıştık. İlgili linke tıklayarak söz konusu sayfaya gidebilir ve performans metrikleri ile ilgili daha da detaylı bilgi alabilirsiniz.

Unutmayın, daha düşük bir İlk Giriş Gecikmesi, diğer metriklerin iyileştirilmiş sonuçları ile birlikte, daha iyi SEO skoru anlamına geliyor.

Bitirirken: İlk Yükleme Gecikmesi

Web sayfanızın daha yüksek performansla kullanıcıya daha güçlü bir deneyim sunmasını sağlamak sandığınız kadar zor değil. Doğru araçlar yardımı ile güçlü analizler yapmak ve fırsatları takip ederek hızlı iyileştirmeler yapmak, skorunuzu arttıracaktır. Daha fazlası için blog içeriklerini takip etmeye devam edin!