03 lut Total blocking time – co to jest i jak poprawić czas ładowania strony?

W dzisiejszym internecie szybkość ładowania strony internetowej jest jednym z kluczowych czynników decydujących o jej sukcesie.

Jednym z elementów, który ma wpływ na wydajność strony, jest parametr Total Blocking Time (TBT). Jest to miara, która pozwala ocenić czas, w którym użytkownik nie może w pełni interagować ze stroną, ponieważ jest ona zajęta przetwarzaniem zadań. Zrozumienie, czym jest TBT oraz jak wpływa na czas ładowania strony, pozwala na podejmowanie odpowiednich działań w celu poprawy wydajności witryny.

Co to jest total blocking time?

Total Blocking Time (TBT) to czas, w którym użytkownik nie może interagować z witryną z powodu opóźnień w wykonywaniu skryptów lub zadań JavaScript. Mówiąc prościej, jest to suma czasów, w których przeglądarka jest „zablokowana” i nie reaguje na działania użytkownika, takie jak kliknięcia, przewijanie czy wpisywanie tekstu. TBT mierzy czas, przez jaki strona jest zajęta obliczeniami i nie reaguje na te interakcje.
Jest to parametr szczególnie ważny, ponieważ w przypadku dużych wartości TBT użytkownicy mogą odczuwać opóźnienia, co wpływa na ich doświadczenia związane z korzystaniem z witryny. Wysoki TBT może prowadzić do frustracji użytkowników, którzy mogą porzucić stronę przed jej pełnym załadowaniem, co negatywnie wpływa na współczynnik odrzuceń i inne wskaźniki zaangażowania.

Jak total blocking time wpływa na czas ładowania strony?

Total Blocking Time ma kluczowy wpływ na postrzeganą wydajność strony internetowej. Chociaż czas ładowania strony może być niski, użytkownik może nadal napotkać problemy z interakcją z witryną, jeśli TBT jest zbyt wysoki. Dlatego TBT jest bardziej precyzyjnym wskaźnikiem oceny wydajności strony, ponieważ uwzględnia nie tylko czas, w którym strona się ładuje, ale także czas, w którym użytkownik nie może z nią interagować.
Wartość TBT jest mierzona w milisekundach i jest częścią szerszego zestawu wskaźników wydajnościowych, takich jak First Contentful Paint (FCP) czy Largest Contentful Paint (LCP). TBT wpływa na postrzeganą płynność strony – jeśli jest zbyt wysoka, użytkownicy mogą odczuwać, że strona ładuje się wolno, nawet jeśli inne wskaźniki wskazują na szybkie wczytywanie.

Jak mierzyć total blocking time?

Mierzenie TBT jest możliwe dzięki narzędziom takim jak Google PageSpeed Insights, Lighthouse czy Web Vitals. Te narzędzia analizują stronę i przedstawiają szczegółowe informacje o czasie, w którym strona była zablokowana, oraz sugerują, jakie kroki można podjąć, aby poprawić ten parametr.
W przypadku używania narzędzi takich jak Google Lighthouse, TBT można znaleźć w sekcji „Performance”, gdzie jest wyświetlana jako część wyników raportu wydajnościowego. TBT jest obliczany jako suma czasów, w których główny wątek przeglądarki jest zajęty wykonywaniem długotrwałych zadań JavaScript. Jeśli TBT jest zbyt wysoki, warto przeanalizować, które skrypty powodują opóźnienia i spróbować je zoptymalizować.

Jak poprawić total blocking time?

Optymalizacja TBT wymaga skupienia się na różnych aspektach wydajności strony. Oto kilka najważniejszych działań, które można podjąć, aby zredukować czas blokowania i poprawić czas ładowania strony:

Optymalizacja javascript

Skrypty JavaScript, zwłaszcza te, które są wykonywane synchronizowane lub blokują inne operacje w przeglądarce, mają duży wpływ na TBT. Można je zoptymalizować na kilka sposobów:
Ładowanie skryptów asynchronicznie – zamiast blokować ładowanie strony, skrypty powinny być ładowane asynchronicznie, co pozwala na równoczesne renderowanie treści.
Podział kodu (code splitting) – duże pliki JavaScript mogą być podzielone na mniejsze części, które będą ładowane tylko wtedy, gdy będą potrzebne.
Opóźnione ładowanie skryptów – jeśli skrypty nie są niezbędne do natychmiastowego działania strony, warto opóźnić ich ładowanie do momentu, kiedy użytkownik będzie ich rzeczywiście potrzebował.

Minimalizacja zasobów

Zmniejszenie rozmiaru zasobów strony, takich jak obrazy, czcionki czy skrypty, pozwala na szybsze ich pobranie i przetworzenie. Użycie odpowiednich formatów plików (np. WebP dla obrazów) oraz kompresja skryptów i arkuszy stylów może znacznie zmniejszyć czas, w którym strona jest zablokowana.

Optymalizacja css

Nie tylko JavaScript, ale również CSS może wpływać na TBT. Często strony ładowane są z kompletnym arkuszem stylów, który blokuje renderowanie strony do momentu jego załadowania. Optymalizacja CSS polega na usunięciu zbędnych reguł, a także na ładowaniu tylko tych stylów, które są niezbędne do natychmiastowego wyświetlenia treści.

Użycie pamięci podręcznej (caching)

Dzięki zastosowaniu odpowiednich nagłówków pamięci podręcznej w przeglądarkach użytkowników, można zmniejszyć czas ładowania zasobów z serwera i przyspieszyć czas ładowania strony. Wykorzystanie cache pozwala na ponowne użycie już pobranych zasobów, zamiast pobierania ich za każdym razem.

Użycie serwera o niskim czasie odpowiedzi

Czas odpowiedzi serwera ma również wpływ na TBT. Jeśli serwer jest wolny lub ma duże opóźnienia w odpowiadaniu na żądania, cała strona będzie się ładować wolniej, co przekłada się na wyższy TBT. Optymalizacja konfiguracji serwera, wybór odpowiedniego hostingu oraz zastosowanie CDN (Content Delivery Network) pozwala na szybsze dostarczenie zasobów użytkownikowi.
Total Blocking Time jest jednym z najważniejszych parametrów wydajnościowych, który wpływa na postrzeganą szybkość ładowania strony i doświadczenia użytkownika. Zbyt wysoki TBT może prowadzić do frustracji użytkowników, dlatego warto regularnie monitorować ten wskaźnik i dążyć do jego optymalizacji. Poprzez optymalizację JavaScript, minimalizację zasobów, użycie pamięci podręcznej oraz poprawę konfiguracji serwera można znacząco zmniejszyć czas blokowania i poprawić wydajność strony. Działania te nie tylko poprawią komfort użytkowników, ale również mogą pozytywnie wpłynąć na wyniki SEO, ponieważ Google coraz bardziej premiuje strony o szybkim czasie ładowania i dobrym doświadczeniu użytkownika.