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

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

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

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

Какие меры ТБТ

TBT измеряет общее время, в течение которого страница не может реагировать на вводимые пользователем данные, такие как щелчки мыши, касания экрана или нажатия клавиатуры. Сумма рассчитывается путем сложения блокирующей части всех длительных задач между First Contentful Paint и Time to Interactive . Любая задача, которая выполняется более 50 мс, является длинной задачей. Период времени после 50 мс является частью блокировки. Например, если Lighthouse обнаружит задачу длительностью 70 мс, время блокировки составит 20 мс.

Как Lighthouse определяет ваш показатель TBT

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

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

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

Как улучшить свой показатель TBT

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

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

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

Как улучшить общий показатель производительности

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

Используйте раздел «Диагностика» отчета Lighthouse, чтобы определить, какие улучшения будут иметь наибольшую ценность для вашей страницы. Чем более значимой является возможность, тем больший эффект она окажет на ваш показатель производительности. Например, на следующем снимке экрана Lighthouse показано, что устранение ресурсов, блокирующих рендеринг, приведет к наибольшему улучшению:

Маяк: раздел диагностики, показывающий количество проверок и их влияние.
Маяк: раздел Диагностика

См. «Аудит производительности» , чтобы узнать, как использовать возможности, указанные в вашем отчете Lighthouse.

Ресурсы