Total Blocking Time (TBT) Nedir, Nasıl Optimize Edilir: Kapsamlı Rehber

Last Updated on 15 Ağustos 2021 by Yıldırım SERTBAŞ

Literatürde Total Blocking Time yani Toplam Engelleme Süresi olarak geçen metriğin ne olduğunu ve sitenizin performansını nasıl etkilediğini mi merak ediyorsunuz? Doğru yerdesiniz.

Kullanımı kolay ve hızlı web sitelerini hepimiz severiz. Harika bir kullanıcı deneyimi sağladığınızdan emin olmak için odaklanmanız gereken birkaç metrik vardır ve TBT bunlardan biridir.

Daha da önemlisi, bir kullanıcı deneyimi metriği olarak Toplam Engelleme Süresi(Total Blocking Time), Lighthouse tarafından hesaplanan toplam performans puanının %30’unu elinde tutuyor . Bu, onu optimize etmek için çok değerli bir metrik yapmaya değiyor! 

Toplam engelleme süresinin ne olduğunu, nasıl ölçüleceğini ve bu süreyi hangi faktörlerin etkilediğini ayrıntılı olarak açıklayacağım. 

Genel performans puanınızı iyileştirmek ve ziyaretçilerinizi iyi bir deneyim yaşatmamak için kötü bir Total Blocking Time derecesini (300 ms’den uzun TBT) iyileştirmeye yönelik bazı ipuçlarını da paylaşacağım. 

Total Blocking Time (TBT) Nedir?

Total Blocking Time (TBT), long taskların (50 ms’den uzun tüm işlemler) ana iş parçacığını engellediği ve bir sayfanın kullanılabilirliğini etkilediği süredir. Bir sayfanın tamamen etkileşimli hale gelmeden önce ne kadar tepkisiz olduğunu gösterir.

ana iş parçacığı görevleri

Bir görev uzunluğu, 50 ms’yi aştığında First Contentful Paint (FCP) ile Etkileşim Süresi (TTI) arasındaki tüm zaman periyotlarının toplamıdır. Skor her zaman milisaniye cinsinden ifade edilir. Lighthouse tarafından gerçekleştirilen toplam performans notunuzun %30’unu oluşturur.

Lighthouse Scoring Calculator TBT'nin ağırlığı

Lighthouse, geliştiricilere web sayfalarının kalitesini iyileştirmede yardımcı olan açık kaynaklı, otomatik bir araçtır. Araç , Core Web Vitals , Hız Endeksi(Speed İndex), TTI etkileşime geçme süresi ve toplam engelleme süresi(total blocking time) dahil olmak üzere nihai performans puanınızı oluşturmak için altı metriği dikkate alır.

MetrikAğırlık Oranı(%)İyi Skor
First Contentful Paint%100-2sn
Speed Index%100,4-3sn
Largest Contentful Paint%250-2,5sn
Time to Interactive%100-5sn
Total Blocking Time%30<300ms
Cumulative Layout Shift%150-0,1sn

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

Bir sayfanın bir kullanıcı işlemine yanıt vermesinin engellendiği toplam süreyi hesaplayarak TBT puanını ölçebilirsiniz. Toplam, First Contentful Paint (FCP) ile etkileşime geçme süresi (TTI) arasındaki tüm uzun görevlerin engelleme süresi eklenerek hesaplanır. 

Daha iyi anlatayım.

Google TBT’yi Nasıl Ölçer?

Her tarayıcının, kodu bir web sayfasına dönüştüren bir işlemi vardır. Tüm kodu ve stilleri işleme eyleminin etkili olması gerekiyor çünkü sayfamızın ziyaretçi için mümkün olduğunca çabuk oluşturulmasını istiyoruz. (Unutmayın, iyi bir izlenim bırakmak ve kullanıcıya web sitemizin ne kadar hızlı olduğunu göstermek istiyoruz!)

Tarayıcının, HTML komut dosyasını ayrıştırma, bir web sayfasının (DOM) yapısını ve içeriğini oluşturma ve CSS ve JS kodunu yürütme gibi sayfayı oluşturana kadar tamamlaması gereken birçok görevi vardır.

