Total Blocking Time (TBT)

Czy zdarza Ci się trafiać na strony, które wyświetlają się całkiem szybko, ale przez pierwszych kilka sekund nie reagują na Twoje kliknięcia? Total Blocking Time służy do opisu właśnie tego zjawiska – więcej o nim przeczytasz w poniższym tekście.

Czym jest Total Blocking Time (TBT)?

Total Blocking Time (TBT) to wskaźnik wydajności strony internetowej, który mierzy, jak długo użytkownik musi czekać, zanim strona stanie się w pełni interaktywna. Witryna może wyglądać na załadowaną, z blokami tekstu i większością grafik wyświetlonymi już na ekranie – ale nie reagować na interakcje (np. kliknięcie przycisku). Najprawdopodobniej jest to efekt tego, że główny wątek przeglądarki wciąż jest zajęty przetwarzaniem ładujących się skryptów JavaScript – i na to właśnie wskazuje wysoka wartość tego wskaźnika.

TBT bierze pod uwagę okres między First Contentful Paint (FCP), czyli chwilą, gdy pierwsze elementy strony pojawiają się na ekranie, a Time to Interactive (TTI) – czyli momentem, gdy strona jest w pełni responsywna. Analizowane są tylko długie zadania JavaScript – te, które trwają ponad 50 milisekund. Przy obliczaniu TBT sumuje się czas „zablokowania” użytkownika, czyli różnicę między rzeczywistym czasem trwania zadania a progiem 50 ms. Jeśli więc skrypt trwa 200 ms, to do TBT dolicza się 200 – 50 = 150 ms. Im więcej takich długich zadań, tym wyższy TBT – co oznacza, że użytkownik musi dłużej czekać na możliwość interakcji z witryną.

Według Google wartość Total Blocking Time nie powinna przekraczać 200 ms na smartfonie o przeciętnych możliwościach. Dłuższy czas „blokowania” może bardzo realnie wpłynąć na doświadczenie użytkownika… co pokazuje poniższy przykład.

Dlaczego Total Blocking Time jest bardzo ważny w kontekście SEO i UX?

Przeprowadzone kilka lat temu przez firmę Moz badanie wykazało, że strony, które w testach TBT osiągały przynajmniej przyzwoite wyniki (poniżej 300 ms), mogły pochwalić się o 15-20% wyższym od pozostałych witryn zaangażowaniem użytkowników; chętniej wchodzili oni w interakcje ze stroną. A to bezpośrednio przekładało się na konwersję – liczbę wypełnionych formularzy czy wejść w ukryte pod CTA linki.

Długi czas oczekiwania na możliwość wykonania pierwszej interakcji jest początkiem bardzo niekorzystnej z perspektywy UX sekwencji:

1. Użytkownik widzi stronę, próbuje wejść w interakcję z nią, ale nie otrzymuje odpowiedzi.
2. Skoro tak, może pomyśleć, że strona ma problemy techniczne i ją opuścić, zanim zdąży się załadować do końca.
3. Ewentualnie zostanie na stronie, ale będzie mniej skłonny zabrać się do zakupów albo rozpocząć proces rejestracji, bo czuje, że i tam czekają go „schody”. To oznacza, jak wspomnieliśmy, niższą konwersję.

Jest jeszcze jedna kwestia. Wysokie TBT bardzo często koreluje z wysokim poziomem współczynnika odrzuceń (bounce rate), czyli wizyt na stronie, które nie kończą się żadną interakcją. I nic dziwnego, skoro użytkownik musiał na nią tak długo czekać. Sam bounce rate nie jest co prawda bezpośrednim czynnikiem rankingowym w Google… ale jego poziom stanowi bardzo dobry wskaźnik problemów w innych obszarach, które będą miały wpływ na pozycjonowanie Twojej strony oraz jej UX.

Jak można poprawić wartość TBT?

O ile samo TBT również nie jest ani czynnikiem rankingowym, ani elementem Core Web Vitals – warto dbać o to, aby jego wartość była jak najniższa, bo wymiernie przełoży się to na wyniki całej strony. Co może w tym pomóc?

• Minimalizacja kodu JavaScript oraz ograniczanie liczby złożonych, monolitycznych skryptów, które zajmują główny wątek przeglądarki.
• Przeniesienie tzw. render-blocking scripts na koniec dokumentu lub ładowanie ich asynchronicznie – tak, aby nie blokowały przeglądarce wykonywania prostszych skryptów.
• Całkowite przeniesienie bardziej złożonych skryptów poza główny wątek przy pomocy Web Workers.
• Ograniczenie skryptów zewnętrznych – reklam, trackerów marketingowych, itp. – lub ładowanie ich w tle.
• Minimalizacja innych obciążających operacji – na przykład animacji CSS.
• Zmiana formatu obrazów na lżejszy WebP, dla odciążenia przeglądarki i szybszej wymiany danych z serwerem.