Что такое задержка первого ввода (FID) Сделайте свой сайт быстрым, версия 2022

Что такое задержка первого ввода?

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

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

Задержка первого входа измеряется в миллисекундах (мс).

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

FID измеряет только первое взаимодействие

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

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

FID измеряет задержку ввода, а не обработку

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

Чем задержка первого ввода отличается от времени до интерактивности

Time to Interactive — это очень полезная метрика производительности, которая существует уже некоторое время. может показаться очень похожим на задержку первого входа.

Время до интерактивности (TTI) измеряет время, необходимое для того, чтобы страница стала полностью интерактивной. Он регистрируется, когда на странице уже отображается ценный контент (по данным First Contentful Paint), обработчики событий регистрируются для большинства элементов страницы, а взаимодействие с пользователем обрабатывается в течение 50 мс.

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

Время до интерактивности отображается в Lighthouse.

Почему задержка первого ввода — хороший показатель для улучшения

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

Только по этой причине это отличный показатель для мониторинга и оптимизации, поскольку он определяет пользовательский опыт вашего сайта.

С точки зрения SEO теперь официально Задержка первого ввода вот-вот начнется влияние на рейтинг вашего сайта.

Первая задержка ввода — это один из трех показателей производительности (вместе с кумулятивным смещением макета и наибольшим отрисовкой контента), которые Google хочет продвигать в своем Инициатива Core Web Vitals.

Первая задержка ввода — это метрика, которая отслеживает скорость отклика веб-сайта, в то время как CLS отслеживает визуальную стабильность, а LCP отслеживает скорость загрузки.

Google сделал Core Web Vitals часть его алгоритма ранжирования когда обновление Page Experience было запущено в июнь 2021.

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

Как измерить FID на вашей странице

Инструменты

Следующие инструменты могут показать вам ваш FID, собранный в поле:

Использование JavaScript для измерения FID

Вы также можете измерить FID, добавив JavaScript на свою страницу.

Есть два способа сделать это:

Добавьте следующий код на свою страницу, чтобы распечатать FID в консоли:

import {getFID} from 'web-vitals'; 
getFID(console.log);

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

Этот код был предоставлен Филипом Уолтоном. в своей статье о FID, опубликованной на web.dev.

let firstHiddenTime = document.visibilityState === 'hidden' ? 0 : Infinity;
document.addEventListener('visibilitychange', (event) => {
  firstHiddenTime = Math.min(firstHiddenTime, event.timeStamp);
}, {once: true});

function sendToAnalytics(data) {
  const body = JSON.stringify(data);
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
      fetch('/analytics', {body, method: 'POST', keepalive: true});
}

try {
  function onFirstInputEntry(entry, po) {
    if (entry.startTime < firstHiddenTime) {
      const fid = entry.processingStart - entry.startTime;
      po.disconnect();
      sendToAnalytics({fid});
    }
  }

  const po = new PerformanceObserver((entryList, po) => {
    entryList.getEntries().forEach((entry) => onFirstInputEntry(entry, po));
  });

  po.observe({
    type: 'first-input',
    buffered: true,
  });
} catch (e) {
}

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

Исследования показывают, что задержка в 100 мс воспринимается как вызванная сопутствующим источником. 0,1 секунды речь идет о пределе за то, что пользователь чувствует, что система реагируют мгновенно.

По этим причинамэто хорошо попробовать и держите ваш FID ниже 100 мс.

Это отражено пороговыми значениями FID в PageSpeed ​​Insights:

• FID 100 мс или меньше считается хорошим,
• FID от 100 до 300 мс нуждается в улучшении,
• FID выше 300 мс считается плохим.

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

Максимальная потенциальная задержка первого ввода — наихудший сценарий

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

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

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

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

MPFID — это лабораторная метрика, включенная в Lighthouse. Чтобы увидеть его, экспортируйте отчет Lighthouse для своей страницы в файл JSON.

Как эмулировать FID в лаборатории

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

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

TBT — это лабораторный показатель, который вы можете измерить в Lighthouse.. Если вы улучшите свой TBT, вы, скорее всего, улучшите и свою задержку первого ввода.

Вы также можете использовать Time To Interactive в качестве аналогичной точки отсчета.

Как MercadoLibre использовала общее время блокировки для улучшения задержки первого ввода

MercadoLibre — ведущая платформа электронной коммерции. в Латинской Америке. Использование общего времени блокировки в качестве прокси-метрикикоманде MercadoLibre удалось улучшить задержку первого ввода на своем веб-сайте и общую интерактивность.

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

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

Результатом стало снижение Max Potential FID в Lighthouse на 90 % и улучшение FID на 9 % в отчете об опыте использования Chrome.

Оптимизация FID

Если вы не удовлетворены своей оценкой FID, это обычно указывает на то, что использование JavaScript или CSS не оптимизировано.

Как улучшить FID, оптимизировав код CSS

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

Как улучшить FID, оптимизировав JavaScript-код

Задачи JavaScript обычно являются причиной длительной задержки ввода. Блокируя основной поток браузера на длительное время, они не позволяют ему обрабатывать пользовательский ввод.

Ниже приведены некоторые стратегии, которые вы можете использовать, чтобы свести к минимуму время, в течение которого основной поток блокируется JavaScript:

Разбивайте длинные задачи на более мелкие асинхронные задачи.

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

Создавайте как можно больше контента статическина стороне сервера.

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

Изучите загрузку стороннего кода по запросу.

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

Используйте веб-воркеры.

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

Отложите неиспользуемый JavaScript.

Использовать асинхронный или же откладывать поэтому JavaScript выполняется только тогда, когда это необходимо. Если вы используете современный JS, настройте модули ES6 для загрузки по требованию.

Минимизируйте неиспользуемые полифиллы.

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

Убедитесь, что полифиллы не запускаются, если они не нужны. Доставка отдельных пакетов с использованием модуля/номодуля.

Бездействует до срочного

Бездействует до срочного — это стратегия оценки кода, разработанная Филипом Уолтоном из Google.

Эта стратегия использует элементы двух самых популярных подходов к оценке кода: нетерпеливая оценка а также ленивая оценка.

Страстная оценка означает, что весь ваш код запускается сразу. Такой подход приводит к тому, что страница загружается в течение длительного времени, пока не станет полностью интерактивной, но затем работает плавно, без каких-либо сбоев.

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

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

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

Чтобы узнать подробности об этом подходе к оценке кода, прочитайте Статья Филипа Уолтона и ознакомиться с бездействующая до срочного библиотека JavaScript.

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