Что такое FID? Задержка первого входа (FID)

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

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

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

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

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

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

Что такое ПИД?

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

Что такое хороший показатель FID?

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

Подробности FID

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

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

вопрос

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

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

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

Это приводит к тому, что основной поток периодически оказывается занятым (на рисунке это обозначено бежевым цветом).Задачакусок).

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

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

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

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

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

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

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

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

Текстовые поля, флажки и переключатели (ввод, текстовая область)
Раскрывающийся список выбора (выбрать)
Ссылка (а)

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

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

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

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

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

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

Другими словами, FID фокусируется наМодель производительности RAILКачество выполнения прокрутки и масштабирования больше связано с А (анимацией), поэтому качество выполнения этих операций следует оценивать отдельно.

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

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

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

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

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

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

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

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

Как измерить ПИД

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

Инструменты измерения

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

Для измерения FID в JavaScript вы можете использоватьAPI синхронизации событийВ следующем примере показано, как создатьPerformanceObserverПриходите послушатьпервый входзаписи и вход в консоль:

новый PerformanceObserver((список записей) => { для (константа вход из список записей.получитьЗаписи()) { константа задерживать = вход.ProcessingStart - вход.время начала; консоль.бревно(«Кандидат в FID:», задерживать, вход); } }).наблюдать({тип: «первый ввод», буферизованный: истинный});

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

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

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

API будет отправлять первые входные записи для страниц, загруженных в фоновых вкладках, но эти страницы следует игнорировать при расчете FID.
Если страница переходит на фоновый режим до того, как произойдет первый ввод, API также отправит записи первого ввода, но эти страницы все равно следует игнорировать при расчете FID (ввод учитывается только в том случае, если страница всегда находится на переднем плане).
Когда страница пропускаетсяКэш туда и обратноПри возобновлении работы API не сообщает о первом вводе данных, но в таких случаях следует измерять FID, поскольку это выглядит как несколько отдельных посещений страниц пользователем.
API не передаёт входные данные внутри iframe-ов, но для корректного измерения FID необходимо учитывать эти данные. Дочерние фреймы могут использовать API для передачи первых записей этих данных родительскому фрейму для агрегации.

Вместо того, чтобы помнить все эти нюансы, разработчики могут использоватьбиблиотека JavaScript web-vitalsдля измерения FID библиотека сама обрабатывает эти различия (где это возможно):

импорт {получитьFID} от «web-vitals»; // Измерьте и запишите немедленно, как только ПИД станет доступен. получитьFID(консоль.бревно);

Полный пример измерения FID в JavaScript можно найти в исходном коде getFID.

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

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

В то время как все основные веб-показатели имеют пороговые значенияПредпочтительный процентиль— это 75-й процентиль, но конкретно для FID мы настоятельно рекомендуем установить порог на уровне 95–99-го процентиля, поскольку эти процентили соответствуют особенно неудачному первому опыту пользователей на вашем сайте и могут указать, где больше всего требуются улучшения.

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

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

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

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

Для получения дополнительной информации о том, как улучшить FID, см.Оптимизация FIDДля получения дополнительных рекомендаций по другим индивидуальным методикам повышения эффективности, которые могут улучшить LCP, см.:

1/5 - (1 голос)