Time to Interactive

Недавние исследования Google показали, что 53% посетителей покидают мобильный сайт, если его загрузка занимает более трех секунд. Но результаты, которые всплыли в процессе данных исследований стали шокирующими. Огромное количество сайтов, в своей мобильной версии при слабом интернет-сигнале, готовы к полноценному взаимодействию спустя только 22 секунды. После этого, поисковые системы изменили алгоритм ранжирования, поставив на первое место именно скорость загрузки. И сколько бы денег вы не вложили в платное продвижение, если не проведена полная оптимизация сайта и он работает медленно, поисковики не предложат его пользователям. После этого появилось большое количество скоростных интернет-ресурсов.

При проведении оптимизации сайта, некоторые веб-разработчики уделяют внимание исключительно скорости загрузки страницы. И это в корне неправильный подход. Настройки должны осуществляться полноценные и затрагивать все аспекты. Помимо простой загрузки различных ресурсов, составляющих веб-страницу, также необходимо учитывать время выполнения JavaScript. Это время, которое требуется браузеру для выполнения элементов JavaScript, которые делают страницу интерактивной. И все они добавляют время к традиционным показателям загрузки страниц. А если говорить непосредственно о взаимодействии — то являются даже важнее.

Одним из важнейших показателей в данном сегменте является Time to Interactive. Это время, за которое контент страницы становится функциональным и готовым для взаимодействия с пользователем после стабилизации контента. Это не опция, а критерий оценки.

Что такое показатель Time to Interactive

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

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

Все показатели измеряются в миллисекундах. Полностью интерактивной страница является только при соблюдении трёх основных правил:

•  На странице отображается полезный контент, который измеряется первой содержательной краской

•  Обработчики событий регистрируются для наиболее видимых элементов страницы

•  Страница реагирует на взаимодействие с пользователем в течение 50 миллисекунд и менее

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

Как измерить TTI

Одним из основных расширений, которое в настоящее время использует TTI в качестве метрики в своих отчетах, является расширение Chrome Lighthouse. «Маяк» использует TTI как фактор измерения общей эффективности сайта. Запустив сайт с Lighthouse и проведя его тестирование, на выходе становится доступным подробный отчет об общей эффективности сайта его доступности и реальном времени, которое пользователи затрачивают на взаимодействие с ним.

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

Все показатели имеют как цифирное, так и цветовое значение:

•  Быстро (зелёный) — 0,5-2 секунды

•  Средне (оранжевый) — 5,3-7,3 секунды

•  Медленно (красный) — выше 7,3 секунды

Стоит учитывать, что отследить Time to Interactive на устройствах реальных пользователей, а не на собственном ПК или мобильном устройстве, несколько сложнее. Для этого разработан метод getFirstConsistentlyInteractive(), используя который в Google Analytics,можно отследить TTI. Для его применения необходимо ввести приблизительно следующий скрипт:

import ttiPolyfill from ‘./path/to/tti-polyfill.js’;

ttiPolyfill.getFirstConsistentlyInteractive().then((tti) => {

ga(‘send’, ‘event’, {

eventCategory: ‘Performance Metrics’,

eventAction: ‘TTI’,

eventValue: tti,

nonInteraction: true,

});

});

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

За счёт чего улучшить показатели Time to Interactive

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

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

Задумываться о TTI и всём, что на него влияет, необходимо ещё на этапе этапе разработки сайта. Продумать шрифты, визуальные элементы и саму структуру страницы. Это делается не только с точки зрения «красиво», а что куда важнее — уровень производительности, которую сайт способен дать пользователю. В противном случае, потребуется проведение оптимизации с частичным ребренингом.