Toplam Engelleme Süresi (TBT) Nedir?

TBT (Total Blocking Time), bir web sayfasının ilk içerik boyası (FCP) ile etkileşime hazır hale gelmesi (TTI) arasında geçen süre içinde ana iş parçacığını (main thread) 50 milisaniyeden uzun süre meşgul eden görevlerin toplam engelleme süresini ölçen bir performans metriğidir. Kullanıcının sayfayla etkileşime geçmeye çalıştığı ancak tarayıcının yanıt veremediği süreyi sayısal olarak ifade eder ve Lighthouse performans skorunun %30’unu oluşturur.

TBT Eşik Değerleri

Lighthouse, TBT için üç performans aralığı tanımlar.

TBT Nasıl Hesaplanır?

TBT hesaplaması uzun görev ve engelleme süresine göre hesaplanır.

Uzun görev: Ana iş parçacığında 50 milisaniyeden uzun süren herhangi bir görevdir. 50 ms, tarayıcının kullanıcı girdisine 100 ms içinde yanıt verebilmesi için belirlenen kritik eşiktir.

Engelleme süresi: Bir görevin 50 ms’yi aşan kısmıdır. Örneğin 120 ms süren bir görevin engelleme süresi 70 ms’dir (120 – 50 = 70).

TBT Neden Önemlidir?

1. TBT, Lighthouse performans puanının %30’unu oluşturur. Bu oran, Core Web Vitals’tan LCP’nin ağırlığından (%25) bile yüksektir. Dolayısıyla Lighthouse skorunu iyileştirmenin en etkili yollarından biri TBT’yi düşürmektir.
2. Google’ın 2024’te CLS’nin yerini alan Core Web Vitals metriği INP (Interaction to Next Paint), kullanıcı etkileşimlerine sayfanın ne kadar hızlı görsel yanıt verdiğini ölçer. Yüksek TBT değeri çoğunlukla yüksek INP değeriyle birlikte görülür; çünkü ikisi de ana iş parçacığı tıkanıklığından kaynaklanır. TBT laboratuvar ortamında ölçülebilen bir metrik olduğundan INP sorunlarını erken tespit etmede pratik bir gösterge işlevi görür.
3. Araştırmalar, bir sayfanın 100 ms’den uzun süre yanıt vermemesinin kullanıcıların etkileşim başlatma olasılığını düşürdüğünü ortaya koymaktadır. TBT bu yanıtsız sürenin kümülatif ölçümüdür.

TBT Nasıl Ölçülür?

TBT yalnızca laboratuvar ortamında ölçülebilen bir metriktir; gerçek kullanıcı verisiyle (field data) doğrudan ölçülemez. Bunun temel nedeni, uzun görev tespitinin sayfanın kontrollü koşullarda yüklenmesini gerektirmesidir.

Lighthouse (Chrome DevTools)

1. Chrome DevTools’u açın.
2. Lighthouse sekmesine geçin.
3. Mobile modunu seçin.
4. Analyze page load butonuna tıklayın.
5. Raporda Total Blocking Time değerini inceleyin.

Chrome DevTools Performance Sekmesi

1. Performance sekmesini açın.
2. Sayfayı yeniden yükleyerek kaydı başlatın.
3. Kayıt tamamlandığında Main thread bölümünü inceleyin.
4. Kırmızı üçgenle işaretlenmiş uzun görevleri tespit edin.
5. Bottom-Up veya Call Tree görünümüyle hangi fonksiyonların bu süreyi oluşturduğunu öğrenin.

PageSpeed Insights

PageSpeed Insights, Lighthouse motorunu kullanarak TBT değerini raporlar. Ancak bu araç gerçek kullanıcı verisi olarak TBT sunmaz; bunun yerine INP değerini gerçek kullanıcı metriği olarak gösterir.

TBT Değeri 0 Olabilir mi?

Evet. FCP ile TTI arasında 50 ms’yi aşan hiçbir görev bulunmuyorsa TBT sıfır olur. Statik HTML sayfaları veya çok az JavaScript içeren sayfalar bu duruma ulaşabilir. Ancak modern web uygulamalarında TBT’yi sıfıra yaklaştırmak gerçekçi bir hedef olarak kabul edilir; tam sıfır pratikte nadirdir.

Üçüncü Taraf Scriptler TBT’yi Ne Kadar Etkiler?

Önemli ölçüde etkiler. Analitik araçlar, A/B test scriptleri ve reklam ağları toplam TBT değerinin büyük bölümünü oluşturabilir. Chrome DevTools’un Performance sekmesinde Third-party summary görünümü bu katkıyı kaynağına göre ayrıştırarak gösterir.

Sunucu Tarafındaki Optimizasyonlar TBT’yi Etkiler mi?

Doğrudan etkilemez. TBT tamamen istemci tarafında, tarayıcının ana iş parçacığında gerçekleşen bir ölçümdür. Ancak dolaylı bir ilişki mevcuttur.Ddaha hızlı sunucu yanıtı (düşük TTFB) JavaScript dosyalarının daha erken indirilmesini sağlar. Bu durum tüm yükleme sürecini öne çekerek FCP ve TTI değerlerini iyileştirebilir ancak TBT’nin kendisini değiştirmez.