ana iş çekirdeği yapılacaklar listesi

Ana iş parçacığında çalışan dört görevimiz olduğunu varsayalım.

Birinci görev 260ms, görev iki – 30ms, görev üç – 100ms ve görev dört – 60ms sürsün.

TBT’yi hesaplamak için iki şeye ihtiyacımız var:

  • Her görevin engelleme süresini hesaplayın
  • Tüm sonuçları bir araya getirin
  • Unutmayın, yalnızca 50ms’nin üzerindeki süre engelleme süresi olarak kabul edilir.

Bu nedenle, görev bir 260 ms uzunluğundadır ve 210 ms’lik kısmı bloke edilir. İkinci görev 50 ms’den az sürer, bu nedenle TBT’ye katkıda bulunmaz. Görev üç, 100ms uzunluğunda, 50ms’si engelliyor. Ve görev dört, 60ms uzunluğunda, 10ms engelliyor.

ana iş çekirdeği yapılacaklar listesi-2

210ms, 50ms ve 10ms ekleyerek TBT’mizi elde ederiz. Bizim durumumuzda, TBT bu örnek için 270 ms’dir.

Yüksek bir engelleme süresinden kaçınmak için tarayıcı, kodu ayrıştırırken ve sayfayı oluştururken JS ve CSS dosyalarıyla karşılaşmamalıdır. Web sitenizin hızlı çalışmasını sağlamak için tarayıcıya neye öncelik vermek istediğimizi ve önce neyi yüklemek istediğimizi “söylemeliyiz”.

Uzun Görevleri Anlamak(Long Tasks)

Görevler 50 ms’den uzun sürerse, long task olarak adlandırılır ve “engellenmiş” olarak kabul edilir. 

Böyle bir durumda sayfanız ekrana dokunma, klavyeye basma, fare tıklaması gibi kullanıcı girişlerine yanıt vermez hale gelir. 

Toplam engelleme süresinin hesaplanması, bu uzun görevlere dayalıdır . Uzun görev, web tarayıcısını önemli ölçüde eline alır ( > 50 milisaniye ) ve diğer temel görevlerin (bir fare tıklamasıyla kullanıcı eylemlerine tepki verme gibi) performansını engeller. 

Uzun görev olduğunda ana iş parçacığı “engellenmiş” olarak kabul edilir . Bilgisayar bu aralığı her istek için ayrı bir engelleme süresi olarak kaydeder. Tüm bireysel engelleme sürelerinin toplamına toplam engelleme süresi denir.

Bir örnek görelim. Lighthouse her Uzun Görev (>50 ms) algıladığında , engelleme süresini de ölçer: 

Total-Blocking-Time-Örnek

Gördüğünüz gibi, Total Blocking Time, farklı uzun görevlerin “engelleme” bölümünün eklenmesiyle hesaplanan bir toplamdır. Uzun görevin engelleme kısmı, süresinin 50 ms’den sonraki kısmıdır (tablomuzda kırmızı renkte).

TBT’yi tanımlamak için başka bir sürecin analizini görelim: 

  • Aşağıdaki zaman çizelgesinde beş görev vardır ve üçü uzun görevdir. (süre >50 ms):
ana iş parçacığı görev zaman çizelgesi
  • Sonraki grafik, sırasıyla 200 ms, 40 ms ve 105 ms olmak üzere uzun görevlerin her biri için engelleme süresini gösterir (Toplam: 345 ms):
her uzun görev için tbt'yi tanımlama

TBT : FCP ve TTI arasında meydana gelen her uzun görev (>50ms) için engelleme süresinin toplamı. 

FCP : Tarayıcı tarafından yüklenecek ilk içerik. Her şey kullanıcının hız algısı ile ilgilidir.

TTI : Koşullar göz önüne alındığında, etkileşimin en az 5 saniye boyunca tatmin edici bir şekilde gerçekleşebileceği süredir.

Toplam Engelleme Süresini Ölçmek Kullanılan Araçlar

