Total Blocking Time (TBT) Nedir?

Total Blocking Time (TBT) Nedir? sorusu yolumuzu Core Web Vitals setine dahil olmasa da web sitesi sahiplerinin yararlanabileceği önemli metriklerden birine çıkarıyor.

Bilindiği gibi web sayfalarının performansı değerlendirilirken Core Web Vitals (LCP, FID, CLS) ve Non-Core Web Vitals (TBT, FCP, SI, TTI) metriklerinden yararlanılır. Bu metriklerden TBT ve FID; web sayfalarının tepkiselliğini değerlendirirken öne çıkar.

Core Web Vitals

  • LCP (Largest Contentful Paint)
  • FID (First Input Delay)
  • CLS (Cumulative Layout Shift)

Non-Core Web Vitals

  • TBT (Total Blocking Time)
  • FCP (First Contentful Paint)
  • SI (Speed Index)
  • TTI (Time to Interactive)

TBT’nin ne anlama geldiğini, nasıl ölçüldüğünü, neden önemli olduğunu ve nelerden etkilendiğini bilmek kullanıcı deneyimi odaklı çabalarınızı daha anlamlı kılacaktır.

Total Blocking Time (TBT) Nedir?

Toplam Engelleme Süresi ya da Toplam Blokaj Süresi anlamına gelen TBT (Total Blocking Time), bir web sayfasının, sayfa yükleme sırasında tıklamalarla veya klavye tuşlarıyla yapılan kullanıcı girişlerine yanıt vermesi için geçen toplam süreyi milisaniye cinsinden ölçen bir metriktir.

Tarayıcılar; HTML’yi ayrıştırmak, DOM oluşturmak, CSS’i, JavaScript’i yürütmek ve kullanıcı girdilerini işlemek için ana iş parçacığını kullanır. Herhangi bir noktada, uzun bir görev meydana gelirse (bu görevlerden herhangi birinin 50 ms’den fazla sürmesi uzun görev olarak kabul edilir), ana iş parçacığı bloke olur. Bu durumda, tarayıcı görevi durduramaz, kesintiye uğratamaz; tamamlanana kadar kullanıcı girişine yanıt verilmez. Tarayıcı diğer görevler yürütülmekte olduğu için kullanıcı girişine yanıt veremediğinde, kullanıcı bunu gecikme olarak algılar.

Özetle bir butona tıkladığınızda sayfanın cevap vermemesi, bir arama formu doldurmaya çalışırken sayfada bir gecikme algılanması gibi durumlarla 50 ms ‘den sonra geçen süre “engelleme” olarak kabul edilir. TBT, kullanıcının sayfanızla etkileşime girmesini engelleyen TOPLAM süreyi ölçer.

İdeal Total Blocking Time (Toplam Engellenme Süresi) Puanı Nedir?

Yüksek TBT değerleri, web sitesinin kullanıcı deneyimini sorunsuz hale getirmek için gerektiği kadar hızlı tepki veremediğini gösterir.

Düşük bir TBT puanı; ziyaretçilerin gezinirken etkileşim kurabilmeleri için sayfanın hazır ve duyarlı olduğu anlamına gelir.

İyi300 ms’den az
İyileştirme Gerekiyor300 – 600 ms arası
Zayıf600 ms’den büyük

Sayfa yükleme hızlarını optimize ederken, daha hızlı bir kullanıcı deneyimi elde etmek için TBT’yi mümkün olduğunca azaltmak önemlidir. Google’a göre, 300 ms’nin altında TBT değeri elde etmeye çalışmanız önemlidir.

TBT Nasıl Hesaplanır?

Etkileşimli bir sayfa sunmak için tarayıcı, sunucudan gelen yanıtı aşamalı olarak yorumlar. HTML kodunu yükler ve ayrıştırır, CSS ve JavaScript’i getirir ve ardından komut dosyalarını değerlendirir. Bunların tümü, ana iş parçacığını engelleyebilir ve sayfanın kullanıcı girişine yanıt vermemesine neden olabilir. Ana iş parçacığını 50 milisaniyeden fazla meşgul eden bir görev, “uzun görev” olarak kabul edilir ancak, FCP ve TTI arasındaki her bir uzun görevin engelleme süresinin toplamı TTB’yi yani Toplam Engelleme Süresi’ni verir.

TBT değeri, First Contentful Paint (FCP) ve Time to Interactive (TTI) arasındaki tüm uzun görevlerin toplamıyla hesaplanır.

50 ms, Google’ın RAIL modeline güvenmesi nedeniyle TBT için belirlediği süredir. Görevlerin sayısına bağlı olarak, RAIL modeli, bir uygulama 50 ms’de çalışıyorsa, önceki görevlerin işgal edebileceği ek 50 ms’lik bir süreyi göz önünde bulundurmanız gerektiğini varsayar.

Bir görevin çalışması 80 ms sürerse, bu sürenin 30 ms’si TBT’ye eklenir. Bir görevin çalışması 45 ms sürerse, TBT’ye 0 ms eklenir.

