Merhabalar arkadaşlar, bugün sizlere Total Blocking Time (TBT) Nedir, Nasıl ölçülür, Nasıl optimize edilir, FID ve TTI ile arasındaki fark nedir gibi soruları yanıtlayacağım.

Kullanımı basit ve kullanıcı girdilerine (input) hızlı tepki veren bir web sitesi tasarlamak için dikkat etmemiz gereken birkaç metrik vardır ve TBT bunlardan biridir.

Total Blocking Time (Toplam Engelleme Süresi), long taskların (50 ms’den uzun tüm işlemler long task olarak adlandırılır) ana iş parçacığını engellediği ve bir sayfanın kullanılabilirliğini etkilediği süredir. Bir sayfanın tamamen etkileşimli hale gelmeden önce long tasklar tarafından engellenme ne kadar süre boyunca tepkisiz durduğunun ölçümlendiği metriğe verilen isimdir.

Google’ın hızlı bir web sayfası için önerdiği maksimum javascript kod işleme süresi 50 milisaniyedir çünkü bunun üzerine çıkan javascript kod işleme süreçleri, tarayıcının kullanıcının gözlemleyebildiği tarafta task bitene kadar işlevsiz bir şekilde kalmasına sebebiyet verir.Bir görev uzunluğu, 50 mili saniyeyi aştıktan sonrasında geçen süre “engelleme” olarak kabul edilir. TBT, kullanıcının sayfanızla etkileşime girmesini engelleyen TOPLAM süreyi ölçer.

Web Tarayıcıları; HTML kodunu ayrıştırmak, DOM oluşturmak, CSS-JS yürütmek ve kullanıcı girdilerini işlemek için ana iş parçacığını kullanır. Herhangi bir noktada, “long task” meydana geldiğinde ana iş parçacığı bloke olur. Bu durumda, tarayıcı işlediği görevi durduramaz ve görev tamamlanana kadar kullanıcı inputlarına yanıt veremez. Kullanıcılar ise bu durumu gecikme olarak algılar.

Total Blocking Time Nasıl Ölçülür?

“First Contentful Paint (FCP) + etkileşime geçme süresi (TTI) = TBT skoru” şeklinde hesaplanır. Ancak bizim bunu manuel olarak ölçümlememiz çok zor olacağı için TBT’yi page speed araçları ile ölçeriz.

• Lighthouse
• WebpageTest.org
• Google PageSpeed
• Chrome Devtools

Üstte yer alan 4 araç sayesinde TBT sonuçlarınızı net olarak ölçümleyebilirsiniz.

Total Blocking Time Nasıl Optimize Edilir?

• Site tarafından yapılan toplam istek sayısını azaltmak,
• Resimleri sayfaya yüklemeden önce daha küçük bir boyuta optimize etmek,
• Komut dosyalarının sayfanın başı yerine altına yüklenmesini sağlamak,
• Komut dosyası değerlendirme süresini azaltma.
• Uzun süre çalışan girdi işleyicileri kullanmaktan kaçının.
• Site dışı harici JavaScript kaynaklarının boyut ve istek sayılarını azaltın
• Sayfaların tamamında kullanılmayan yada ilgili sayfalar için gerekli olmayan CSS ve JS kodlarını sayfalardan temizleyin.
• JavaScript ve CSS kaynaklarınızı sıkıştırın.
• Büyük JS dosyalarınızı mutlaka sıkıştırın.
• Sayfalarda yalnızca gerekli JS kodlarını sunmak için javascript kodlarınızı ayrıştırın (Code Splitting)
• Önemli JS Kaynaklarını Tarayıcı İpuçları ile Sayfalarda Çağırın
• Tarayıcı Ana iş Parçacığını yükünü ve TTB’yi azaltmak için CDN Kullanın.
• DNS isteklerini önceden getirtin
• CSS dosyalarını küçültün
• CSS teslimini optimize edin
• Üçüncü taraf komut dosyalarını optimize edin
• Stil hesaplamaları için değişkenlerin kapsamını azaltın

Total Blocking Time ile Time to Interactive (TTI) Arasındaki İlişki Nedir?

Bir sayfanın kullanıcı etkileşimine açık olduğu sürenin milisaniye cinsinden ölçümlendiği metriğe TTI adı verilir. Bir sayfanın tamamen interaktif olabilmesi için kullanıcının sayfada gerçekleştireceği herhangi bir etkileşime (JS kaynaklı) tarayıcının cevap verebilir olması gereklidir. Eğer tarayıcı, oluşturma süreci esnasında 5 saniye boyunca herhangi bir uzun task ile karşılaşmaz ise TTI devreye girer. Yani TTB hesaplanmadan TTI ile alakalı net verilerin elde edilmesi zordur. Çünkü çalışma mantığı gereği TTI metriği bir sayfanın kullanıcı etkileşimine yanıt verebileceği süreyi ölçerken TBT, bir sayfada ne kadar süre ile geçikme yaşadığının hesaplandığı metrikdir.

Total Blocking Time ile First Input Delay (FID) Arasındaki İlişki Nedir?

TBT ve TTI gibi metrikler, FID’i etkileyecek potansiyel etkileşim sorunlarını yakalamak ve teşhis etmek için hayati önem taşıyan laboratuvar ölçümleridir.

Web sitenizde FID puanını hesaplamak için yeterli gerçek veriye sahip olmadığınızda laboratuvar TBT verisine bakılabilir. Tabii ki de gerçek veriler kadar doğru ve tutarlı olamaz ancak kafanızda aşağı yukarı bir şey canlandırmanızı sağlar. Hem TBT hem de FID etkileşim ölçer ve bir kullanıcının sitenin etkileşimi ve yanıt verebilirliğine ilişkin ilk izlenimini yakalar.

FID, ziyaretçinizin sitenizin etkileşimi ve yanıt verebilirliği hakkındaki ilk izlenimi açısından iyi bir göstergedir. İyi bir FID puanı, bir okuyucunun sitenizde kalma ve daha fazla içerik tüketmek için geri dönme olasılığının daha yüksek olduğu anlamına gelir. Çünkü herkes hızlı ve duyarlı siteleri sever.

TBT sürenizi optimize ederek , Core Web Vitals metriklerinden biri olan FID puanını da iyileştireceksiniz. Bu iki değer birbirlerini pozitif veya negatif yönde etkileyebilir.

FID’nizi 100 milisaniyenin altında tutabilirseniz, harikasınız!

Total Blocking Time SEO’yu Nasıl Etkiler?

Arama motoru algoritmaları, web sayfalarını sıralarken kullanıcı deneyimini dikkate alır. Eğer web siteniz kötü bir TBT skoruna sahipse, sayfanızın SEO sıralamasını doğrudan etkileyebilir