Genel Bakış
Toplam Engelleme Süresi (TBT – Total Blocking Time), 2020’de kullanıma sunulan ve sayfanızın kullanıcı girdisine karşı yük yanıtını ölçen bir Lighthouse metriğidir.
En basit ifadeyle TBT, kullanıcının web sayfanızla etkileşimde bulunmasını engelleyen web sayfanızın toplam engellenme süresini ölçer.
Temel Web Verileri’nden biridir ve Google Sayfa Hızı İçgörüleri’nde (PageSpeed Insights) görülen, yalnızca saha (gerçek kullanıcı) verileri ilgili İlk Giriş Gecikmesi (FID – First Input Delay) metriğinin yerine geçer.
Toplam Engelleme Süresi Neyi Ölçer?
Google’a göre,
“TBT, İlk Zengin İçerikli Boyama (FCP) ile İlk Etkileşime Geçen Süre (TTI – Time To Interactive) arasındaki toplam süreyi ölçer; burada ana iş parçacığı, kullanıcı girdisine yanıt vermesini engelleyecek kadar uzun süre engellenmiştir.”
Temel olarak, tarayıcı HTML’yi ayrıştırmak, DOM oluşturmak, CSS ve JavaScript’i çalıştırmak, kullanıcı olaylarını işlemek ve diğer önemli görevleri gerçekleştirmek için ana iş parçacığı (main thread) denen şeyi kullanır.
Bu görevlerden herhangi biri 50 ms’den daha uzun süre çalıştığında (Uzun Görev olarak da bilinir), ana iş parçacığı “engellenmiş” olarak kabul edilir, çünkü tarayıcı devam eden bir görevi kesintiye uğratamaz.
Ana ileti dizisi engellenirse sayfanız ekrana dokunma, klavye basma veya fare tıklaması gibi kullanıcı girdilerine yanıt veremez.
50 ms’nin üzerinde siren zaman dilimi, bu istek için ayrı engelleme süresi olarak kabul edilir.
Tüm bu engelleme sürelerinin toplamı, sayfanızın Toplam Engelleme Süresidir (TBT).
50 ms’den uzun herhangi bir görev, Uzun Görev olarak kabul edilir. Yukarıdaki örnekte 3 Uzun Görev vardır (kırmızı). (Kaynak: https://web.dev/tbt/)
Örneğin, yukarıdaki resimde, ana iş parçacığı üzerinde, bireysel süreleri 50 ms’yi aştığı için 3’ü Uzun Görev olmak üzere 5 görev vardır.
Her Uzun Görev için engelleme süreleri aşağıdaki gibidir:
- Görev A – 220 ms
- Görev B – 70 ms
- Görev E – 145 ms
Bu senaryoda TBT 435 ms’dir. Bununla birlikte, ana iş parçacığının yalnızca 500 ms süren bir görevi varsa, TBT 500 ms olacaktır.
Toplam Engelleme Süresi ve İlk Etkileşime Geçen Süre
Etkileşime Geçen Süre (TTI), sayfa etkileşiminizle ilgili başka bir ölçümdür.
TBT ve TTI birbirini tamamlar, ancak sayfa deneyiminizde tamamen farklı bakış açıları sağlar.
TTI, sayfanız tamamen etkileşimli olduğunda sinyal verir.
TBT, hangi JavaScript görevlerinin yürütülmesinin en uzun sürdüğünü size özellikle söyler.
TTI, ana iş parçacığı en az 5 saniye boyunca uzun görevler içermemişse, sayfayı tamamen etkileşimli olarak kabul eder.
Aşağıdaki senaryoları göz önünde bulundurun:
- A) 5 saniyelik bir süreye yayılmış üç 60 ms’lik görev.
- B) Bir 5 saniyelik Uzun Görev.
Yukarıdaki senaryoların her ikisi de TTI’yi aynı miktarda geri çekecektir.
A Senaryosu, uzun görevler tarayıcının zamanının çok fazlasını almadığından, büyük ölçüde sayfa yüklemesi boyunca etkileşimlidir.
Bununla birlikte, ilk senaryo yalnızca 30 ms’lik bir TBT’ye sahipken, ikinci senaryo 4950 ms’lik bir TBT’ye sahip olduğundan, her iki senaryo da bir kullanıcı için çok farklı hissedecektir.
A Senaryosu, uzun görevler tarayıcının zamanının çok fazlasını almadığından, büyük ölçüde sayfa yüklemesi boyunca etkileşimlidir.
Öte yandan tarayıcı uzun bir görevi yerine getirmekle meşgul olduğundan Senaryo B hiç etkileşime giremez.
Bu, TBT’yi hem içgörü sağlayan bağımsız bir metrik hem de TTI için yararlı bir tamamlayıcı metrik yapar.
Toplam Engelleme Süresi – İlk Giriş Gecikmesi
Daha önce belirtildiği gibi, TBT, gerçek kullanıcı verileri olmadığında, Temel Web Verileri‘nden biri olan İlk Giriş Gecikmesi’nin (FID – First Input Delay) yerine geçer.
FID, ölçmek için gerçek kullanıcı verileri gerektiren yalnızca saha (gerçek dünya, lab değil) ölçüsüdür.
Bu gerçek kullanıcı verileri, Google’ın gerçek dünyadaki Chrome kullanıcılarından toplanan Chrome Tarayıcı davranışı veritabanı olan Chrome Kullanıcı Deneyimi Raporları (CrUX) biçiminde gelir; bu, GTmetrix gibi ölçme araçlarının testlerinde kullanmadığı bir şeydir.
GTmetrix, İlk Giriş Gecikmesi yerine Toplam Engelleme Süresini bildirir.
Bu nedenle, GTmetrix testleri, uygun bir vekil (proxy) olarak hizmet ettiği ve aynı optimizasyonları önerdiği için FID yerine TBT’yi rapor eder.
Toplam Engelleme Süresinin Performans Puanınızda Etkisi
Bir Önemli Web Verileri (Web Vitals) ölçümü olarak TBT, Performans Puanının %25’ini oluşturuyor ve bu da onu optimize edilmesi gereken en önemli ölçümlerden biri yapıyor.
Bu, sayfa hızı analizini tamamlamak için kullanıcı deneyimine daha fazla odaklanmamızı vurgulamaktadır.
Bunun sizin için anlamı şudur:
TBT’nizi optimize etmek, genellikle web sitenizin yanıt verme hızında en etkili iyileştirmelerden birini yapabilir.
Toplam Engelleme Süresi Eşikleri
Toplam Engelleme Süresi, sayfanın kullanıcı girişine yanıt vermesi engellendiğinde FCP ile TTI arasındaki toplam süreyi ölçer ve sonucu milisaniye cinsinden görüntüler.
TBT eşikleri GTmetrix aracında aşağıdaki gibidir:
- İyi, burada yapılacak bir şey yok (150 milisaniye veya daha az)
- Tamam, ancak iyileştirmeyi düşünün (150 ila 224 milisaniye arasında)
- Önerilenden daha uzun (224 ile 350 milisaniye arasında)
- Önerilenden çok daha uzun (TBT 350 milisaniyeden daha yüksek)
Google Lighthouse TBT eşikleri şu şekildedir:
- Hızlı (0-300 ms arası, yeşil renk)
- Orta Hız (300 – 600 ms, turncu renk)
- Yavaş (600 ms’den fazla, kırmızı renk)
Toplam Engelleme Süresi Nasıl İyileştirilir?
Aşağıda belirtilen belirli denetimlerin muhtemelen TBT’nize en çok katkıda bulunduğunu unutmayın; ancak sayfanızın Toplam Engelleme Süresi de burada bahsedilmeyen diğer optimizasyonlardan etkilenebilir.
Toplam Engelleme Süresi, JavaScript performansıyla oldukça ilişkilidir ve JavaScript yürütmedeki herhangi bir iyileştirmenin (genel olarak, TTI’yi iyileştiren optimizasyonlar) TBT’nizi azaltması muhtemeldir.
Bu optimizasyonlardan bazıları şunları içerir:
- JavaScript çalıştırma süresinin kısaltılması
- Ana iş parçacığı çalışmasının en aza indirilmesi
- Kullanılmayan JavaScript’i kaldırma
- Üçüncü taraf kodunun etkisini azaltmak
- Büyük JavaScript kitaplıklarını daha küçük alternatiflerle değiştirme
Önemli web verileri konusunda başka yazılardan örnekler: