WordPress Total Blocking Time (TBT) hatası nasıl düzeltilir?

Total Blocking Time (TBT), bir web sayfasının yüklenme sürecinde, kullanıcı etkileşimine engel olan süreyi ölçen önemli bir performans metriğidir. Bu, sayfa yüklenirken JavaScript gibi betiklerin bloklanması nedeniyle kullanıcının sayfa ile etkileşime giremediği süredir. Yüksek TBT, sayfanın kullanıcı etkileşimine geçmeden önce uzun süre beklemesine neden olabilir, bu da kullanıcı deneyimini olumsuz etkiler ve dolayısıyla SEO’yu da olumsuz yönde etkiler.

TBT hatasını düzeltmek için aşağıdaki adımları izleyebilirsiniz:

1. JavaScript’i Asenkron veya Defer Yüklemek

JavaScript dosyaları, sayfa yüklenmesi sırasında genellikle kaynakları bloklayabilir. JavaScript’in doğru şekilde yüklenmesi, sayfanın hızlıca etkileşime girmesini sağlayacaktır.

• Asenkron Yükleme: JavaScript dosyalarını async etiketi ile yükleyin. Bu, betiklerin sayfa içeriğiyle eş zamanlı olarak yüklenmesini sağlar ve sayfa etkileşime girmeden önce bloklanmaz.
• Defer Yükleme: JavaScript dosyalarını defer etiketi ile yükleyerek, sayfa içeriği yüklendikten sonra betiklerin yüklenmesini sağlayabilirsiniz. Bu, sayfanın daha hızlı yüklenmesine olanak tanır.

2. Kritik JavaScript’i Inline Yükleme

Sayfa üzerinde hemen gösterilmesi gereken öğeleri içeren JavaScript’i inline olarak ekleyerek, dosya yükleme süresini kısaltabilirsiniz. Bu yöntemle kritik JavaScript kodları sayfa ile birlikte yüklenir.

• Inline JavaScript: Sayfanın önemli işlevlerini gerçekleştiren küçük JavaScript kodlarını, dış dosya yüklemek yerine doğrudan HTML içinde yazabilirsiniz.

3. JavaScript ve CSS Dosyalarını Küçültme (Minify)

Büyük JavaScript ve CSS dosyaları, sayfa yükleme süresini artırabilir ve TBT’yi yükseltebilir. Dosyaların küçültülmesi, gereksiz boşlukların ve yorumların kaldırılmasını sağlar.

• JavaScript ve CSS Minification: JS ve CSS dosyalarını minify ederek dosya boyutlarını küçültebilirsiniz. WordPress için Autoptimize veya WP Rocket gibi eklentiler bu işlemi otomatik olarak yapabilir.

4. Kullanılmayan JavaScript’i Kaldırmak

Sayfa üzerinde kullanılmayan JavaScript dosyaları, sayfa yüklenirken zaman kaybına neden olabilir. Bu dosyaların kaldırılması, TBT’yi azaltacaktır.

• Kullanılmayan JavaScript Dosyalarını Kaldırma: Web sitenizde yalnızca gerekli JavaScript dosyalarını yükleyin ve kullanılmayanları kaldırarak sayfa yükleme süresini kısaltın.

5. JavaScript Betiklerini Yerel Olarak Sunmak

Harici JavaScript dosyalarını yerel olarak barındırmak, dosya yükleme süresini azaltabilir. Harici sunuculardan gelen JavaScript dosyaları zaman zaman gecikebilir, ancak yerel olarak barındırmak, sayfa yükleme süresini hızlandırabilir.

• JavaScript’i Yerel Olarak Sunma: Harici kaynaklardan gelen JavaScript dosyalarını yerel olarak barındırarak daha hızlı bir yükleme süreci elde edebilirsiniz.

6. Web Yazı Tiplerinin Yüklenmesini Optimize Etme

Web yazı tipleri, sayfanın ilk içerikleri yüklenmeden önce sayfa üzerinde bekleyen öğelerdir ve bu durum TBT’yi artırabilir. Yazı tiplerini verimli bir şekilde yüklemek, TBT’yi iyileştirebilir.

• Font Display: CSS’de font-display: swap kullanarak, yazı tipleri yüklenene kadar geçici bir font gösterilebilir ve sayfanın daha hızlı yüklenmesine olanak tanınır.
• Font Subsetting: Kullanılmayan karakterleri dışarıda bırakarak yalnızca gerekli olan yazı tipi karakterlerini yüklemek TBT’yi düşürebilir.

7. Görsel Optimizasyonu ve Lazy Load

Görsellerin sayfa yüklenmesini engellemeyecek şekilde optimize edilmesi, TBT’yi azaltabilir. Tembel yükleme (lazy loading) yöntemi, yalnızca görünür olan görsellerin yüklenmesini sağlar.

• Lazy Loading: Görselleri lazy load ederek, yalnızca kullanıcı ekranında görünür hale geldiklerinde yüklenmelerini sağlayabilirsiniz. Bu, sayfa yükleme süresini hızlandırır.

8. Önbellekleme Kullanmak

Önbellekleme, sayfa yüklenme süresini iyileştirebilir ve TBT’yi azaltabilir. İyi yapılandırılmış bir önbellekleme stratejisi, gereksiz kaynakların her seferinde yüklenmesini engeller.

• Önbellekleme Eklentileri: WP Rocket, W3 Total Cache ve LiteSpeed Cache gibi popüler önbellekleme eklentileri kullanarak, sayfa içeriği hızlıca yüklenebilir ve TBT azalabilir.

9. İleri Düzey JavaScript Optimizasyonları

Gelişmiş JavaScript optimizasyon teknikleri, sayfanın interaktif öğelerinin daha hızlı yüklenmesini sağlar.

• Web Workers Kullanımı: JavaScript işlemlerini arka planda yürütmek için web workers kullanabilirsiniz. Bu, sayfa içeriği ile etkileşimi engellemeden, ağır JavaScript işlemlerini çalıştırır.

Total Blocking Time (TBT) hatasını düzeltmek için JavaScript’in doğru şekilde yüklenmesi, gereksiz dosyaların kaldırılması, görsel optimizasyonları ve önbellekleme gibi adımlar oldukça etkilidir. Bu değişiklikler sayesinde, sayfanız daha hızlı yüklenir ve kullanıcı deneyimi iyileşir. Ayrıca, Google’ın Core Web Vitals kriterlerini karşılayarak SEO performansını artırabilirsiniz.

Sık Sorulan Sorular (SSS)

1. TBT süresi ne kadar olmalı?
Google, TBT’nin 300 milisaniye veya daha düşük olmasını önerir. Bu süreyi aşan sayfalar, kullanıcı etkileşimine geçmeden önce daha uzun süre bekler.

2. TBT nasıl ölçülür?
TBT, sayfanın yüklenmesi sırasında, JavaScript gibi kaynakların tarayıcı tarafından engellendiği süreyi ölçer. Google Chrome’daki Lighthouse aracı veya Web Vitals eklentisi ile bu metrik ölçülebilir.

3. JavaScript’i asenkron yüklemek ne gibi faydalar sağlar?
JavaScript dosyalarını asenkron yüklemek, sayfanın hızlıca etkileşime girmesini sağlar ve TBT’yi azaltır. Bu, kullanıcıların sayfa ile daha hızlı etkileşim kurmasına yardımcı olur.