TBT, оно же Total Blocking Time, оно же Общее Время Блокировки измеряет суммарное количество времени, прошедшего после FCP (First Contentful Paint – время до загрузки самой первой части контента – еще один термин, по которому, кстати, у нас есть отдельная статья – найти ее можно вот тут), когда с сайтом нельзя было взаимодействовать.
То есть когда пользователь не мог ничего делать. Если попробовать в такой момент свайпнуть, пролистнуть, на что-то кликнуть, то экран будет просто зависать. В лучшем случае – рвано двигаться.
TBT возникает когда браузер не может прервать задачу, находящуюся в процессе выполнения. Поэтому в случае, если пользователь взаимодействует со страницей в процессе выполнения той или иной задачи, браузеру придется ждать ее завершения, прежде чем он сможет ответить и начать выполнять команды пользователя.
И если эта задача продолжительная (больше 100 мс), пользователь, скорее всего, заметит эту самую задержку и воспримет страницу как медленную. Или и вовсе поломанную.
Почему важно следить за TBT
Потому что TBT влияет и на скорость загрузки, и на отзывчивость сайта. Если страница тормозит, пользователи быстро теряют терпение и уходят. Это называется показателем отказов – процентом посетителей, которые покинули сайт, даже не начав взаимодействовать с ним.
Давайте приведем пример: у вас есть интернет-магазин, и потенциальный клиент перешел на ту или иную страницу товара. Но из-за долгой загрузки он так и не увидел, что вы продаете, и просто закрыл вкладку. Потеря клиента = потеря прибыли.
Помимо прочего, Google использует так называемый Mobile-First Indexing – свой относительно новый алгоритм (вышел в 2019), в первую очередь оценивающий мобильную версию сайта. Здесь это важно, потому что исторически TBT хуже на смартфонах – из-за медленного Интернета или слабого процессора. Следственно, и удар по рейтингу сайта будет выше.
Какой показатель TBT считается адекватным
Для мобильных девайсов TBT не должен превышать 300 мс. Для ПК и ноутбуков – 200 мс. Это максимум. Традиционно хорошим показателем же является <100 мс.
Нормы взяты не из воздуха. Программы размечают результат выше 300 как оранжевый – требующий вмешательства:
И ниже 100 мс – как зеленый, не требующий исправления:
Как мониторить показатель TBT
Через отчеты Lighthouse, например. Это инструмент от Google. Он не только тестирует сайт и показывает оценку производительности, но и дает конкретные рекомендации: что можно улучшить, чтобы сделать тот быстрее.
Пользоваться утилитой просто: указываете ссылку, а программа возвращает отчет.
Доступна она через расширение для браузера или через командную строку. Как альтернативный вариант – можно запустить через инструменты разработчика (они же Chrome DevTools), встроенных непосредственно в браузер (если пользуетесь Google Chrome). Вся нужная информация будет на вкладке Performance, в подразделе Main.
И мониторинг в случае с TBT реально важен, потому что Lighthouse, например, отдает метрике настолько большой приоритет, что результаты по ее аудиту занимают почти треть от общей графы с другими показателями.
Как уменьшить TBT
Ниже – способы, как можно уменьшить Total Blocking Time.
Уменьшить влияние сторонних скриптов и плагинов
Сюда относятся сторонние скрипты или плагины, которые требуют длительной загрузки. Обычно начинают с аудита сторонних дополнений. На помощь тут придет все тот же Lighthouse – в его отчетах указывается, какие скрипты являются проблемными, а какие – нет. После выявления они либо удаляются, либо их загрузка откладывается. Их также можно попробовать подгружать асинхронно, то есть при разных обстоятельствах и условиях.
Удалите неиспользуемый код CSS и JavaScript
Способ частично проистекает из предыдущего. Неиспользуемый код CSS и JavaScript не только увеличивает размер «активов» сайта, но и повышает общее время блокировки. Решить проблему можно вручную, а можно при помощи сторонних утилит. Второй вариант подойдет, если нет особых навыков в программировании, или возможности обратиться за помощью к кодеру здесь и сейчас.
CSS – язык, отвечающий за оформление элементов текста. JavaScript (JS) – основа почти всего в интернете. Отвечает за интерактивность.
