TTI (Time To Interactive): что это и как влияет на конверсию и SEO

Дата публикации: 14 Апр 2025

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

Почему TTI важен?

1. Влияние на пользовательский опыт:  

•  если сайт «зависает» после загрузки, 53% пользователей закрывают его (данные Google);  
•  оптимальный TTI — до 3,5 секунд (рекомендация Lighthouse). При превышении этого значения растет показатель отказов.

2. Косвенное влияние на SEO  

   Хотя TTI не входит в Core Web Vitals, он тесно связан с метриками:  

• INP (Interaction to Next Paint) — должен быть ≤ 200 мс (главный показатель отзывчивости с 2024 года);  
• LCP (Largest Contentful Paint) — критичен для SEO, должен быть ≤ 2,5 сек;
• высокий TTI часто означает проблемы с JavaScript, которые ухудшают INP и LCP.

3. Показывает реальную производительность

• Страница может быстро отобразить контент (хороший LCP), но оставаться «некликабельной» из-за долгих JS-задач. TTI выявляет эту проблему.

Кстати, если ты работаешь с PWA (Progressive Web Apps), оптимизация TTI — один из ключевых факторов успеха. Подробнее о том, как использовать PWA без мобильных приложений и увеличить конверсию, читай в статье «PWA в 2025 году: как увеличить конверсию без мобильных приложений».

Как рассчитывается TTI?

Метрика определяется в три этапа:  

1. FCP (First Contentful Paint) — появление первого элемента контента.  
2. Анализ Long Tasks — поиск JS-задач, блокирующих главный поток (>50 мс).  
3. 5-секундное окно стабильности — если после FCP 5 секунд нет долгих задач, фиксируется TTI.

Рекомендуемые значения (по Lighthouse):

Важно: для SEO ориентируйтесь на INP и LCP, но оптимизация TTI помогает улучшить их.

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

1. Оптимизация JavaScript:

• разделение кода (code splitting) + удаление неиспользуемого (tree shaking);  
• асинхронная загрузка скриптов (`async`/`defer`).  

2. Сокращение времени выполнения кода:  

• минификация JS/CSS (Webpack, Terser);  
• отложенная загрузка второстепенных скриптов (`lazy-load`).  

3. Ускорение сервера:

• кеширование (CDN, `Cache-Control`);
• предзагрузка ключевых ресурсов (`<link rel=»preload»>`).  

4. Контроль сторонних скриптов

• Аналитика, чаты и виджеты часто замедляют TTI. Загружайте их после основного контента.

Как проверить TTI?  

• Chrome DevTools → Вкладка Performance.  
• Lighthouse → Отчет Core Web Vitals.  
• WebPageTest → Точные метрики для глубокого анализа.  

Пример проблемы:

• FCP: 1.8 сек → Долгие задачи: 2.5 сек → TTI: 6.3 сек (требуется оптимизация JS).  

TTI — важный индикатор производительности, особенно для PWA и сложных веб-приложений. Хотя он не влияет на SEO напрямую, его оптимизация улучшает INP и пользовательский опыт, что критично для конверсии.