Lighthouse teknolojisini kullanarak TBT’yi ve performansınızı ölçmek için iki farklı araç öneriyorum.

  • Google PageSpeed ​​Insight (PSI):
pagespeed insight ile tbt ölçme
  • GTMetrix:
gtmetrix ile tbt ölçme

Her iki araç da bir TBT puanı sağlar, ancak kimi zaman iki araçtan da farklı sonuçlar alabilirsiniz.(Benim sitemde engelleyen bir uzun görev olmadığı için ikisinde de sıfır olarak görülüyor). Bu, temel olarak Lighthouse uygulamasının, test metodolojisi, test yeri vb. dahil olmak üzere çeşitli faktörlerden kaynaklanmaktadır. 

İyi Bir Total Blocking Time (TBT) Puanı Nedir?

İyi bir kullanıcı deneyimi sağlamak için her zaman 300 ms’den daha az bir TBT’ye sahip olmaya çalışmalısınız. TBT puanınız, sayfanızın TBT süresi ile mobil veya masaüstüne yüklendiğinde yüksek dereceli binlerce sitenin TBT sürelerinin bir karşılaştırmasıdır. 

Puanlama şu şekilde sınıflandırılır:

  • Yeşil: 0-300ms (Hızlı)
  • Turuncu: 300-600ms (Orta)
  • Kırmızı: 600+ms (Yavaş)
TBT-skorları

Toplam engelleme süresi genellikle FID (İlk Giriş Gecikmesi) metriğiyle ilişkilendirilir. Neden olduğunu aşağıda görelim. 

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

Toplam engelleme süresi, gerçek dünyadaki kullanıcılar olmadan hesaplanabilirken, İlk Giriş Gecikmesi (FID), hesaplamalar için gerçek kullanıcı verilerini gerektiren, yalnızca alana yönelik bir ölçümdür. 

FID hesaplaması laboratuvar ortamında simüle edilemez. Bu veri biçimi, toplanan verilerin gerçek dünyadaki kullanıcılardan olduğu Chrome kullanıcı deneyimi raporları (CrUX) gibi birden çok kaynaktan gelir. 

Web siteniz FID puanını hesaplamak için yeterli “gerçek” veriye sahip olmadığında, alternatif, laboratuvar verileri bölümünde ölçülen TBT metriğine bakmaktır . Laboratuvar verileri, sabit bir dizi ağ koşuluna dayalı olarak tek bir cihazdan yapay ve toplanmış verilere sahiptir. 

Farklı bir şekilde, hem TBT hem de FID etkileşimi ölçer ve bir kullanıcının sitenin etkileşimi ve yanıt verebilirliğine ilişkin ilk izlenimini yakalar. 

Örneğin, GTmetrix, uygun proxy’lerle neredeyse aynı optimizasyonları teşhis ettiği için FID yerine TBT’yi test eder:

gtmetrix fid yerine tbt skorunu ölçmesi

Toplam engelleme sürenizi optimize ederek , Core Web Vitals metriklerinden biri olan İlk Giriş Gecikmesi(FID) puanını da iyileştireceksiniz. Bu iki değerin arasında pozitif bir korelasyon vardır. Tabii bunun tersi de doğrudur.

FID’nizi 100 ms’nin altında tutarsanız, harika durumdasınız: 

FID-skorları

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

Temel fark, etkileşim süresinin bir sayfanın tamamen etkileşimli hale gelmesinin ne kadar sürdüğünü ölçerken , toplam engelleme süresinin size hangi JS görevlerinin yürütülmesinin en uzun sürdüğünü söylemesidir .  

Etkileşim süresi, sayfa etkileşiminizle ilgili başka bir ölçümdür. Web sitenizin performansını ölçmek için Lighthouse raporunda izlenen altı ölçümden biridir. 

Bazı siteler gerçek etkileşim pahasına içerik görünürlüğüne odaklandığından TTI’yi ölçmek hayati önem taşır . Bu sinir bozucu bir kullanıcı deneyimi yaratabilir: kullanıcı sitenin hazır olduğunu düşünür, ancak bir yere tıklamaya çalıştığında hiçbir şey olmaz. 

