Скажем, вы попали в ловушку безумия черного рынка или аукциона, где победитель определяется тем, кто первым щелкнет пальцем по кнопке. Вы нажимаете кнопку, чтобы добавить товар в корзину, но веб-сайт регистрирует ваш запрос с небольшой задержкой, из-за чего вы теряете ставку. Это не потому, что вы были медленными, а из-за задержки ввода. Хотя это крайний случай задержки ввода, многие из нас сталкивались с задержками интерактивности при использовании Интернета. Это может раздражать и негативно сказываться на пользовательском опыте. Это также влияет на видимость нашего веб-сайта, поскольку Google наказывает сайты, которые не соответствуют стандартам Core Web Vitals.

First Input Delay (FID) теперь является официальным фактором ранжирования Google. FID измеряет скорость отклика веб-сайта, в то время как Cumulative Layout Shift (CLS) отслеживает визуальную стабильность, а Largest Contentful Paint (LCP) измеряет скорость загрузки. Google включил Core Web Vitals в свой алгоритм ранжирования в июне 2021 года.

Но что вызывает эту задержку ввода и как ее можно исправить? Давайте рассмотрим эти вопросы подробнее:

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

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

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

Какие взаимодействия можно измерить?

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

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

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

Пользователи воспринимают интерактивность веб-сайта как превосходную, когда время отклика составляет менее 100 миллисекунд (0,1 секунды). Чтобы быть в безопасности, лучше стремиться к показателю FID менее 0,1 секунды.

Как мы можем улучшить оценку FID?

  1. Оптимизация CSS: Есть несколько вариантов оптимизации CSS. Когда страница визуализируется, файлы CSS необходимо загрузить и проанализировать, чтобы нарисовать макет веб-страницы. Это событие имеет высокий приоритет, поскольку макет и визуальная эстетика значительно влияют на взаимодействие с пользователем. Такие методы, как минификация, могут использоваться для сокращения времени загрузки CSS, как обсуждалось в моем ПРЕДЫДУЩЕМ БЛОГЕ.
  2. Оптимизация JavaScript:
  • Разбивайте длинные задачи на более мелкие асинхронные задачи: это позволяет основному потоку браузера обрабатывать вводимые пользователем данные, пока выполняются более мелкие задачи.
  • Стремитесь уменьшить рендеринг данных на стороне клиента: рендеринг большего количества данных на стороне клиента увеличивает нагрузку на основной поток браузера. Рассмотрите возможность использования рендеринга на стороне сервера.
  • Оцените компромисс между использованием сторонних сервисов и кода для отслеживания аналитики и взаимодействия с пользователем: эти сервисы могут быть полезными, но могут повлиять на работу пользователей. Анализ компромисса имеет решающее значение.
  • Используйте веб-воркеры: делегируйте часть работы основного потока веб-воркерам, уменьшая рабочую нагрузку на основной поток. Веб-воркеры позволяют запускать код JavaScript в отдельном потоке, что приводит к меньшей задержке ввода.
  • Асинхронный/ожидающий или отложенный неиспользуемый JavaScript: разрешите выполнение кода JavaScript только при необходимости, чтобы основной поток был менее занят.

Измерение ПИД

Для измерения FID вы можете использовать библиотеку web-vital JavaScript.