Toplam Engelleme Süresi (TBT), Lighthouse raporunun Performans bölümünde izlenen metriklerden biridir. Her metrik, sayfa yükleme hızının belirli bir yönünü yakalar.
Lighthouse raporu, milisaniye cinsinden TBT değerini gösterir:
TBT neleri ölçer?
TBT, bir sayfanın fare tıklamaları, ekrana dokunma veya klavyeye basma gibi kullanıcı girişine yanıt vermesinin engellendiği toplam süreyi ölçer. Toplam, İlk Zengin İçerikli Boyama ile Etkileşime Hazır Olma Süresi arasındaki tüm uzun görevlerin engelleme kısmı toplanarak hesaplanır. 50 ms'den uzun süre yürütülen görevler uzun bir görevdir. 50 ms.den sonraki süre engelleme kısmıdır. Örneğin, Lighthouse 70 ms uzunluğunda bir görev algılarsa engelleme kısmı 20 ms olur.
Lighthouse, TBT puanınızı nasıl belirler?
TBT puanınız, sayfanızın TBT süresinin ve mobil cihazlara yüklendiğinde milyonlarca gerçek sitenin TBT ile çarpımının karşılaştırmasıdır. Lighthouse puan eşiklerinin nasıl ayarlandığını öğrenmek için Metrik puanları nasıl belirlenir? bölümüne bakın.
Aşağıdaki tabloda TBT puanınızı nasıl yorumlayacağınız gösterilmektedir:
| TBT süresi (milisaniye cinsinden) |
Renklerle kodlama |
|---|---|
| 0-200 | Yeşil (hızlı) |
| 200-600 | Turuncu (orta) |
| 600'den fazla | Kırmızı (yavaş) |
TBT puanınızı artırma
Chrome Geliştirici Araçları'nın Performans panelini kullanarak uzun görevlerin temel nedenini nasıl teşhis edeceğinizi öğrenmek için Uzun görevlerimin temel nedeni nedir? bölümüne bakın.
Genel olarak, uzun görevlerin en yaygın nedenleri şunlardır:
- Gereksiz JavaScript yükleme, ayrıştırma veya çalıştırma. Performans panelindeki kodunuzu analiz ederken, ana iş parçacığının sayfayı yüklemek için gerçekten gerekli olmayan işler yaptığını fark edebilirsiniz. Kod bölme yöntemiyle JavaScript yüklerini azaltmak, kullanılmayan kodu kaldırmak veya üçüncü taraf JavaScript'i verimli bir şekilde yüklemek TBT puanınızı artırır.
- Verimsiz JavaScript ifadeleri. Örneğin, Performans panelindeki kodunuzu analiz ettikten sonra, 2.000 düğüm döndüren bir
document.querySelectorAll('a')çağrısı gördüğünüzü varsayalım. Yalnızca 10 düğüm döndüren daha spesifik bir seçici kullanmak üzere kodunuzu yeniden düzenlemek TBT puanınızı artıracaktır.
Genel Performans puanınızı artırma
Belirli bir metriğe odaklanmak için belirli bir nedeniniz yoksa genel Performans puanınızı artırmaya odaklanmak genellikle daha iyidir.
Sayfanıza en fazla değer katacak iyileştirmeleri belirlemek için Lighthouse raporunuzun Fırsatlar bölümünü kullanın. Fırsat ne kadar önemliyse performans puanınız üzerindeki etkisi de o kadar büyük olur. Örneğin, aşağıdaki Lighthouse ekran görüntüsünde oluşturmayı engelleyen kaynakların kaldırılması en büyük iyileşmeyi sağlayacağını göstermektedir:
Lighthouse raporunuzda tanımlanan fırsatları nasıl ele alacağınızı öğrenmek için Performans denetimleri açılış sayfasını inceleyin.
Kaynaklar
- Toplam Engelleme Süresi denetiminin kaynak kodu
- Uzun JavaScript görevleri Etkileşime Hazır Olma Sürenizi geciktiriyor mu?
- İlk Giriş Gecikmesini Optimize Etme
- İlk Zengin İçerikli Boyama
- Etkileşime Hazır Olma Süresi
- Kod bölme yöntemiyle JavaScript yüklerini azaltın
- Kullanılmayan kodları kaldırın
- Üçüncü taraf kaynaklarını verimli bir şekilde yükleyin