TTI (aşağıda turuncu renkte), ana iş parçacığı yaklaşık 5 saniye boyunca uzun görevlerden arındırılmışsa, bir sayfayı tam etkileşimli olarak işaretler. 

İşte size bir test. Aşağıdaki resimde, ne zaman etkileşime geçebileceğinizi hissediyorsunuz? Mavi düğme aklınızda ne zaman “tıklanabilir” hale gelir? 

TTI ve etkilesimin aciklanmasi
TTI ve Etkileşimin Açıklanması – Kaynak: dev.to

İyi bir kullanıcı deneyimi sağlamak için 5 saniyeden daha kısa bir etkileşim süresine sahip olmaya çalışmalısınız.

Toplam Engelleme Süresinin(TBT) Performansa Etkisi Nedir?

TBT’nin performans üzerindeki etkisini anlamak için Lighthouse skoru üzerindeki ağırlığını bir kez daha vurgulamalıyım.

Bir kullanıcı deneyimi metriği olarak TBT, artık toplam performans puanının %30’unu elinde tutuyor. TBT, Lighthouse v5’te yoktu, ancak şimdi Lighthouse v8’deki toplam notun %30’unu temsil ediyor .

TBT, web sayfanızın tamamen engellendiği toplam süreyi ölçer ve kullanıcının sayfanızın bölümleriyle etkileşime girmesini engeller. Sayfanızın kullanılabilir olup olmadığını belirlediği için önemli bir laboratuvar metriğidir. 

TBT’nizi 300 ms’nin altında tutmak için izlemeniz gereken birkaç temel ilke vardır, ancak önce kötü bir TBT’nin nedenlerine bir göz atalım.

Yüksek Total Blocking Time’ın Sebebleri Nedir? 

300 ms’den daha uzun bir TBT puanı belirleyen dört neden vardır, yani:

  1. Dağınık bir JavaScript kodu ve kullanılmayan JS 
  2. Yüksek bir JS yürütme süresi
  3. Yüksek bir ana iş parçacığı çalışması
  4. Üçüncü taraf kodunun yoğun kullanımı 

Lighthouse raporunuzun fırsatlar ve teşhisler bölümüne gitmek, uygulayabileceğiniz çözümleri belirlemenize yardımcı olacaktır:

fırsatlar ve teşhisler

Rapor, her bir hatanın tahmini tasarruflarınız üzerinde ne kadar etkisi olduğunu gösterir; bunları çözmek, TBT’nizi ve sitenizin performansını büyük ölçüde artıracaktır. 

TBT puanınızı yükseltmek istiyorsanız ele almanız gereken PageSpeed ​​Insights önerilerinin listesi budur.

  • Kullanılmayan Javascript’i kaldırın (veya azaltın)
  • Javascript yürütme süresini azaltın
  • CSS ve JS’yi küçültün
  • Oluşturmayı engelleyen kaynakları ortadan kaldırın
  • Üçüncü taraf kodunun etkisini azaltın
  • Metin sıkıştırmayı etkinleştirin
  • Kritik istek zincirlerinden kaçının
  • Büyük ağ yüklerinden kaçının
  • Ana iş parçacığı çalışmasını en aza indirin

Total Blocking Time Nasıl Azaltılır?

300 ms’den uzun TBT puanınızı düzeltmek için, kaynaklarınızın sırasına ve yükleme tercihlerine, ayrıca isteklerin sayısına ve boyutuna odaklanmalısınız. WordPress sitenizde toplam engelleme süresini azaltmanın en etkili yolu JavaScript dosyalarını (üçüncü taraf kodu dahil) optimize etmektir.  

Önemli: JS’nin yürütülmesine yönelik herhangi bir iyi önlem, büyük olasılıkla TBT’yi azaltacaktır.

