Время интерактивности (TTI)

Филип Уолтон

Время до интерактивности (TTI) — это лабораторная метрика для измерения скорости реагирования на нагрузку . Она помогает определить случаи, когда страница выглядит интерактивной, но на самом деле таковой не является. Быстрый TTI помогает убедиться, что страница пригодна для использования .

Что такое ТТИ?

Метрика TTI измеряет время с момента начала загрузки страницы до момента загрузки ее основных подресурсов и способна быстро и надежно реагировать на действия пользователя.

Чтобы рассчитать TTI на основе трассировки производительности веб-страницы, выполните следующие действия:

  1. Начните с первой отрисовки содержимого (FCP) .
  2. Выполните поиск вперед по времени для тихого окна продолжительностью не менее пяти секунд, где тихое окно определяется следующим образом: отсутствие длительных задач и не более двух сетевых запросов GET в процессе выполнения.
  3. Выполните поиск в обратном направлении до последней длительной задачи перед окном молчания и остановитесь на FCP, если длительные задачи не будут найдены.
  4. TTI — это время окончания последней длительной задачи перед окном молчания (или то же значение, что и FCP, если длительные задачи не найдены).

Следующая диаграмма поможет наглядно представить вышеописанные шаги:

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

Традиционно разработчики оптимизируют страницы для быстрого отображения, иногда в ущерб времени отклика.

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

Когда пользователи пытаются взаимодействовать со страницей, которая выглядит интерактивной, но на самом деле таковой не является, они, скорее всего, отреагируют одним из двух способов:

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

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

Как измерить TTI

TTI — это метрика, которую лучше всего измерить в лаборатории . Лучший способ измерить TTI — запустить аудит производительности Lighthouse на вашем сайте. Подробности использования см. в документации Lighthouse по TTI .

Лабораторные инструменты

Какой показатель TTI считается хорошим?

Чтобы обеспечить удобство использования, сайты должны стремиться к тому, чтобы время до взаимодействия составляло менее 5 секунд при тестировании на среднем мобильном оборудовании .

Подробную информацию о том, как TTI вашей страницы влияет на ваш рейтинг эффективности Lighthouse, см. в разделе «Как Lighthouse определяет ваш рейтинг TTI» .

Как улучшить TTI

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

Чтобы узнать, как улучшить TTI в целом (для любого сайта), обратитесь к следующим руководствам по повышению эффективности: