Время взаимодействия (TTI) — это лабораторный показатель для измерения реакции на нагрузку . Это помогает выявить случаи, когда страница выглядит интерактивной, но на самом деле это не так. Быстрый TTI помогает гарантировать, что страницу можно будет использовать .
Что такое ТТИ?
Метрика TTI измеряет время от момента начала загрузки страницы до момента загрузки ее основных подресурсов и способна надежно и быстро реагировать на ввод пользователя.
Чтобы рассчитать TTI на основе трассировки производительности веб-страницы, выполните следующие действия:
- Начните с первой контентной отрисовки (FCP) .
- Найдите вперед во времени тихое окно длительностью не менее пяти секунд, где тихое окно определяется как отсутствие длительных задач и не более двух текущих сетевых запросов GET.
- Найдите в обратном направлении последнюю длинную задачу перед тихим окном, останавливаясь на FCP, если длинные задачи не найдены.
- TTI — это время окончания последней длинной задачи перед тихим окном (или то же значение, что и FCP, если длинные задачи не найдены).
Следующая диаграмма должна помочь визуализировать описанные выше шаги:
Исторически сложилось так, что разработчики оптимизировали страницы для ускорения рендеринга, иногда за счет TTI.
Такие методы, как рендеринг на стороне сервера (SSR), могут привести к сценариям, в которых страница выглядит интерактивной (то есть ссылки и кнопки видны на экране), но на самом деле она не является интерактивной, потому что основной поток заблокирован или потому что код JavaScript, управляющий ими. элементы не загрузились.
Когда пользователи пытаются взаимодействовать со страницей, которая выглядит интерактивной, но на самом деле таковой не является, они, скорее всего, отреагируют одним из двух способов:
- В лучшем случае их будет раздражать медленный отклик страницы.
- В худшем случае они решат, что страница сломана, и, скорее всего, уйдут. Они могут даже потерять уверенность в ценности вашего бренда.
Чтобы избежать этой проблемы, приложите все усилия, чтобы свести к минимуму разницу между FCP и TTI. А в тех случаях, когда заметная разница все же существует, дайте понять с помощью визуальных индикаторов, что компоненты на вашей странице еще не интерактивны.
Как измерить ТТИ
TTI — это показатель, который лучше всего измерять в лаборатории . Лучший способ измерить TTI — провести аудит производительности Lighthouse на вашем сайте. Подробности использования см. в документации Lighthouse по TTI .
Лабораторные инструменты
Что такое хороший показатель TTI?
Чтобы обеспечить хорошее взаимодействие с пользователем, сайты должны стремиться к тому, чтобы время взаимодействия было менее 5 секунд при тестировании на среднем мобильном оборудовании .
Подробную информацию о том, как TTI вашей страницы влияет на показатель производительности Lighthouse, см. в разделе «Как Lighthouse определяет ваш показатель TTI» .
Как улучшить ТТИ
Чтобы узнать, как улучшить TTI для конкретного сайта, вы можете запустить аудит производительности Lighthouse и обратить внимание на любые конкретные возможности, которые предлагает аудит.
Чтобы узнать, как улучшить TTI в целом (для любого сайта), обратитесь к следующим руководствам по производительности:
- Минимизировать JavaScript
- Предварительное подключение к необходимым источникам
- Предварительная загрузка ключевых запросов
- Уменьшите влияние стороннего кода
- Минимизируйте критическую глубину запроса
- Сократите время выполнения JavaScript
- Минимизируйте работу основного потока
- Следите за тем, чтобы количество запросов было небольшим, а размеры переводов — небольшими.