Toplam engelleme süresini düzeltmek ve WordPress sitenizin hızını artırmak istiyorsanız uygulamanızı önerdiğimiz sekiz performans optimizasyonu vardır.

  1. JS’yi ertele
  2. JS’yi geciktir
  3. DNS isteklerini önceden getir(Prefetch DNS)
  4. JS’yi küçült
  5. GZip sıkıştırmayı kullan
  6. CSS dosyalarını küçült 
  7. CSS teslimini optimize et
  8. Sunucu yanıt süresini ve ilk bayt süresini (TTFB) azalt

1. JS’yi erteleyin

JS defer olarak da bilinen JS’yi erteleme, JS yüklemesini belirli bir zamana kadar geciktirmek anlamına gelir.

Bu durumda, tarayıcı en alakalı içeriği görüntüledikten sonra JS dosyaları yüklenecektir. JavaScript dosyalarını erteleyerek JavaScript’inizin daha hızlı yüklenmesini sağlayabilirsiniz. Bu, WordPress sitenizin performansını artırmak için paha biçilmezdir. 

JS dosyalarının ayrıştırılması, derlenmesi ve çalıştırılması için harcanan sürenin azaltılması da TBT’nin iyileştirilmesine yardımcı olur. 

Tanılama bölümündeki Lighthouse sorunu: “ Oluşturmayı engelleyen kaynakları ortadan kaldırın ”, “ Kullanılmayan JavaScript’i kaldırın ” ve “Kritik istekleri zincirlemeden kaçının” önerilerini ele alır.

✅ Manuel Çözüm: 

  • Ertele özelliğini kullanın: JS erteleme çalışırken HTML komut dosyası etiketi için boolean özelliği olan “defer” kullanabilirsiniz:
    <script src =”code.js” erteleme> </ script>

 JS dosyaları yalnızca sayfanın geri kalanı yüklendikten sonra yürütülür.

defer özelliği

✅ Bir WordPress eklentisi kullanın: 

  • Asset CleanUp : Bu ücretsiz eklenti, sayfaya yüklenecek içeriği tarar ve algılar. Bir sayfayı düzenlerken yapmanız gereken tek şey, kullanışlı olmayan CSS veya JS kodunu seçmektir. 
    Önemli Not: Eklenti yazarı, en iyi sonuçları almak için Asset CleanUp’ı WP Rocket gibi bir önbellek eklentisiyle kullanmanızı önerir. 
  • WP Rocket , JavaScript’in ayrıştırılmasını erteleme ve JS WordPress dosyalarını erteleme seçeneğine sahiptir:
ertelenmiş js

2. JS Geciktirme

Gecikmeli JavaScript yürütme, ekrana dokunma, kaydırma veya bir düğmeyi tıklama gibi bir kullanıcı etkileşimi gerçekleşene kadar tüm JS dosyalarının yüklenmesini geciktirerek performansı ve TBT’yi iyileştirir. 

Tanılama bölümündeki Lighthouse Sorunu:  “Kritik istekleri zincirlemeden kaçının” önerisini ele alır.

  • JS’de bir gecikme yaratmanın manuel yolu, setTimeout () yöntemini kullanmaktır. Bu, ms cinsinden belirteceğiniz süreden sonra bir işlevi çağırır . Herhangi bir JS işlevini geciktirmek için çok yararlı kod parçacıkları bulabilirsiniz , ancak işte izleyebileceğiniz bir örnek: 

✅ Manuel Çözüm:

Aşağıdaki senaryoyu gerçekleştirmek istediğinizi varsayalım: 

“Kullanıcı bir düğmeye tıklar → 2 saniye bekler → sayfada “Merhaba, Nasılsınız?” mesajı görüntülenir:

<button onclick=”setTimeout(myFunction, 2000)”>Deneyin</button>

<script>

function myFunction() {

  alert(‘Merhaba, Nasılsın?’);

}

</script>

