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

Published on Updated on

Translated to: English, Español, Português, 한국어

Time to Interactive (TTI) — это один из шести показателей, отслеживаемых в разделе «Производительность» отчета Lighthouse. Каждый показатель отражает определенный аспект скорости загрузки страницы.

Измерение TTI важно, потому что некоторые сайты оптимизируют видимость контента за счет интерактивности. Это может расстроить пользователя: сайт выглядит готовым, но когда пользователь пытается с ним взаимодействовать, ничего не происходит.

Lighthouse отображает TTI в секундах:

Снимок экрана аудита Time to Interactive Lighthouse

Что измеряет TTI

TTI измеряет, сколько времени требуется странице, чтобы стать полностью интерактивной. Страница считается полностью интерактивной, если:

  • На странице отображается полезный контент, который измеряется с помощью показателя First Contentful Paint,
  • Обработчики событий регистрируются для наиболее видимых элементов страницы, и
  • Страница реагирует на действия пользователя в течение 50 миллисекунд.

И показатель First CPU Idle, и TTI измеряют, когда страница готова для ввода пользователем. First CPU Idle показывает, когда пользователь может начать взаимодействовать со страницей; TTI отмечает, когда пользователь полностью может взаимодействовать со страницей. См. «Первая интерактивность и полная интерактивность» (First Interactive And Consistently Interactive) от Google, если вас интересует точный расчет для каждого показателя.

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

Оценка TTI — это сравнение TTI вашей страницы и TTI для реальных веб-сайтов на основе данных из HTTP-архива. Например, сайты, работающие в девяносто девятом процентиле, отображают TTI примерно за 2,2 секунды. Если TTI вашего сайта составляет 2,2 секунды, ваша оценка TTI равна 99.

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

Метрика TTI
(в секундах)
Цветовой код
0–3,8Зеленый (быстро)
3,9–7,3Оранжевый (средне)
Более 7,3Красный (медленно)

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

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

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

Эти два диагностических аудита предоставляют дополнительные возможности для сокращения объема работы JavaScript:

Отслеживание TTI на устройствах реальных пользователей

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

TTI может быть сложно отследить в естественных условиях. Отслеживая показатель First Input Delay (задержка первого ввода), можно получить достаточно близкое к TTI значение.

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.

Ресурсы

Updated on Improve article

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.