⚙️ Jak rozwiązać problem "Total Blocking Time" (TBT): Optymalizacja wykonywania JavaScriptu.

Total Blocking Time (TBT) to kluczowy wskaźnik laboratoryjny w Google PageSpeed Insights, który mierzy czas, przez jaki główny wątek przeglądarki jest zablokowany i nie może reagować na działania użytkownika. Wysokie TBT jest bezpośrednim sygnałem problemów z interaktywnością i jest silnie skorelowane z wysokim First Input Delay (FID) w świecie rzeczywistym. Głównym winowajcą wysokiego TBT jest zazwyczaj intensywne i długotrwałe wykonywanie kodu JavaScript.

1. 🔍 Diagnozowanie Wpływu JavaScriptu na TBT

Zanim zaczniesz optymalizować, musisz wiedzieć, które skrypty i zadania generują największe opóźnienia.

1.1. Użycie Chrome DevTools

**Raport PSI:** PageSpeed Insights wskazuje TBT i zaleca redukcję czasu wykonywania JS w sekcji "Diagnostyka". **Narzędzie Performance:** Użyj panelu **Performance** w Chrome DevTools, aby nagrać proces ładowania. Wykres pokaże "Long Tasks" (długie zadania, trwające dłużej niż 50 ms), które blokują główny wątek. Te zadania są głównym źródłem TBT. **Identyfikacja:** Zidentyfikuj źródła tych długich zadań – często są to duże biblioteki, widżety analityczne lub reklamy.

2. 🧱 Code Splitting – Podział Kodu

Jedną z najskuteczniejszych metod redukcji TBT jest unikanie ładowania całego kodu JavaScript za jednym razem.

2.1. Dynamiczny Import i Podział Zadań

**Podział Kodu (Code Splitting):** Zamiast ładować cały kod JS (np. dla koszyka, formularzy, galerii) od razu, podziel go na mniejsze, niezależne moduły. Używaj dynamicznego importu (np. w React, Vue), aby ładować te moduły tylko wtedy, gdy są potrzebne (np. po kliknięciu przycisku). **Zadania w Tle (Web Workers):** Przenieś skomplikowane i długotrwałe obliczenia (np. przetwarzanie danych, walidacja) do Web Workers. Pozwala to na wykonywanie obliczeń w oddzielnym wątku, nie blokując głównego wątku przeglądarki, który odpowiada za interakcje i renderowanie.

3. 🔄 Optymalizacja Kolejności Ładowania Skryptów

Kontrola nad tym, kiedy i jak skrypty są pobierane i wykonywane, ma bezpośredni wpływ na TBT.

**Atrybut defer:** Zastosuj defer dla wszystkich niekrytycznych skryptów, które są potrzebne do działania strony, ale nie są wymagane do renderowania pierwszego widoku. Gwarantuje to, że skrypty zostaną wykonane dopiero po sparsowaniu HTML. **Minimalizacja JS:** Zmniejsz rozmiar plików JS poprzez minifikację i kompresję (np. Brotli), co skraca czas ich pobierania i przetwarzania. **Lazy Loading Widżetów:** Opóźniaj ładowanie widżetów zewnętrznych (np. czat, reklamy, skrypty analityczne) do momentu interakcji użytkownika (np. przewinięcia strony) lub ładowania ich z niskim priorytetem.

Podsumowanie: Interaktywność to Prędkość

Wysokie TBT jest ostrzeżeniem, że Twoja strona jest "martwa" mimo wizualnego załadowania. Kluczem do rozwiązania tego problemu jest kontrola nad wykonywaniem kodu JavaScript. Implementacja code splitting, wykorzystanie Web Workers i strategiczne ładowanie skryptów (defer) pozwala na uwolnienie głównego wątku przeglądarki, co obniża TBT i znacząco poprawia wrażenia core web vitals użytkownika mobilnego.

Autor: Proboost