✅  Bir WordPress eklentisi kullanın:

  • Flying Scripts : JS’yi geciktirmek ve kritik JS dosyalarına daha fazla kaynak sağlamak için bir eklentidir. Önceliklendirmeye yardımcı olur. 
  • WP Meteor : JS komut dosyalarını ertelemek ve ziyaretçiler tarafından algılanan hızı büyük ölçüde geliştirmek için bir eklentidir. (kullanıcı deneyimi için çok önemlidir).
  • Gonzales : ziyaret ettiğiniz sayfaya bağlı olarak CSS, JS ve hatta eklentileri koşullu olarak devre dışı bırakmanıza izin verir.
  • Asset CleanUp (yukarıdaki bölümde bahsedilmiştir).
  • WP Roket önbellek eklentisi : Bu oldukça kestirme bir yoldur. JS dosyalarını tek bir tıklamayla kolayca geciktirebilirsiniz.  
js delay - js geciktirme

3. DNS İsteklerini Önceden Getirin

DNS-prefetch, kaynaklar istenmeden önce alan adlarını çözme girişimidir.

Ne zaman yararlıdır? Web sitenizde Vimeo gibi video sitelerine ait veya bazı Google yazı tiplerinde barındırılan bir video gibi bir üçüncü taraf kodunuz varsa oldukça yararlıdır.

DNS-prefetch, başka bir web sitesinden gelen yükleme süresini ve kaynakları en aza indireceği için web sitenize biraz destek verebilir. Başka bir deyişle, DNS-prefetch, üçüncü taraf komut dosyalarına erken bağlantı kurmanıza, gecikmeyi azaltmanıza ve daha verimli sonuçlar almanıza olanak tanır.

Tanılama bölümündeki deniz feneri sorunu:  “Üçüncü taraf kullanımını en aza indirin” ve “Gerekli kaynaklara önceden bağlanın” önerilerini ele alır. 

✅ Manuel Çözüm: 

  • “head” bölümünde “rel=dns-prefetch” kullanın. Başka bir deyişle, tarayıcının ön getirmesi için etki alanını manuel olarak belirleyebilirsiniz:

    <link rel=”dns-prefetch” href=”//alaniniz.com”>

✅  Bir WordPress eklentisi kullanın:

  • Perfmatters eklentisi , DNS önceden getirme seçeneklerine sahiptir
  • WP Rocket eklentisinin WordPress panosunda ayrıca bir “DNS İsteklerini Önceden Getirme” bölümü vardır. Bu bölümde varsayılan olarak birçok popüler servisin alan adları sizin için önceden eklenmiştir.
wprocket dns prefetch

4. JS’yi küçültün

Kodunuzu küçültmek, her türlü dağınıklığı ve gereksiz noktalama işaretlerini ortadan kaldırmak anlamına gelir: yeni satırlar, boşluklar, vb.

Her zaman gerekli olmayan ve çok zaman harcayan, web sayfanızın yüklenmesini engelleyen bir tür içeriğe sahip olabilirsiniz. Komut dosyanızdan bu tür ‘ölü kodu’ kaldırarak, ana iş parçacığının birçok önemli göreve odaklanması için zaman kazanırsınız.

Tanılama bölümündeki Lighthouse sorunu:  “ JavaScript Yürütme Süresini Azalt ”, “ Ana iş parçacığı çalışmasını en aza indir ” ve “JS’yi küçült ” önerilerini ele alıyor.

✅  Manuel Çözümler:

  • Sitenizin yedeğini alın veya JS dosyalarınızı doğrudan bir üretim sunucusunda düzenlemeyin. 
  • Sublime Text veya Visual Studio Code gibi bir metin düzenleyici kullanın . Örneğin, kodunuzu Google Docs’u kullanarak düzenlemenizi önermiyoruz.(bazı ekstra biçimlendirmeler ekler)
  • Kodunuzu içeren dosyayı açın ve yorumları, boşlukları, yeni satırları ve girintileri kaldırın. Kimlik, sınıf veya değişken adlarını olabildiğince kısaltmayı ve koşullu ifadenizi optimize etmeyi unutmayın. 

