SEO блог

Первая задержка ввода (FID) является важной, ориентированной на пользователя метрикой для измерения скорость реагирования на нагрузку. Метрика оценивает опыт, который пользователи чувствуют при попытке взаимодействовать с страницами. Низкий FID помогает гарантировать, что страница является пригодной для использования.

Мы все знаем, как важно произвести хорошее первое впечатление. Это очень важно при знакомстве с новыми людьми, и это также важно при создании опыта сети Интернет.

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

В Интернете первые впечатления могут принимать самые разные формы — у нас появляются первые впечатления от дизайна и визуальной привлекательности сайта, а также первые впечатления от скорости сайта и его отзывчивости.

Сложно измерить насколько пользователям нравится дизайн сайта с помощью веб-API, но измерить скорость и скорости реагирования, можно легко!

Первое впечатление пользователи имеют о том, как быстро можно измерить нагрузку на ваш сайт с помощью First Contentful Paint (FCP). Но то, как быстро ваш сайт может рисовать пиксели на экране, является лишь частью истории. Не менее важно то, насколько отзывчивым является ваш сайт, когда пользователи пытаются взаимодействовать с этими пикселями!

Метрика First Input Delay (FID) помогает измерить первое впечатление пользователя интерактивность и отзывчивость вашего сайта.

Что такое FID?

FID измеряет время с момента первого взаимодействия пользователя с вашим сайтом (т.е. когда они щелкают ссылку, нажимают на кнопку или используют пользовательский элемент управления с поддержкой JavaScript) до времени когда браузер действительно способен реагировать на это взаимодействие.

Как разработчики которые пишут код, реагирующий на события, мы часто предполагаем что наш код будет запущен сразу же как только произойдет событие. Но как пользователи, мы все часто сталкиваемся с противоположным. Мы загрузили веб-страницу на нашем телефоне, попытались взаимодействовать с ней, а затем были разочарованы когда ничего не произошло.

В общем случае задержка ввода происходит из-за того, что основной поток браузера занят чем-то другим, поэтому он не может (пока) ответить пользователю. Одна из распространенных причин, по которой это может произойти — браузер занят анализом и выполнением большого JavaScript файла загруженного вашим приложением. Пока он это делает, он не может запускать события, потому что JavaScript может указывать ему делать что-то еще.

Рассмотрим следующую временную шкалу типичной загрузки веб-страницы:

В приведенной выше визуализации показана страница, которая выполняет несколько сетевых запросов для ресурсов (скорее всего CSS и JS файлы) после завершения загрузки этих ресурсов — они обрабатываются в главном потоке.

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

Большие задержки при первом вводе обычно происходят между First Contentful Paint (FCP) и Time to Interactive (TTI), потому что страница визуализировала часть своего содержимого, но еще не является интерактивной. Чтобы проиллюстрировать, как это может произойти, FCP и TTI были добавлены на временную шкалу:

Вы возможно заметили что между FCP и TTI существует довольно много времени (включая три длительных задачи) если пользователь попытается взаимодействовать со страницей в течение этого времени (например, перейти по ссылке) произойдет задержка до того момента когда основной поток сможет ответить.

Рассмотрим, что произойдет, если пользователь попытается взаимодействовать со страницей в начале самой длинной задачи:

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

В этом примере пользователь случайно взаимодействовал со страницей в начале наиболее загруженного периода основного потока. Если бы пользователь взаимодействовал со страницей на мгновение раньше (в период простоя), браузер мог бы ответить сразу же. Это отклонение в задержке ввода подчеркивает важность рассмотрения распределения значений FID при составлении отчетов по метрике. Вы можете прочитать больше об этом в разделе ниже на анализ и отчетность по данным FID.

Почему рассматривается только первый вход?

Хотя задержка с любым вводом может привести к плохому пользовательскому опыту, мы в первую очередь рекомендуется измерять первую задержку на входе по нескольким причинам:

