TBT (Total Blocking Time) Nedir?

TBT (Total Blocking Time), Türkçe’de Toplam Engelleme Süresi olarak bilinen ve bir web sayfasının kullanıcı etkileşimine ne kadar hızlı yanıt verdiğini ölçen bir performans metriğidir. Core Web Vitals (Önemli Web Verileri) metriklerinden FID (First Input Delay) metriği ile yakından ilişkilidir ve sayfanın etkileşime ne kadar hazır olduğunu gösteren önemli bir sinyaldir.

TBT Ne Anlama Gelir?

TBT, FCP (First Contentful Paint) ile TTI (Time to Interactive – Etkileşime Hazırlık Süresi) arasında gerçekleşen tüm uzun görevlerin toplam süresini ölçer.

• Uzun Görev Nedir?
  • Tarayıcının ana iş parçacığını (main thread) 50 milisaniyeden (ms) daha uzun süreyle meşgul eden herhangi bir JavaScript görevidir.
  • Bu görevler, sayfanın bir tıklamaya veya klavye girdisine yanıt vermesini engeller ve kullanıcı arayüzünü “dondurur”.
• TBT’nin Hesaplanması:
  • TBT, bu uzun görevlerin her birinin 50 ms’yi aşan kısımlarının toplamıdır.
  • Örnek: Eğer bir görev 80 ms sürerse, bu görevin engelleme süresi 30 ms’dir (80 ms – 50 ms).
  • Sayfa yüklenirken bu tür üç görev varsa:
    • 1. Görev: 80 ms (Engelleme: 30 ms)
    • 2. Görev: 120 ms (Engelleme: 70 ms)
    • 3. Görev: 60 ms (Engelleme: 10 ms)
  • Toplam Engelleme Süresi (TBT) = 30 + 70 + 10 = 110 ms

TBT Neden Önemlidir?

Google, FID (İlk Giriş Gecikmesi) metriğini, gerçek kullanıcı verilerinde ölçüldüğü için daha çok önemser. Ancak, FID’i doğrudan laboratuvar ortamında simüle etmek zordur. İşte bu yüzden TBT, FID için mükemmel bir laboratuvar proxy’sidir. TBT’yi düşürerek, gerçek dünyadaki FID değerinizi de iyileştirme olasılığınız çok yüksektir.

• Kullanıcı Deneyimi: Yüksek bir TBT değeri, sayfanın yüklenmesi tamamlanmış gibi görünse bile, kullanıcıların bir butona tıkladığında veya bir forma girdiğinde yanıt alamamasına neden olur. Bu durum, kullanıcı deneyimini ciddi şekilde zedeler ve hemen çıkma oranını artırır.
• SEO: Google, kullanıcı deneyimini bir sıralama faktörü olarak kullandığı için, TBT değerinizi düşürmek doğrudan SEO performansınızı etkiler.

TBT Nasıl İyileştirilir?

TBT’nin ana nedeni, tarayıcının ana iş parçacığını meşgul eden JavaScript’tir. Dolayısıyla, TBT’yi iyileştirmenin yolu JavaScript’i optimize etmektir.

1. JavaScript Dosyalarını Bölün (Code Splitting):
   • Tüm JavaScript kodunu tek bir büyük dosyada yüklemek yerine, kodu mantıksal olarak daha küçük parçalara ayırın.
   • Kullanıcının ilk yüklemede ihtiyaç duymadığı kodları (örneğin, bir formun doğrulama betiği veya bir galeri modülü) daha sonra yüklenecek şekilde ayarlayın.
2. Gereksiz JavaScript’i Kaldırın:
   • Sitenizde artık kullanılmayan JavaScript kodlarını (dead code) veya eklentileri kaldırın.
   • Web sitenizi Google PageSpeed Insights veya GTmetrix gibi araçlarla tarayarak gereksiz kodları tespit edebilirsiniz.
3. Üçüncü Taraf Kodları Kontrol Edin:
   • Reklamlar, analiz araçları veya sosyal medya eklentileri gibi üçüncü taraf betikleri, sitenizin performansını ciddi şekilde etkileyebilir.
   • Mümkün olduğunca az üçüncü taraf betiği kullanmaya çalışın veya bu betikleri async veya defer gibi etiketlerle asenkron olarak yükleyin.
4. Uzun Görevleri Ayırın:
   • Eğer büyük bir JavaScript fonksiyonunuz varsa, onu daha küçük, 50 ms’nin altında çalışan görevlere ayırın.
   • requestIdleCallback() veya setTimeout() gibi tarayıcı API’lerini kullanarak bu görevleri, ana iş parçacığı boşken çalışacak şekilde zamanlayabilirsiniz.
5. Sunucu Tarafı Oluşturma (Server-Side Rendering – SSR) Kullanın:
   • JavaScript ile dinamik olarak oluşturulan içerikler, TBT’yi artırır. İçeriği sunucu tarafında oluşturarak tarayıcıya hazır HTML olarak göndermek, TBT’yi önemli ölçüde azaltır.

TBT, özellikle karmaşık ve JavaScript yoğun siteler için hayati bir performans metriğidir. Bu metriği düşürmek için yapılacak optimizasyonlar, hem kullanıcı deneyiminizi hem de sitenizin arama motoru sıralamalarını doğrudan olumlu yönde etkiler.