✅  Bir WordPress eklentisi kullanın:

  • Google’ın kendisi tarafından geliştirilen Closure Compiler kullanın ! JS sıkıştırmasına yardımcı olur.
  • Autoptimize eklentisi ayrıca JS’yi küçültmenize yardımcı olabilir.
  • WP Rocket , JS dosyalarınızı tek bir tıklamayla küçültmenize olanak tanır. 
js küçültme

5. GZIP Sıkıştırmasını Kullanın

GZIP sıkıştırması, sunucudan ziyaretçinin tarayıcısına gönderilen dosyaların daha küçük (ve web sitenizin daha hızlı!) olması için kodunuzun sıkıştırılmasını sağlar! ve sonuç olarak performansı artırır.

Tanılama bölümündeki Lighthouse sorunu:  “Metin sıkıştırmayı etkinleştir” önerisini ele alır.

✅  Bir WordPress eklentisi kullanın: 

  • GZIP Sıkıştırmayı Etkinleştir eklentisi, WordPress sitenizde Gzip sıkıştırmasını etkinleştirme ve devre dışı bırakma olanağı sunar.
  • WP Rocket , GZIP sıkıştırmasını otomatik olarak etkinleştirir.

6. CSS Dosyalarını Küçültün

Bu, yorumları, gereksiz kodları ve boşlukları kaldırarak dosya boyutlarınızı düşürür. Buradaki fikir, mümkün olduğu kadar çok zaman azaltmak istemenizdir ve bu özellikler sayfayı çalıştırmak için gerekli değildir. Bunu yapmak, CSS yükünü ve genel ayrıştırma süresini azaltacaktır. 

Teşhis bölümünden Lighthouse sorunu:  “ Ana iş parçacığı çalışmasını en aza indir ” ve “CSS’yi küçült ” önerilerini ele alıyor.

✅  Manuel Çözümler (daha fazla ayrıntı için lütfen yukarıdaki JS bölümüne bakın) :

  • Sitenizin yedeğini alın veya CSS dosyalarınızı doğrudan bir üretim sunucusunda düzenlemeyin. 
  • Sublime Text veya Visual Studio Code gibi bir metin düzenleyici kullanın . 

✅  Bir web aracı kullanarak: 

  • minifycode.com’a gidin ve CSS minifier sekmesine tıklayın.
  • CSS kodunu giriş kutusuna yapıştırın ve CSS’yi Küçült düğmesini tıklayın.

✅  Bir WordPress eklentisi kullanın: 

  • Autoptimize
  • WP Super Minify 
  • CSS Nano
  • CSS’nizi tek bir tıklamayla küçültmenize yardımcı olan WP Rocket önbellek eklentisi
wp rocket css dosyalarını küçültme

7. CSS Teslimatını Optimize Edin

Ana iş parçacığının küçültülmesi, tarayıcınızın web sayfasının verimli çalışması için gereken diğer görevleri yerine getirmesini sağlar. CSS ayrıştırma gibi bazı olaylar, ana iş parçacığının diğer görevleri ve işlemleri gerçekleştirmesini engelleyebilir. Bu nedenle, CSS’nin sunulma şeklini optimize etmek çok önemlidir. 

Teşhis bölümünden Lighthouse sorunu:  “ Ana iş parçacığı çalışmasını en aza indir ” önerisini ele alıyor.

✅  Manuel Çözümler: 

  • CSS komut dosyalarınızı birleştirin ve sıkıştırın
  • Ekranın üst kısmındaki içerik için CSS kurallarına öncelik verin
  • HTML gövdesinde STYLE etiketlerini kullanmaktan kaçının

✅  Bir WordPress eklentisi kullanın: 

  • WP Roket önbellek eklentisi tek tıklamayla CSS yayınını optimize yardımcı olur. 
wp rocket css teslimini iyileştirme

8. Sunucu Yanıt Süresini ve Süresini İlk Bayta (TTFB) Düşürün 

TBT puanını yükseltmek için sunucunuzun hızlı olması ve TTFB’nizin optimize edilmesi gerekiyor.

Tanılama bölümünden Lighthouse sorunu:  “ İlk sunucu yanıt süresini azaltın ” önerisini ele alır.

