Дата публикации: 14 апреля 2025
TTI (Time To Interactive, время до интерактивности) - это ключевая метрика производительности, которая показывает, через сколько секунд после загрузки страница становится полностью отзывчивой: пользователь может кликать, скроллить и взаимодействовать с элементами без задержек.
Почему TTI важен?
- Влияние на пользовательский опыт:
- если сайт "зависает" после загрузки, 53% пользователей закрывают его (данные Google);
- оптимальный TTI - до 3,5 секунд (рекомендация Lighthouse). При превышении этого значения растет показатель отказов.
- Косвенное влияние на SEO
Хотя TTI не входит в Core Web Vitals, он тесно связан с метриками:
- INP (Interaction to Next Paint) - должен быть ≤ 200 мс (главный показатель отзывчивости с 2024 года);
- LCP (Largest Contentful Paint) - критичен для SEO, должен быть ≤ 2,5 сек;
- высокий TTI часто означает проблемы с JavaScript, которые ухудшают INP и LCP.
- Показывает реальную производительность
- Страница может быстро отобразить контент (хороший LCP), но оставаться "некликабельной" из-за долгих JS-задач. TTI выявляет эту проблему.
Кстати, если ты работаешь с PWA (Progressive Web Apps), оптимизация TTI - один из ключевых факторов успеха. Подробнее о том, как использовать PWA без мобильных приложений и увеличить конверсию, читай в статье «PWA в 2025 году: как увеличить конверсию без мобильных приложений».
Как рассчитывается TTI?
Метрика определяется в три этапа:
- FCP (First Contentful Paint) - появление первого элемента контента.
- Анализ Long Tasks - поиск JS-задач, блокирующих главный поток (>50 мс).
- 5-секундное окно стабильности - если после FCP 5 секунд нет долгих задач, фиксируется TTI.
Рекомендуемые значения (по Lighthouse):
| Хорошо | <3,5 сек |
|---|---|
| Допустимо | 3,5-7 сек |
| Плохо | > 7 сек |
Важно: для 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 и пользовательский опыт, что критично для конверсии.
