Общее время блокировки (TBT) — что это такое и как улучшить свой результат

Мы все сталкивались с TBT в наших интернет-авантюрах. И нет, я не имею в виду четверги-воспоминания. Я имею в виду, когда вы вводите элемент поиска в своей любимой поисковой системе, требуется много времени, чтобы увидеть что-то на странице. Вы остаетесь в недоумении, что пошло не так, ваше интернет-соединение или, возможно, слишком много задач запущено в фоновом режиме?

В любом случае, вам лучше ознакомиться с показателем общего времени блокировки.

Что такое общее время блокировки?

Total Blocking Time (общее время блокировки), сокращенно TBT, — это показатель Lighthouse Performance, который измеряет, сколько времени требуется странице, чтобы стать интерактивной для пользователя. Проще говоря, он измеряет период, в течение которого страница была заблокирована от вас.

То, что происходит между ними, называется длительной задачей. Длительные задачи — это процессы, которые выполняются на временной шкале основного потока дольше 50 миллисекунд (мс). Важно отметить, что браузер не может прервать задачу, которая уже запущена, включая длительные задачи основного потока. В это время эти длительные задачи блокируют основной поток.

Источник изображения: wp.rocket.me

Итак, вы можете себе представить, что браузеру придется ждать завершения определенной длительной задачи, прежде чем он станет интерактивным для пользователя. Взаимодействия с браузером, такие как нажатия клавиатуры, щелчки мыши, касания экрана и другие важные задачи, не будут реагировать, пока не завершится длительная задача. Предположительно, TBT предотвратит отзывчивость ввода и интерактивность страницы.

Что такое длинная задача?

Чтобы лучше понять длительные задачи и что такое TBT, рассмотрим следующий пример:

Есть три задачи: 90 мс, 250 мс и 40 мс. Помните, что длинная задача занимает более 50 мс. Первая и вторая задачи будут длинными, так как их выполнение занимает более 50 мс. Однако последняя задача не является длинной, так как ее выполнение занимает менее 50 мс.

Все время, проведенное после первых 50 мс, называется временем блокировки. Так, для первой задачи время блокировки составляет (90-50 мс) 40 мс, а для второй — 200 мс. Следовательно, для расчета общего времени блокировки мы складываем все времена блокировки. В этом случае 40+200 мс = 240 мс.

В приведенном выше примере у нас есть три задачи с общим временем блокировки 240 мс. Если бы у нас была одна задача, которая занимает 600 мс, в этом случае TBT составляет 550 мс, что больше, чем у предыдущих трех задач вместе взятых. Это показывает, что:

• Небольшие задачи не означают автоматически низкий TBT
• Большие задачи не означают автоматически высокий TBT

TBT, TTI и FCP

TTI, TBT и FCP являются ключевыми показателями для оценки реагирования вашей страницы на пользовательский ввод. TTI, сокращение от Time To Interactive, является важным показателем, который измеряет точное время завершения последней длительной задачи.

Это означает, что основной поток теперь может реагировать на взаимодействие с пользователем. Хороший TTI — это все, что меньше 5 секунд. Обычно TTI — это время, необходимое странице для полной интерактивности.

Источники изображений: isotropic.com

FCP означает First Contentful Paint и является показателем производительности ранжирования скорости, который измеряет, насколько быстро загружается страница. Это означает, что пользователь должен видеть на экране либо текст, либо изображение. Чем быстрее FCP, тем больше пользователь уверен, что на странице что-то происходит.

FCP отличается от LCP (Largest Contentful Paint) тем, что последний измеряет момент, когда основное содержимое страницы закончило загрузку. Чтобы понять разницу, вспомните последний раз, когда вы что-то гуглили, и страница загружалась слишком долго?

Ну, первая пустая страница означает, что FCP еще не произошло. В тот момент, когда появляется первый контент, будь то кнопка поиска или желаемый вами вывод, происходит FCP.

Совет: TBT измеряет, как долго процесс или система ожидает доступности ресурсов.

Как измеряется TBT?

Очень важно измерять общее время блокировки, поскольку пользователь воспринимает вашу веб-страницу как медленную, если оценка TBT высока. Если страница загружается медленно после взаимодействия с пользователем, это плохо для бизнеса.

Оптимально TBT варьируется в зависимости от устройства, с которого просматривается контент. Для мобильных устройств идеальный TBT должен быть ниже 300 мс; для настольных компьютеров хороший показатель TBT должен быть ниже 100 мс.

Источник изображения: onely.com

Таким образом, необходимо иметь системы, которые измеряют производительность вашего сайта. Ниже приведены некоторые из используемых стратегий:

Инструменты мониторинга производительности

