Что такое время до первого взаимодействия (TTI)?

Что такое Time to Interactive (TTI)?

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

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

TTI вычисляется на основе двух ключевых моментов:

• Страница должна быть визуально отображена (First Contentful Paint).
• Основной поток браузера должен быть свободен от длительных задач (long tasks) в течение как минимум 5 секунд.

Длительные задачи — это задачи, выполняющиеся дольше 50 мс, которые блокируют взаимодействие. TTI фиксируется после того, как сеть и основной поток стабилизируются.

Пример кода для отслеживания TTI

Хотя TTI обычно измеряется инструментами вроде Lighthouse, можно приблизительно оценить его с помощью Performance Observer:

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  entries.forEach(entry => {
    if (entry.name === 'first-contentful-paint') {
      console.log('FCP:', entry.startTime);
    }
  });
});
observer.observe({ type: 'paint', buffered: true });

// Для TTI требуется более сложная логика, обычно через библиотеки

Где применяется TTI?

TTI критически важен для пользовательского опыта, особенно на мобильных устройствах и при медленных соединениях. Низкий TTI означает, что пользователь быстро может начать взаимодействие, что улучшает вовлеченность и конверсию. Метрика используется в аудитах производительности (Lighthouse, WebPageTest) и для оптимизации загрузки скриптов, уменьшения размера JavaScript и устранения длительных задач.

Вывод

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