• Первая задержка ввода будет первым впечатлением пользователя об отзывчивости вашего сайта, а первые впечатления имеют решающее значение для формирования общего впечатления о качестве и надежности сайта.
• Самые большие проблемы с интерактивностью, которые мы видим в Интернете сегодня, возникают во время загрузки страницы. Поэтому мы считаем, что изначально сосредоточение на улучшении взаимодействия с первым пользователем сайта будет иметь наибольшее влияние на улучшение общей интерактивности сети.
• Рекомендуемые решения о том, как сайты должны исправлять высокие задержки при первом вводе (разделение кода, загрузка меньшего количества JavaScript и т.д.). Не обязательно являются теми же решениями для исправления медленных задержек ввода после загрузки страницы. Разделяя эти показатели мы сможем предоставить более конкретные рекомендации по производительности для веб-разработчиков.

Что считается первым вводом?

FID — это метрика, которая измеряет скорость отклика страницы во время загрузки. Таким образом, он фокусируется только на событиях ввода от отдельных действий, таких как клики и нажатия клавиш.

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

Иными словами, FID фокусируется на R (отзывчивость) в модели производительности RAIL, тогда как прокрутка и масштабирование больше связаны с A (анимация) и их характеристики производительности должны оцениваться отдельно.

Что делать, если пользователь никогда не взаимодействует с вашим сайтом?

Не все пользователи будут взаимодействовать с вашим сайтом каждый раз, когда они посещают его. И далеко не все взаимодействие имеет отношение к FID (как упоминалось в предыдущем разделе). Кроме того, первое взаимодействие некоторых пользователей будет происходить когда основной поток занят в течение длительного периода времени, а другие попадут в момент когда основной поток полностью простаивает.

Это означает, что у некоторых пользователей не будет значений FID. Часть пользователей будет иметь низкие значения FID, а других будут высокие значения FID. То как вы отслеживаете и анализируете FID, вероятно будет несколько отличаться от других метрик.

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

FID — это метрика, которую можно измерить только в полевых условиях, поскольку для взаимодействия с вашей страницей требуется реальный пользователь. Вы можете измерить FID с помощью следующих инструментов.

• PageSpe Insights
• Отчет об опыте пользователей Chrome
• Мониторинг производительности Firebase (бета-версия)

Измерение FID в JavaScript

Вы можете измерить FID в JavaScript, используя Event Timing API . В следующем примере показано? как создать объект PerformanceObserver который прослушивает first-input вычисляет FID и записывает значение в журнал на консоли:

// Catch errors since some browsers throw when using the new `type` option.
// https://bugs.webkit.org/show_bug.cgi?id=209216
try {
  // Create the Performance Observer instance.
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      const fid = entry.processingStart - entry.startTime;
      console.log('FID:', fid);
    }
  });

  // Start observing first-input entries.
  observer.observe({
    type: 'first-input',
    buffered: true,
  });
} catch (e) {
  // Do nothing if the browser doesn't support this API.
}

Анализ и отчетность по данным FID

Из-за ожидаемого отклонения в значениях FID очень важно, чтобы при составлении отчетов вы смотрели на распределение значений и сосредоточились на более высоких процентах. На самом деле, мы рекомендуем специально сосредоточиться на 95-99 процентах, так как это будет соответствовать особенно плохим первым впечатлениям. И он покажет вам области, которые нуждаются в наибольшем улучшении.

Это верно даже при сегментации отчетов по категориям или типам устройств. Например, если вы запускаете отдельные отчеты для настольных и мобильных устройств, значение FID которое вам больше всего нужно на настольном компьютере, должно составлять 95–99%. А значение FID на мобильном телефоне должно быть 95-99% для мобильных пользователей.

Что такое хорошая оценка FID?

Чтобы обеспечить хороший пользовательский опыт, сайты должны стремиться к тому чтобы задержка первого ввода составляла менее 100 миллисекунд. Чтобы убедиться, что вы достигли этой цели для большинства своих пользователей, нужно получить не менее 75% загрузки для всех мобильных и десктопных устройств.

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

Чтобы узнать, как улучшить FID для конкретного сайта, вы можете запустить Lighthouse и обратитm внимание на показатели которые предлагает данный аудит.

Хотя FID является полевой метрикой (а Lighthouse лабораторным инструментом), руководство для улучшения FID это то же, что и для улучшения общего показателя лабораторной метрики полного времени блокировки (TBT).

Автор статьи — Philip Walton
Над переводом работал — Черепинец Илья
Оригинал статьи https://web.dev/fid/