Całkowity czas blokowania (TBT) to jeden z rodzajów danych śledzonych w sekcji Skuteczność raportu Lighthouse. Poszczególne dane rejestrują pewien aspekt szybkości wczytywania strony.
Raport Lighthouse podaje TBT w milisekundach:
Co mierzy TBT
Ta wartość określa łączny czas, w którym strona nie reagowała na działania użytkownika takie jak kliknięcia myszą, dotknięcia ekranu lub naciśnięcia klawiatury. Suma jest obliczana przez dodanie części blokującej wszystkich długich zadań między Pierwsze wyrenderowanie treści i czasem do pełnej interaktywności. Każde zadanie wykonywane przez ponad 50 ms jest długim zadaniem. Element blokujący to czas po 50 ms. Jeśli na przykład Lighthouse wykryje zadanie trwające 70 ms, część blokująca wyniesie 20 ms.
Jak Lighthouse określa wynik TBT
Wynik TBT to porównanie czasu TBT Twojej strony i TB razy liczby milionów prawdziwych witryn wczytywanych na urządzeniach mobilnych. Informacje o tym, jak ustalane są progi wyniku w Lighthouse, znajdziesz w artykule o określaniu wyników danych.
Ta tabela pokazuje, jak interpretować wynik TBT:
| Czas TBT (w milisekundach) |
Oznaczanie kolorami |
|---|---|
| 0–200 | Zielony (szybko) |
| 200-600 | Pomarańczowy (umiarkowany) |
| Ponad 600 | Czerwony (wolno) |
Jak poprawić wynik TBT
Przeczytaj artykuł Co powoduje długie zadania?, aby dowiedzieć się, jak zdiagnozować główną przyczynę długich zadań za pomocą panelu wydajności Narzędzi deweloperskich w Chrome.
Ogólnie najczęstsze przyczyny długich zadań to:
- Niepotrzebne wczytywanie, analizowanie lub wykonywanie kodu JavaScript. Analizując kod w panelu Skuteczność, możesz zauważyć, że wątek główny wykonuje prace, które nie są konieczne do wczytania strony. Zmniejszenie ładunków JavaScript za pomocą podziału kodu, usuwania nieużywanego kodu lub efektywnego wczytywania zewnętrznego kodu JavaScript powinno poprawić wynik TBT.
- Nieefektywne instrukcje JavaScript. Załóżmy np., że po przeanalizowaniu kodu w panelu Wydajność widzisz wywołanie
document.querySelectorAll('a'), które zwraca 2000 węzłów. Refaktoryzacja kodu w celu użycia bardziej szczegółowego selektora, który zwraca tylko 10 węzłów, powinna poprawić wynik TBT.
Jak poprawić ogólny wynik skuteczności
O ile nie masz konkretnego powodu, aby skupić się na konkretnym rodzaju danych, zwykle lepiej jest skupić się na poprawie ogólnego wyniku skuteczności.
W sekcji Możliwości w raporcie Lighthouse znajdziesz ulepszenia, które przyniosą największe korzyści Twojej stronie. Im większe możliwości, tym większy będzie wpływ na wynik skuteczności. Na przykład na poniższym zrzucie ekranu z Lighthouse widać, że największą poprawę można uzyskać, wyeliminując zasoby blokujące renderowanie:
Informacje o tym, jak wykorzystać możliwości zidentyfikowane w raporcie Lighthouse, znajdziesz na stronie docelowej audytów skuteczności.
Zasoby
- Kod źródłowy kontroli Total Block Time (Całkowity czas blokowania)
- Czy długie zadania JavaScript opóźniają czas do trybu interaktywnego?
- Optymalizacja opóźnienia przy pierwszym działaniu
- Pierwsze wyrenderowanie treści
- Czas na interakcję
- Ogranicz ładunki JavaScript dzięki podziałowi kodu
- Usuwanie nieużywanego kodu
- Efektywne ładowanie zasobów zewnętrznych