Первая входная задержка (FID)

Philip Walton

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

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

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

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

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

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

Что такое FID?

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

Какой показатель FID считается хорошим?

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

Подробное описание FID

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

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

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

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

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

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

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

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

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

Что произойдет, если у взаимодействия нет обработчика событий?

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

Например, все следующие HTML-элементы должны дождаться завершения текущих задач в основном потоке, прежде чем реагировать на действия пользователя:

• Текстовые поля, флажки и переключатели ( <input> , <textarea> )
• Выберите из выпадающих списков ( <select> > )
• ссылки ( <a> )

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

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

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

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

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

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

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

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

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

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

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

Почему следует учитывать только задержку входного сигнала?

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

Несмотря на то, что это время важно для пользователя и влияет на удобство использования, оно не включено в этот показатель, поскольку это могло бы побудить разработчиков добавлять обходные пути, которые на самом деле ухудшают пользовательский опыт — то есть, они могли бы обернуть логику обработчика событий в асинхронный коллбэк (с помощью setTimeout() или requestAnimationFrame() ), чтобы отделить её от задачи, связанной с событием. В результате оценка по этому показателю улучшилась бы, но реакция пользователя воспринималась бы медленнее.

Однако, хотя FID измеряет только «задержку» события, разработчики, желающие отслеживать более полный жизненный цикл события, могут сделать это с помощью API Event Timing . Более подробную информацию см. в руководстве по пользовательским метрикам .

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

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

Полевые инструменты

• Отчет о пользовательском опыте Chrome
• PageSpeed ​​Insights
• Search Console (отчет Core Web Vitals)
• библиотека JavaScript web-vitals

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

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

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    const delay = entry.processingStart - entry.startTime;
    console.log('FID candidate:', delay, entry);
  }
}).observe({type: 'first-input', buffered: true});

В приведенном выше примере значение задержки first-input сигнала измеряется путем вычисления разницы между временными метками startTime и processingStart этого сигнала. В большинстве случаев это будет значение FID; однако не все first-input сигналы подходят для измерения FID.

В следующем разделе перечислены различия между тем, что сообщает API, и тем, как рассчитывается метрика.

Различия между метрикой и API

• API будет отправлять first-input данные для страниц, загруженных в фоновой вкладке, но эти страницы следует игнорировать при вычислении FID.
• API также будет обрабатывать записи first-input , если страница была переведена в фоновый режим до получения первого ввода, но такие страницы также следует игнорировать при вычислении FID (вводы учитываются только в том случае, если страница все время находилась на переднем плане).
• API не сообщает о first-input адресе при восстановлении страницы из кэша "назад/вперед" , но в таких случаях следует измерять FID (First Input ID), поскольку пользователи воспринимают их как отдельные посещения страниц.
• API не сообщает о входных данных, которые находятся внутри iframe, но метрика сообщает, поскольку они являются частью пользовательского интерфейса страницы. Это может проявляться как разница между CrUX и RUM . Для правильного измерения FID следует учитывать их. Подфреймы могут использовать API для передачи своих first-input данных родительскому фрейму для агрегирования.

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

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

Хотя для всех пороговых значений Core Web Vitals в качестве значения используется 75-й процентиль , для FID мы настоятельно рекомендуем обращать внимание на 95-й–99-й процентили, поскольку они соответствуют особенно негативному первому опыту пользователей при взаимодействии с вашим сайтом. Это также покажет вам области, требующие наибольшего улучшения.

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

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

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

Список изменений

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

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

Если у вас есть отзывы по этим показателям, вы можете оставить их в группе Google web-vitals-feedback .