Total Blocking Time (TBT) Nedir?

Total Blocking Time (TBT), bir web sayfası yüklenirken tarayıcının ana iş parçacığının (main thread) uzun görevler nedeniyle (50 ms’den uzun süren işlemler) ne kadar süreyle meşgul olduğunu ölçen bir performans metriğidir.

Total Blocking Time (TBT) Temel Unsurları

Total Blocking Time (TBT) ölçümü, kullanıcının sayfayla etkileşime geçmeye çalıştığı ancak tarayıcının bu istekleri yerine getiremediği zamanları hesaplar. Başka bir deyişle, ana iş parçacığındaki her görev 50 ms’den uzun sürüyorsa, bu uzun görevlerin 50 ms’lik kısmı engelleme süresi olarak kabul edilir. TBT, bu engelleme sürelerinin tümünü toplayarak sayfanın ne kadar süre boyunca yanıt vermediğini (bloklandığını) belirler. Bu yüzden “toplam” engelleme süresi olarak adlandırılır.

Total Blocking Time (TBT) ölçümündeki kilit noktalar şunlardır:

• Uzun Görevler (Long Tasks): Tarayıcının ana iş parçacığında çalışan ve 50 milisaniyeyi aşan görevler “uzun görev” olarak adlandırılır. Bu görevler çalışırken tarayıcı kullanıcı girdilerine yanıt veremez.
• Ölçüm Aralığı: TBT, genellikle sayfanın ilk içerik boyaması (First Contentful Paint – FCP) ile sayfanın tamamen etkileşimli hale geldiği (Time To Interactive – TTI) zaman aralığında meydana gelen uzun görevlerin, 50 ms’nin üzerindeki kısmının toplamı olarak hesaplanır.
• Kullanıcı Deneyimine Etkisi: TBT, sayfa yüklenirken meydana gelen gecikmelerin, örneğin tıklamalara veya dokunma olaylarına yanıt verememe durumunun bir göstergesidir. Yüksek TBT, kullanıcının sayfayla etkileşimde bulunmasını engelleyerek kötü bir kullanıcı deneyimi yaratır.

Total Blocking Time (TBT) Uzun Görevler Nereden Kontrol Edilir?

DevTools’un Performans sekmesinde, sayfanın yüklenmesi ve kullanıcı etkileşimleri sırasında ana iş parçacığında gerçekleşen tüm görevler zaman çizelgesinde gösterilir. Burada, 50 milisaniyeden uzun süren görevler otomatik olarak “uzun görev” olarak işaretlenir.

Örneğin, diyelim ki bir web sayfası yüklenirken bir JavaScript fonksiyonu çalışıyor ve bu fonksiyonun tamamlanması 250 milisaniye sürüyor. Tarayıcı, normal bir görevin maksimum çalışma süresini 50 milisaniye olarak kabul eder. Bu durumda, 250 ms – 50 ms = 200 ms süren kısım, ana iş parçacığının uzun süre meşgul kalmasına neden olduğundan “uzun görev” olarak işaretlenir. Yani, 250 milisaniyelik bir görevde, ilk 50 milisaniye dışında kalan 200 milisaniye uzun görev olarak kabul edilir.

Görevlerin süresi kırmızı renkle veya özel simgelerle vurgulanır. Fareyle uzun bir görevin üzerine geldiğinizde, görev süresine dair detaylı bir tooltip görüntülenir. Böylece hangi görevlerin uzun sürdüğünü kolayca görebilir ve analiz edebilirsiniz.

İdeal Total Blocking Time (TBT) Değerleri Nelerdir?

Mobil cihazlar için ideal TBT değeri 300 ms’nin altında, masaüstü cihazlar için ise 100 ms’nin altında olmalıdır. Bu fark, mobil cihazların genellikle daha düşük işlem gücü ve daha yüksek ağ gecikmelerine sahip olmasından kaynaklanır. Dolayısıyla, mobilde biraz daha yüksek bir eşik kabul edilebilirken, masaüstü cihazlarda daha sıkı performans beklentisi vardır. Total Blocking Time, Lighthouse Performans puanının %25’ini belirlediği için, TBT’nin düşük tutulması genel kullanıcı deneyimi ve sıralama açısından büyük önem taşır. Lighthouse raporundaki tablolar, farklı TBT değerlerinin sayfanın genel performans skorunu nasıl etkilediğini net bir şekilde göstermektedir.

Mobil Cihazlar için TBT Değerleri

Masaüstü Cihazlar için TBT Değerleri

Total Blocking Time (TBT) Neden Önemlidir?

Total Blocking Time (TBT), özellikle Google’ın PageSpeed Insights ve Lighthouse gibi araçlarında sayfa performansının önemli bir parçasını oluşturur. TBT’nin önemli bir metrik olmasının nedenleri arasında şunlar yer alır:

• Kullanıcı Etkileşimi: Uzun TBT, kullanıcıların sayfa üzerindeki girdilerine (örneğin, tıklama veya dokunma) yanıt verilememesine ve dolayısıyla sayfanın yavaş veya donuk algılanmasına neden olur.
• SEO ve Sıralamalar: Google, Core Web Vitals kapsamında TBT ile ilişkili metrikleri değerlendirir. Yüksek TBT, kötü kullanıcı deneyimi yaratacağı için SEO sıralamalarını olumsuz etkileyebilir.
• Optimizasyon Fırsatları: TBT, geliştiricilere JavaScript kodlarının, üçüncü taraf scriptlerin ve diğer kaynakların optimize edilmesi gerektiğini gösterir. Bu iyileştirmeler sayesinde sayfa yüklenme süresi ve yanıt hızı artırılabilir.

Total Blocking Time (TBT) Nasıl Ölçülür?

TBT, Chrome DevTools, Lighthouse, PageSpeed Insights gibi araçlarla ölçülebilir. Bu araçlar, sayfanın yüklenme sürecinde hangi görevlerin 50 ms’yi aştığını belirleyip, bu uzun görevlerin fazladan süresini (örneğin, 250 ms süren bir görevde 200 ms) toplar. Ayrıca, WordPress CMS alt yapısına sahip internet sitelerinde, Google tarafından geliştirilen Site Kit eklentisi, sayfalarınızda yaşanan Total Blocking Time (TBT) süreleri hakkında bilgi sağlar.

Bu ölçüm sayesinde geliştiriciler, hangi kod parçalarının veya kaynakların kullanıcı etkileşimlerini engellediğini tespit edip, gerekli optimizasyonları yapabilir.