TTI

TTI (Time to Interactive) - это метрика производительности веб-страниц, которая измеряет время, необходимое для того, чтобы страница стала полностью интерактивной. Момент, когда страница достигает TTI, означает, что:

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

TTI является важной лабораторной метрикой, которая помогает оценить, насколько быстро пользователь может начать взаимодействовать со страницей - кликать по ссылкам, заполнять формы, нажимать кнопки. В отличие от FCP или LCP, которые измеряют только визуальную загрузку, TTI оценивает функциональную готовность страницы.

Зачем нужен TTI

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

**Интернет-магазинов:** пользователь должен иметь возможность сразу добавить товар в корзину.
**Веб-приложений:** интерактивность является основной функцией.
**Сайтов с формами:** пользователь не должен ждать, чтобы ввести данные.
**Мобильных версий:** на мобильных устройствах проблемы с интерактивностью особенно заметны.

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

Как измеряется TTI

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

Фиксируется момент FCP (First Contentful Paint) - первая отрисовка контента.
Начиная с этого момента, ищется временное окно продолжительностью 5 секунд, в течение которого на основном потоке не было длительных задач (long tasks) продолжительностью более 50 миллисекунд.
Время до начала этого 5-секундного окна и является TTI.

Другими словами, TTI - это момент, после которого страница остаётся достаточно свободной для немедленного реагирования на действия пользователя в течение как минимум 5 секунд.

Для расчёта TTI используются данные о длительных задачах, которые можно получить через Long Tasks API в современных браузерах.

Хорошие и плохие значения TTI

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

**Хороший TTI:** менее 3,8 секунд.
**Требует улучшения:** от 3,8 до 7,3 секунд.
**Плохой TTI:** более 7,3 секунд.

Эти значения основаны на данных о пользовательском опыте и используются в инструментах Lighthouse и PageSpeed Insights для оценки страниц.

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

Что влияет на TTI

На время до интерактивности влияет множество факторов, связанных с загрузкой и выполнением JavaScript.

Длительные задачи (Long Tasks)

Главный враг хорошего TTI - длительные задачи, блокирующие основной поток браузера. Любой JavaScript-код, который выполняется дольше 50 миллисекунд, считается длительной задачей. В течение этого времени браузер не может реагировать на действия пользователя.

Объём JavaScript

Чем больше кода нужно загрузить, распарсить, скомпилировать и выполнить, тем дольше страница остаётся неинтерактивной. Особенно это касается:

тяжёлых фреймворков и библиотек;
неоптимизированного кода;
отсутствия разделения кода на части (code splitting).

Исполнение JavaScript

Даже если код загружен, его выполнение может занимать много времени и блокировать поток. Особенно опасны:

синхронные операции;
тяжёлые вычисления на клиенте;
неэффективные алгоритмы;
частые обращения к DOM.

Загрузка ресурсов

JavaScript-файлы, которые загружаются и выполняются синхронно, блокируют отрисовку и интерактивность. Использование async/defer и критического JavaScript помогает улучшить TTI.

Третьесторонние скрипты

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

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

Оптимизация TTI требует комплексного подхода к управлению JavaScript и работой основного потока.

Уменьшение объёма JavaScript

удаление неиспользуемого кода (tree shaking);
минификация и сжатие;
использование современных форматов;
замена тяжёлых библиотек на более лёгкие альтернативы.

Разделение кода (Code Splitting)

Разделение JavaScript на части, загружаемые по мере необходимости. Код, нужный для интерактивности первых экранов, загружается сразу, остальное - позже.

Оптимизация загрузки скриптов

использование атрибутов async и defer для неблокирующих скриптов;
inline-скрипты для критического JavaScript;
отложенная загрузка для некритичного кода.

Сокращение длительных задач

разбиение больших задач на более мелкие;
использование requestIdleCallback для выполнения некритичных операций;
вынос тяжёлых вычислений в веб-воркеры (Web Workers).

Оптимизация сторонних скриптов

минимизация количества сторонних вставок;
отложенная загрузка или загрузка после взаимодействия;
использование атрибутов async/defer;
замена тяжёлых виджетов на более лёгкие альтернативы.

Оптимизация DOM

уменьшение количества элементов на странице;
упрощение структуры;
минимизация обращений к DOM.

TTI и другие метрики

TTI тесно связан с другими метриками производительности.

TTI и FID

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

TTI и TBT

TBT (Total Blocking Time) - это суммарное время всех длительных задач между FCP и TTI. TBT является составной частью расчёта TTI и более наглядно показывает проблемы с блокировкой основного потока.

TTI и INP

INP (Interaction to Next Paint) - это более современная метрика отзывчивости, входящая в Core Web Vitals. INP оценивает все взаимодействия пользователя на странице, а не только готовность к первому взаимодействию. TTI помогает предсказать потенциальные проблемы с INP.

TTI и LCP

LCP (Largest Contentful Paint) измеряет время загрузки основного контента. Хороший LCP не гарантирует хороший TTI - страница может быстро показать контент, но долго оставаться неинтерактивной.

TTI в инструментах

TTI доступен в нескольких инструментах для анализа производительности.

Lighthouse

В Lighthouse TTI отображается в разделе метрик производительности. Инструмент также даёт рекомендации по улучшению TTI, основанные на анализе JavaScript и длительных задач.

PageSpeed Insights

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

WebPageTest

WebPageTest предоставляет детальную информацию о времени до интерактивности, включая визуализацию загрузки и выполнения JavaScript.

Chrome DevTools

В инструментах разработчика Chrome можно проанализировать выполнение JavaScript, найти длительные задачи и определить, что мешает интерактивности.

Ограничения TTI

TTI является полезной, но не идеальной метрикой.

Лабораторная метрика: TTI измеряется в контролируемых условиях и может отличаться от реального опыта пользователей.
Не учитывает все взаимодействия: TTI оценивает только готовность к первому взаимодействию, но не отзывчивость после начала использования.
Зависимость от типа теста: Результаты могут варьироваться в зависимости от эмулируемого устройства и соединения.
Не заменяет полевые метрики: Для полной картины нужно смотреть на INP и другие полевые данные.

В современном вебе TBI постепенно уступает место более продвинутым метрикам, но остаётся важным диагностическим инструментом.

Связанные термины

Аноним

Поиск

TTI