Toplam Engelleme Süresi İlk Giriş Gecikmesi olarak da bilinen FID’in laboratuvar verileriyle eşdeğerdir ve First Contentful Paint ve Time to Interactive arasındaki süreyi ölçer.

Total Blocking Time (TBT) Neden Önemli?

Total Blocking Time (TBT) Nedir?
Lighthouse ekibi, kullanıcı tarafından algılanan performans üzerinde hangi metriğin en büyük etkiye sahip olduğunu anlamak için düzenli olarak araştırmalar yaptığından ağırlıklar zamanla değişmiştir. Lighthouse v.6’da TTB’nin ağırlığı %25’ken son versiyonda %30’dur.

Etkileşime geçildiğinde bir web sitesinin yanıt verme hızını ölçmek için kullanılan TTB, Lighthouse v.8’e göre, web sitenizin toplam performansının %30’unu oluşturur.

TBT’nin önemi, optimize ettiğinizde web sitenizin yanıt verme hızında etkili bir iyileştirme yapmanızı sağlamasından kaynaklanır. Çünkü ana ileti dizisi engellenirse sayfanız ekrana dokunma, klavye eylemleri ya da fare tıklamaları gibi kullanıcı girişlerine yanıt veremez.

TBT değerinizi geliştirirseniz, artık resmen sıralama faktörü olarak kullanılan İlk Giriş Gecikmesi değerinizi (FID) de iyileştirmiş olursunuz ki FID; bir web sitesinde örneğin gezinme çubuğundaki sekmelerden birine bastığınızda sitenin yanıt vermesinin 100 milisaniyeden az sürmesini gerektirir. Yüksek FID değeri, genellikle yoğun JavaScript yürütmesinin sonucudur.

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

Total Blocking Time (TBT) Nasıl Ölçülür?
“0” TBT puanı, bekleme süresi olmadığı anlamına gelir.

TBT değeri laboratuvar araçları ile ya da saha araçları ile ölçülür. Neredeyse her iki grupla da benzer sonuçlar alırsınız, ancak her araç farklı şekilde çalışır.

Sonuçların gerçek kullanıcı deneyimlerine dayalı olduğu alan araçlarına PageSpeed Insights, Chrome User Experience Report ve Search Console’u (Core Web Vitals Raporu) örnek verebiliriz.

Laboratuvar araçları arasında ise WebPage Test, ChromeDev Tools ve Lighthouse’u sayabiliriz. Lighthouse, TBT puanını belirlemek için sonuçlarınızı (sayfanızın toplam engelleme süresini) mobil cihazlarda yüklenen en iyi 10.000 web sitesiyle karşılaştırır. Buna 404’ler dahildir.

Total Blocking Time (TBT) Nasıl Optimize Edilir?

Total Blocking Time (TBT) Nasıl Optimize Edilir?
TBT değerinizi geliştirirseniz, artık resmen sıralama faktörü olarak kullanılan İlk Giriş Gecikmesi değerinizi (FID) de iyileştirmiş olursunuz.

Bir ziyaretçi uzun bir görev sırasında sayfayla etkileşime girerse, tarayıcı önceki görevi bitirmeden yanıt veremeyeceği için ziyaretçi kötü bir kullanıcı deneyimine maruz kalacaktır. Genellikle, uzun sürmesi muhtemel görevlerin başında gereksiz JavaScript yükleme, ayrıştırma ve yürütme yer alır. Kodu kaldırarak veya bölerek TBT puanınızı azaltabilirsiniz. Ayrıca;

  • sayfa tarafından yapılan toplam istek sayısını azaltmak,
  • daha az harici CSS kaynağı ve JavaScript kitaplığı kullanmak,
  • 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,
  • CDN kullanmak önerilir.

Tüm tarayıcılar, önce hangi sayfa içeriğinin gösterilmesi gerektiğini belirlemek için verimli bir algoritmaya sahiptir. Ancak geliştiriciler, TBT’yi azaltmak için belirli varlıkları satır içine alarak veya erteleyerek bu süreci etkileyebilir. Geliştiricilerin TBT üzerinde maksimum kontrole sahip olmaları için Google Chrome’da JavaScript’in ertelenmesini devre dışı bırakan bir seçenek de mevcuttur.

CSS’yi satır içine almak, stil bilgilerinin harici olarak ayrı bir dosya olarak depolanması yerine doğrudan bir sayfanın HTML koduna eklenmesi anlamına gelir. Satır içi oluşturmanın harici stil sayfalarına göre avantajları arasında sayfaların daha hızlı yüklenmesini sağlaması ve tekrarlanan stil bilgileri için HTTP isteklerinin azaltılmasına yardımcı olması sayılabilir.

Ancak, tek bir sayfada çok fazla CSS’i satır içine almak, aynı anda çok fazla bilgi işlendiğinde HTML öğelerinin geçersiz hale gelmesine, bozulmasına, oluşturma sorunlarına neden olabilir. Ayrıca, tarayıcı bunları ayrıştırırken CSS seçicilerinin oluşturma işlemlerini yavaşlatabileceğini unutmamak gerekir.

