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

Published on Updated on

Translated to: English, Español, Português, 한국어, 中文, 日本語

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

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

Снимок экрана аудита общего времени блокировки Lighthouse

Что такое TBT

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

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

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

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

Время TBT
(в миллисекундах)
Цветовое кодирование
0–200Зеленый (быстрая загрузка)
200-600Оранжевый (средняя загрузка)
Более 600Красный (медленная загрузка)

See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

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

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

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

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

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

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:

Lighthouse: Opportunities section

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

Ресурсы

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.