Для мониторинга производительности вашего сайта можно использовать такие инструменты, как Google Lighthouse, WebPageTest и Chrome DevTools.

1. Google Маяк

Отчет Lighthouse дает вам представление об общем времени блокировки вашего сайта, производительности SEO и доступности. По сути, вы даете Lighthouse URL для аудита, и он возвращает вам отчет о том, насколько хорошо страница справилась (или нет).

Оценка эффективности Lighthouse основана на оценке TBT на уровне 30%. Это почти треть всей оценки.

Его можно использовать как расширение браузера, интегрировать в процесс сборки вашего кода или запустить в командной строке. Ниже приведены способы достижения этого:

• Использование вкладки Lighthouse из Chrome DevTools.
• Запустите инструмент командной строки Node.
• Запустите Lighthouse на PageSpeed ​​Insights.
• Lighthouse как расширение Chrome.

2. Тест веб-страницы

Это бесплатный инструмент, который измеряет показатели веб-показателей, такие как TBT. После того, как вы зайдете на их веб-сайт, введите определенный URL, который вы хотите протестировать, затем выберите нужную вам конфигурацию теста и запустите тест. Через несколько минут вы получите оценку производительности вместе с подробным анализом показателей вашего сайта.

Источник изображения: methodsandtools.com

Сайт также подсчитывает, сколько времени требуется для выполнения каждого скрипта, то есть процессорное время каждого скрипта. Имея эту информацию, вы можете узнать, какие задачи выполняются дольше других и можно ли делегировать их на более позднее время, сразу после загрузки главной страницы.

3. Инструменты разработчика Chrome

Вы можете получить доступ к записи того, как используется ваш процессор, и определить задачи, которые занимают слишком много времени. Этот инструмент позволяет вам узнать, сколько времени тратится на обслуживание длительных задач, в тревожном красном цвете, который подтолкнет вас к немедленным действиям.

Как улучшить общее время блокировки (TBT)

Лучший и наиболее эффективный способ улучшить оценку TBT вашего сайта — это выявить проблемы, которые приводят к накоплению длительных задач на вашем сайте, и работать над уменьшением их влияния. Ниже приведены некоторые из причин, по которым возникают длительные задачи:

1. Неэффективные операторы Javascript

Есть некоторые команды Javascript, которые возвращают многочисленные узлы, больше, чем требуется. Это означает, что много ресурсов было потрачено на ненужные излишества. Вместо этого эти команды можно рефакторить так, чтобы они возвращали только то, что требуется, и исключить отходы.

Источник изображения: onely.com

Более того, неоптимизированный контент, содержащийся в этих строках кода, может снизить производительность. Слишком длинные сторонние скрипты также могут способствовать длительному выполнению задач на вашем сайте. Один из способов обойти это — загружать эти скрипты после начальной загрузки страницы.

2. Файлы Javascript с неиспользуемым кодом

Это файлы Javascript, которые выполняют больше работы, чем основной поток. В этом случае файл может загружать контент, который не нужен основному потоку для загрузки страницы. Способ решения этой проблемы и повышения оценки TBT — это разделение кода и удаление всего неиспользуемого кода Javascript.

Помните, даже неиспользуемый код должен быть загружен, проанализирован и выполнен основным потоком, а это означает, что тратятся время и ресурсы, которые в противном случае можно было бы использовать для решения следующей важной задачи.

Что такое разделение кода?

Разделение кода помогает разбить код Javascript на несколько фрагментов, которые можно загружать и компилировать в разное время. Таким образом, вместо того, чтобы иметь долго выполняющиеся задачи, вы можете распределить их по определенному времени. Делая это, вы также можете сначала загрузить только самые необходимые файлы.

Как удалить неиспользуемый код?

Есть несколько способов удалить неиспользуемый код из вашего пакета. Первая и часто ключевая стратегия — проверить все неиспользуемые библиотеки. Всегда экономит время, удобно и надежно включать в код много библиотек, поскольку они будут включаться по мере необходимости, не заставляя вас думать о том, что нужно для этой конкретной строки кода.

Конечно, но иногда в процессе остаются неиспользуемые библиотеки. Библиотеки, запускаемые основным потоком, в конечном итоге превращаются в длинные задачи. Поэтому вместо того, чтобы иметь две строки кода, вызывающие одну и ту же библиотеку (с очень небольшими различиями), удалите одну и оставьте более всеобъемлющую.

Источник изображения: refactoring.guru

Вы можете загрузить плагины, такие как Webpack Bundle Analyzer, которые помогут вам в проверке неиспользуемого кода. Он анализирует все, что составляет ваш пакет, давая вам возможность обнаружить любую строку кода, которая не нужна.