Kullanılmayan CSS ve JavaScript’i kaldırmak sayfa yükleme sürenizin şişmesini engelleyecektir. JavaScript’i bir bütün olarak optimize etmek toplam engelleme sürenizi doğrudan etkiler.

Web sitenize herhangi bir üçüncü taraf hizmeti entegre etmeniz gerektiğinde, bu komut dosyalarının olabildiğince verimli bir şekilde optimize edilmemiş olabileceği de unutulmamalıdır.

Aslında görseller iş parçacığının kendisini engellemez, ancak bant genişliğini rezerve edebilir ve TBT üzerinde çok daha büyük bir etkisi olan komut dosyalarının yüklenme hızını etkileyebilirler. Bu nedenle, görsellerle de ilgilenmeniz önemlidir.

Total Blocking Time (TBT) ile Etkileşim Süresi (TTI) Arasındaki Fark Nedir?

Hemen hemen aynı şeyi yapmalarına rağmen, TBT ile TTI farklı iki metriktir. Etkileşim Süresi (TTI), bir web sayfasının bir kullanıcı için tamamen etkileşimli olması için geçen süredir. Bir web sayfası yüklenirken bir kullanıcı sayfayla etkileşime girmeye çalıştığında, ana iş parçacığı öğeleri ayrıştırmak ve oluşturmakla meşgul olduğundan gecikmeler yaşanır. TBT bu gecikmelerin kullanıcı deneyimi üzerindeki etkisini ölçmek için tasarlanmıştır.

TTI, sayfanız tamamen etkileşimli olduğunda sinyal verir. TBT ise hangi JavaScript görevlerinin yürütülmesinin en uzun sürdüğünü görmenize yarar.

Herhangi bir web sayfasının etkileşimli olarak kabul edilmesi için şunlar gereklidir:

  • Sayfa, faydalı içeriği, yani First Contentful Paint’i (FCP) görüntüler.
  • Olay işleyicileri, görünür sayfa öğelerinin çoğu için kaydedilir.
  • Sayfa, kullanıcı etkileşimlerine 50ms içinde yanıt verir.

Total Blocking Time (TBT) ile First İnput Delay (FID) Arasındaki Fark Nedir?

İlk giriş gecikmesi (FID); sitenizin kullanıcı girişine ne kadar sürede yanıt verdiğini ölçer. Toplam Engelleme Süresi (TBT) ise ana iş parçacığındaki uzun süreli görevlerin bir sayfanın kullanılabilirliğini engellemesini ölçer. FID gerçek bir kullanıcı gerektirir ve bu nedenle laboratuvarda ölçülemez. Ancak, Toplam Engelleme Süresi (TBT) laboratuvarda ölçülebilir.

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, bir web sayfasının tepkisizliğini ölçerken, bunu bir kullanıcıdan herhangi bir girdi almadan yapar ve ana iş parçacığını engelleyen tüm uzun görevleri özetler.

Toplam Engelleme Süresi (TBT) ve Etkileşim Süresi (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. Ancak, bunlar sahada ölçülemedikleri ve kullanıcı merkezli bir sonucu yansıtmadıkları için Temel Web Verileri olarak bilinen Core Web Vitals kümesine dahil değildirler.

Kod bölme ve uzun görevlerinizi bölme gibi adımlar FID değerini gözle görülür şekilde geliştirecektir. TBT bir alan ölçümü olmasa da hem Etkileşim Süresini (TTI) hem de FID’i iyileştirmek için kullanışlıdır.

JavaScript boyutu şişkinliği, yoğun yürütme süreleri ve verimsiz yığınlama bir sayfanın kullanıcı girişine vereceği yanıtı yavaşlatabilir, FID’i, TBT’yi ve TTI’yi etkileyebilir. Bu noktada, kodun ve özelliklerin aşamalı olarak yüklenmesi işe yarayabilir.

Özet

Total Blocking Time (TBT), sayfa yükleme hızlarını optimize ederken etkileşimi etkileyen sorunları yakalamak için kullanılan bir metriktir. Ancak sahada ölçülemediği ve kullanıcı merkezli bir sonucu yansıtmadığı için Temel Web Verileri olarak bilinen Core Web Vitals kümesine dahil değildir.

Web sitesi performansını iyileştirme konusunu bir sayı oyunu olarak görmemek önemlidir. Web sitenizi sağlıklı tutmak için performansını sürekli takip etmeniz, yeni eklentiler, kitaplıklar ve hizmetler konusunda akıllıca seçimler yapmanız ve bunların söz konusu puanları nasıl etkilediğini izlemeniz önerilir. Sonuç olarak kullanıcı odaklı bir yaklaşım sergilemenin, uzun vadede iyi puanlar elde etmek için etkili bir strateji olduğunu söyleyebiliriz.