✅  Gelişmiş bir önbellek eklentisi ve bir CDN kullanın :

  • WP Rocket önbellek eklentisi ve RocketCDN , TBT puanını düşürmenize yardımcı olacaktır.

WP Rocket ile TBT Puanı Nasıl İyileştirilir?

Daha önce de belirtildiğim gibi , JavaScript’in yürütülmesi TBT metriğini etkileyen en önemli faktördür. WP Rocket kullanarak JavaScript’i geciktirerek ve erteleyerek , WordPress sitenize hız artışı sağlayabilirsiniz.

TBT’nin etkisini azaltmak ve puanını yükseltmek için birkaç WP Roket özelliğini kullanabilirsiniz.

WP Roket Özelliklerini Etkinleştirme

WP Rocket’i etkinleştirdikten sonra WordPress sitemin ayarlar bölümüne gittim ve aşağıdaki seçenekleri etkinleştirdiğimden emin oldum:

1. JS dosyalarının optimizasyonu (Erteleme ve Gecikme)

ertelenmis js
js delay js geciktirme

2. CSS dosyalarının optimizasyonu

wp rocket css dosyalarini kucultme
wp rocket css teslimini iyilestirme

3. Önceden getirilecek URL’ler

wprocket dns prefetch

4. Yazı tiplerini önceden yükleyin

Lighthouse ayrıca web sitesinde kullanılan yazı tipleri ve simgelerle ilgili bir performans sorunu buldu. WP Rocket “Yazı tiplerini önceden yükle” sekmesini kullanarak düzelttim.

  • Sorunları içeren URL’leri belirlemek için PSI’daki “Anahtar İsteklerini Önceden Yükle” bölümünü genişletin. 
  • Lighthouse tarafından sağlanan URL’leri kopyalayın.
  • Bunları WP Rocket panonuzdaki “Yazı Tiplerini Önceden Yükle” bölümüne yapıştırın.
yazı tiplerini önyükleme

Üstesinden gelinen ana zorlukları vurgulamak için denetimimi aşağıdaki tabloda özetledim:

Total Blocking Time’ı Etkileyen Lighthouse Önerileri WP Rocket Çözebiliyor mu?
JS ile ilgili sorunlar: Oluşturmayı engelleyen kaynakları ortadan kaldırın ve kullanılmayan Javascript’i kaldırınEvet – Birkaç tıklamayla JS’yi erteleyip geciktirecek ve kodu temizleyeceksiniz.
CSS’yi küçültün ve CSS dağıtımını optimize edin.Evet – CSS’yi küçülterek ve CSS Teslimatını Optimize Et seçeneğini kullanarak, ilgili PSI önerisini ele alabilirsiniz.
Üçüncü taraf kullanımını en aza indirin ve gerekli kaynaklar için preload kullanınEvet – Prefetch DNS özelliğini kullanabilirsiniz.
JS Yürütme Süresini AzaltınEvet – Birkaç tıklamayla JavaScript’i küçültecek, geciktirecek ve erteleyecek ve JS yürütme süresini iyileştireceksiniz.
Ana iş parçacığı çalışmasını en aza indirinEvet – JS ve CSS’yi erteleyerek, erteleyerek ve küçülterek PSI önerisini çözeceksiniz.
İlk sunucu yanıt süresini azaltınEvet – Önbelleğe alma ve bir CDN kullanarak, İlk Bayt Süresini azaltırsınız.

Sonuç

Umarım bu rehber, bazı somut adımlar kullanarak WordPress siteniz için Total Blocking Time puanınızı nasıl optimize edeceğinizi anlamanıza yardımcı olmuştur. 

Toplam engelleme süresi, Lighthouse performans derecesinin %30’unu oluşturduğundan, kullanıcı merkezli önemli bir performans metriğidir. Yavaş bir web sitesi, potansiyel ziyaretçileri ve müşterileri uzaklaştırabilir, sitenizin kullanıcı deneyimine (UX) zarar verebilir ve hatta SEO’nuzu etkileyebilir. 

Yorum yapın