Что такое ТБТ?
Метрика общего времени блокировки (TBT) измеряет общее количество времени после первой отрисовки содержимого (FCP), когда основной поток был заблокирован достаточно долго, чтобы помешать реагированию на ввод.
По умолчанию Lighthouse прекращает мониторинг TBT после времени до взаимодействия (TTI) , как и некоторые другие лабораторные инструменты, измеряющие загрузку страницы. См. Как TBT соотносится с TTI? .
Основной поток считается «заблокированным» всякий раз, когда есть Длительная задача — задача, которая выполняется в основном потоке более 50 миллисекунд. Мы говорим, что основной поток «заблокирован», потому что браузер не может прервать задачу, которая выполняется. Поэтому в случае, если пользователь взаимодействует со страницей в середине длительной задачи, браузер должен дождаться завершения задачи, прежде чем он сможет ответить.
Если задача достаточно длительная (более 50 миллисекунд), вполне вероятно, что пользователь заметит задержку и посчитает страницу медленной или неработающей.
Время блокировки заданной длительной задачи — это ее длительность, превышающая 50 миллисекунд. А общее время блокировки для страницы — это сумма времени блокировки для каждой длительной задачи, которая происходит после FCP для измеренного временного интервала (обычно TTI для инструментов загрузки страницы или общее время трассировки для других инструментов).
Например, рассмотрим следующую схему основного потока браузера во время загрузки страницы:
Временная шкала, изображенная на предыдущем изображении, имеет пять задач, три из которых являются длинными задачами, поскольку их длительность превышает 50 миллисекунд. Следующая диаграмма показывает время блокировки для каждой из длинных задач:
Таким образом, хотя общее время, затрачиваемое на выполнение задач в основном потоке, составляет 560 миллисекунд, только 345 миллисекунд из этого времени считаются временем блокировки.
| Длительность задачи (миллисекунды) | Время блокировки задачи (миллисекунды) | |
|---|---|---|
| Задача первая | 250 | 200 |
| Задача два | 90 | 40 |
| Задача третья | 35 | 0 |
| Задача четвертая | 30 | 0 |
| Задача пятая | 155 | 105 |
| Общее время блокировки | 345 миллисекунд | |
Как TBT соотносится с INP?
TBT предшествует INP и полезен как индикатор проблем INP, особенно в лабораторной среде, где измерение INP сложнее. Однако TBT может отмечать потенциальные проблемы, в которых для пользователей может не быть никаких проблем, если они не взаимодействуют в это время. И он также может пропускать проблемы, вызванные взаимодействиями, при измерении в лабораторной среде. Мы рекомендуем измерять INP в полевых условиях как меру фактических проблем с реагированием, с которыми сталкиваются пользователи. TBT может быть разумной метрикой-посредником для INP для лаборатории, но он не является заменой INP сам по себе.
Как TBT соотносится с TTI?
TBT измеряется в течение определенного периода времени. Для некоторых лабораторных инструментов, которые традиционно измеряют загрузку страниц, включая Lighthouse, TBT измерялся до TTI, поскольку он помогает количественно оценить серьезность того, насколько неинтерактивна страница, прежде чем она станет надежно интерактивной. Однако TBT также может продолжать измеряться после загрузки страницы и после TTI, например, в режиме Lighthouse Timespan.
TTI считает страницу «надежно интерактивной», если основной поток был свободен от длительных задач в течение как минимум пяти секунд. Это означает, что три задачи по 51 мс, распределенные на 10 секунд, могут отодвинуть TTI так же далеко, как и одна задача длительностью 10 секунд, но эти два сценария будут ощущаться совершенно по-разному для пользователя, пытающегося взаимодействовать со страницей.
В первом случае три задачи по 51 мс будут иметь TBT в 3 миллисекунды . В то время как одна задача длительностью 10 секунд будет иметь TBT в 9950 миллисекунд . Большее значение TBT во втором случае количественно характеризует худший опыт.
Этот пример показывает, почему TBT часто является лучшей метрикой, чем TTI, поскольку она менее склонна к выбросам. Это касается даже случая, когда TTI используется в качестве конечной точки для TBT.
Как измерить ТВТ
TBT — это метрика, которую следует измерять в лаборатории . Лучший способ измерить TBT — провести аудит производительности Lighthouse на вашем сайте. Подробности использования см. в документации Lighthouse по TBT .
Измерить TBT в полевых условиях можно, но мы не рекомендуем этого делать, поскольку взаимодействие с пользователем может повлиять на TBT вашей страницы способами, которые приведут к большому разбросу в ваших отчетах. Вместо этого мы советуем рассмотреть более новый API Long Animations Frame в полевых условиях, если вы хотите посмотреть дальше одного взаимодействия INP.
Лабораторные инструменты
Какой показатель TBT считается хорошим?
Чтобы обеспечить удобство использования, сайты должны стремиться к тому, чтобы общее время блокировки составляло менее 200 миллисекунд при тестировании на среднем мобильном оборудовании .
Подробную информацию о том, как TBT вашей страницы влияет на ваш рейтинг эффективности Lighthouse, см. в разделе «Как Lighthouse определяет ваш рейтинг TBT».
Как улучшить ТБТ
В целом мы рекомендуем оптимизировать INP по сравнению с TBT, поскольку мы рекомендуем использовать TBT в качестве прокси-метрики для INP в лаборатории (где INP обычно невозможно точно измерить). Поэтому, чтобы улучшить TBT, ознакомьтесь с нашим руководством по оптимизации INP .
Если вас интересует конкретно TBT, вы можете провести аудит эффективности Lighthouse и обратить внимание на любые конкретные возможности, которые предлагает аудит.
В целом улучшение TBT для сайта подразумевает сокращение количества блокирующих скриптов, что означает либо оптимизацию их для уменьшения блокирования, либо сокращение количества скриптов в целом. Обратитесь к следующим руководствам по производительности:
- Оптимизируйте длительные задачи
- Уменьшите влияние стороннего кода
- Сократить время выполнения JavaScript
- Минимизируйте работу основного потока
- Поддерживайте небольшое количество запросов и небольшие размеры переводов
Что такое ТБТ?
Метрика общего времени блокировки (TBT) измеряет общее количество времени после первой отрисовки содержимого (FCP), когда основной поток был заблокирован достаточно долго, чтобы помешать реагированию на ввод.
По умолчанию Lighthouse прекращает мониторинг TBT после времени до взаимодействия (TTI) , как и некоторые другие лабораторные инструменты, измеряющие загрузку страницы. См. Как TBT соотносится с TTI? .
Основной поток считается «заблокированным» всякий раз, когда есть Длительная задача — задача, которая выполняется в основном потоке более 50 миллисекунд. Мы говорим, что основной поток «заблокирован», потому что браузер не может прервать задачу, которая выполняется. Поэтому в случае, если пользователь взаимодействует со страницей в середине длительной задачи, браузер должен дождаться завершения задачи, прежде чем он сможет ответить.
Если задача достаточно длительная (более 50 миллисекунд), вполне вероятно, что пользователь заметит задержку и посчитает страницу медленной или неработающей.
Время блокировки заданной длительной задачи — это ее длительность, превышающая 50 миллисекунд. А общее время блокировки для страницы — это сумма времени блокировки для каждой длительной задачи, которая происходит после FCP для измеренного временного интервала (обычно TTI для инструментов загрузки страницы или общее время трассировки для других инструментов).
Например, рассмотрим следующую схему основного потока браузера во время загрузки страницы:
Временная шкала, изображенная на предыдущем изображении, имеет пять задач, три из которых являются длинными задачами, поскольку их длительность превышает 50 миллисекунд. Следующая диаграмма показывает время блокировки для каждой из длинных задач:
Таким образом, хотя общее время, затрачиваемое на выполнение задач в основном потоке, составляет 560 миллисекунд, только 345 миллисекунд из этого времени считаются временем блокировки.
| Длительность задачи (миллисекунды) | Время блокировки задачи (миллисекунды) | |
|---|---|---|
| Задача первая | 250 | 200 |
| Задача два | 90 | 40 |
| Задача третья | 35 | 0 |
| Задача четвертая | 30 | 0 |
| Задача пятая | 155 | 105 |
| Общее время блокировки | 345 миллисекунд | |
Как TBT соотносится с INP?
TBT предшествует INP и полезен как индикатор проблем INP, особенно в лабораторной среде, где измерение INP сложнее. Однако TBT может отмечать потенциальные проблемы, в которых для пользователей может не быть никаких проблем, если они не взаимодействуют в это время. И он также может пропускать проблемы, вызванные взаимодействиями, при измерении в лабораторной среде. Мы рекомендуем измерять INP в полевых условиях как меру фактических проблем с реагированием, с которыми сталкиваются пользователи. TBT может быть разумной метрикой-посредником для INP для лаборатории, но он не является заменой INP сам по себе.
Как TBT соотносится с TTI?
TBT измеряется в течение определенного периода времени. Для некоторых лабораторных инструментов, которые традиционно измеряют загрузку страниц, включая Lighthouse, TBT измерялся до TTI, поскольку он помогает количественно оценить серьезность того, насколько неинтерактивна страница, прежде чем она станет надежно интерактивной. Однако TBT также может продолжать измеряться после загрузки страницы и после TTI, например, в режиме Lighthouse Timespan.
TTI считает страницу «надежно интерактивной», если основной поток был свободен от длительных задач в течение как минимум пяти секунд. Это означает, что три задачи по 51 мс, распределенные на 10 секунд, могут отодвинуть TTI так же далеко, как и одна задача длительностью 10 секунд, но эти два сценария будут ощущаться совершенно по-разному для пользователя, пытающегося взаимодействовать со страницей.
В первом случае три задачи по 51 мс будут иметь TBT в 3 миллисекунды . В то время как одна задача длительностью 10 секунд будет иметь TBT в 9950 миллисекунд . Большее значение TBT во втором случае количественно характеризует худший опыт.
Этот пример показывает, почему TBT часто является лучшей метрикой, чем TTI, поскольку она менее склонна к выбросам. Это касается даже случая, когда TTI используется в качестве конечной точки для TBT.
Как измерить ТВТ
TBT — это метрика, которую следует измерять в лаборатории . Лучший способ измерить TBT — провести аудит производительности Lighthouse на вашем сайте. Подробности использования см. в документации Lighthouse по TBT .
Измерить TBT в полевых условиях можно, но мы не рекомендуем этого делать, поскольку взаимодействие с пользователем может повлиять на TBT вашей страницы способами, которые приведут к большому разбросу в ваших отчетах. Вместо этого мы советуем рассмотреть более новый API Long Animations Frame в полевых условиях, если вы хотите посмотреть дальше одного взаимодействия INP.
Лабораторные инструменты
Какой показатель TBT считается хорошим?
Чтобы обеспечить удобство использования, сайты должны стремиться к тому, чтобы общее время блокировки составляло менее 200 миллисекунд при тестировании на среднем мобильном оборудовании .
Подробную информацию о том, как TBT вашей страницы влияет на ваш рейтинг эффективности Lighthouse, см. в разделе «Как Lighthouse определяет ваш рейтинг TBT».
Как улучшить ТБТ
В целом мы рекомендуем оптимизировать INP по сравнению с TBT, поскольку мы рекомендуем использовать TBT в качестве прокси-метрики для INP в лаборатории (где INP обычно невозможно точно измерить). Поэтому, чтобы улучшить TBT, ознакомьтесь с нашим руководством по оптимизации INP .
Если вас интересует конкретно TBT, вы можете провести аудит эффективности Lighthouse и обратить внимание на любые конкретные возможности, которые предлагает аудит.
В целом улучшение TBT для сайта подразумевает сокращение количества блокирующих скриптов, что означает либо оптимизацию их для уменьшения блокирования, либо сокращение количества скриптов в целом. Обратитесь к следующим руководствам по производительности: