Общее время блокировки

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

В отчете Lighthouse TBT отображается в миллисекундах:

# Что такое TBT

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

# Как Lighthouse рассчитывает оценку вашего TBT

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

В этой таблице показано, как интерпретировать оценку TBT:

# Как улучшить оценку TBT

Чтобы узнать, как при помощи панели «Производительность» в Chrome DevTools диагностировать основную причину появления длительных задач, см. статью В чем причина появления длительных задач?.

Вот наиболее распространенные причины появления длительных задач:

• Загрузка, обработка или выполнение ненужного JavaScript-кода. В ходе анализа кода при помощи панели «Производительность» может выясниться, что основной поток выполняет работу, которая на самом деле не требуется для загрузки страницы. Улучшить оценку TBT можно посредством сокращения полезной нагрузки JavaScript с помощью разделения кода, удаления неиспользуемого кода или эффективной загрузки стороннего JavaScript.
• Неэффективные JavaScript-инструкции. Например, предположим, что в ходе анализа кода при помощи панели «Производительность» вы обнаружили вызов document.querySelectorAll('a'), возвращающий 2000 узлов. Чтобы улучшить оценку TBT, можно перестроить код, заменив селектор на более избирательный, возвращающий только 10 узлов.

# How to improve your overall Performance score

Unless you have a specific reason for focusing on a particular metric, it's usually better to focus on improving your overall Performance score.

Use the Opportunities section of your Lighthouse report to determine which improvements will have the most value for your page. The more significant the opportunity, the greater the effect it will have on your Performance score. For example, the Lighthouse screenshot below shows that eliminating render-blocking resources will yield the biggest improvement:

See the Performance audits landing page to learn how to address the opportunities identified in your Lighthouse report.

# Ресурсы

• Исходный код проверки Total Blocking Time (общее время блокировки)
• Увеличено ли у вас время до интерактивности (TTI) из-за длительных JavaScript-задач?
• Оптимизация времени ожидания до первого взаимодействия с контентом (FID)
• Первая отрисовка контента (FCP)
• Время до интерактивности (TTI)
• Сокращение размера полезной нагрузки JavaScript за счет разделения кода
• Удаление неиспользуемого кода
• Эффективная загрузка сторонних ресурсов