Другой способ удаления неиспользуемого кода — это идентификация конкретных случаев в строках кода, которые не используются, в данном случае, дополнительных пробелов и новых строк. Эти ненужные символы могут привести к замедлению загрузки вашей страницы.

Ниже приведены некоторые рекомендации по работе с неиспользуемыми библиотеками и кодом в вашем проекте:

• Если библиотека не используется, удалите ее полностью.
• Если начальная загрузка страницы может произойти без библиотеки, удалите и ее.
• Если библиотеку можно разбить на части и импортировать выборочно (в зависимости от предполагаемой задачи), то используйте тот раздел библиотеки, который вам полезен.

Другой способ рассмотреть вопрос улучшения оценки TBT вашей страницы — с точки зрения оптимизации процессов вашего основного потока. Вы также можете рассмотреть возможность использования веб-воркеров для дальнейшей минимизации работы основного потока.

Как TBT влияет на SEO

Поисковая оптимизация (SEO) заинтересована в том, чтобы сделать ваш сайт лучше для поисковых систем. Это означает большую видимость вашего сайта в результатах поиска, подразумевая, что пользователи будут находить его проще и быстрее. Таким образом, TBT напрямую влияет на показатели SEO вашего сайта.

В 2021 году Google объявила о начале внедрения на своих страницах очень важной метрики: Core Web Vitals. Эта метрика посвящена тому, как пользователи взаимодействуют с вашей страницей, то есть опыту страницы.

Источники изображений: gorilladesk.com

В частности, Google сосредоточился на трех ключевых аспектах вашей веб-страницы:

1. Загрузка: Как быстро контент появляется на экране?
2. Интерактивность: насколько быстро ваша страница реагирует на действия пользователя?
3. Визуальная стабильность: Двигаются ли объекты на экране во время загрузки?

Теперь для измерения этих аспектов Google использует следующие показатели:

1. Самая большая отрисовка контента (LCP) – должна быть менее 2,5 секунд (для наиболее оптимизированного контента)
2. Первая задержка ввода (FID) – должна быть менее 100 мс
3. Накопительное смещение макета (CLS) – должно быть ниже 0,1

Источники изображений: bounteous.com

Метрики Google Core Web Vitals также учитывают общее время блокировки, поскольку оно влияет на интерактивность и время загрузки вашего сайта. Взаимодействие с пользователем является ключевым аспектом SEO, поскольку пользователи могут быть разочарованы, если сайт загружается медленно, и в конечном итоге могут покинуть сайт, если в кратчайшие сроки не будет отображено никакого контента.

Это называется показателем отказов. Это процент пользователей, которые посещают страницу и уходят, не взаимодействуя с ней. Представьте, что ваш сайт — это сайт электронной коммерции, и вам нужно, чтобы клиенты совершали покупки после или во время взаимодействия с вашим контентом.

К сожалению, из-за длительных сроков блокировки они покидают сайт, даже не увидев ваш продукт. Насколько это разрушительно и расточительно?

Источники изображений: agencyanalytics.com

Если у вас 1000 посетителей на вашей странице ежедневно и 100 посещений только первой страницы, и даже тогда они сразу уходят, ваш показатель отказов составляет 10%. Это число часто меняется, поэтому анализ показателя отказов вашего сайта является ключевым в определении того, как улучшить ваш показатель TBT и показатель SEO веб-страницы.

Оптимальный показатель отказов составляет от 26% до 40%. Мобильные телефоны имеют более высокий показатель отказов, чем сайты для ПК, 51% по сравнению с 43%, поэтому при оценке показателя отказов вашего сайта учитывайте, откуда большинство ваших пользователей взаимодействовали с ним.

Google использует Mobile-First Indexing, который индексирует и ранжирует в зависимости от мобильной версии веб-сайта. Это означает, что для улучшения вашего SEO-рейтинга вам следует серьезно учитывать общее время блокировки на мобильных устройствах, поскольку они могут страдать от проблем с подключением и меньшей мощности процессора.

Ключевые выводы

Считайте это своей шпаргалкой для всего, что связано с TBT. Мы суммируем некоторые из наиболее важных деталей о TBT в следующих пунктах:

• TBT измеряет, как долго блокируется основная временная шкала потока, и должен быть максимально минимизирован.
• Google использует показатель общего времени блокировки в своих показателях пользовательского опыта Core Web Vitals.
• TBT влияет на SEO с точки зрения скорости загрузки страниц и пользовательского опыта.
• Более быстрое время отклика частично способствует повышению рейтинга поиска.

Хотя TBT может быть важным показателем при оценке рейтинга SEO, это не единственный показатель, отслеживаемый для измерения отзывчивости веб-сайта и общей производительности.