Русский
English
Что там опять
22.09.2021
Как улучшить значение FID в Core Web Vitals
Что такое First Input Delay, что на самом деле измеряет метрика и как её улучшить.
Канал Google Search Central выпустил видео о том, как улучшить FID.
FID – это показатель, который оценивавает в миллисекундах, сколько времени нужно вашему сайту, чтобы дать реакцию на первое взаимодействие пользователя с контентом. Например, когда он кликает по кнопке или нажимает на поле ввода текста. FID измеряет время задержки до начала обработки данных, а не время фактической обработки этих данных.
Как и любая метрика в Page Experience, FID измеряется для каждого URL отдельно, основываясь непосредственно на опыте реальных пользователей, которые заходят на сайт. Каждый URL оценивается независимо от всех остальных страниц. Например, главная страница может иметь превосходные показатели, но страница товара или статьи будет далека от идеала.
Показатели, которые вы видите при измерении FID, транслируют опыт реальных пользователей. Показатели FID для сайта поступают из ежемесячного отчёта Chrome User Experience (CrUX).
Подробнее про отчёт Chrome User Experience
Узнать показатели своей страницы можно в инструменте PageSpeed Insights.
У страниц будут хорошие показатели FID, если как минимум у 75 % пользователей задержка действия будет менее 100 мс. Любой показатель от 100 до 300 мс даёт понять, что у вас есть проблема. Выше 300 мс – плохо.
Необязательно, что в вашем отчёте будет значение метрики FID. Почему?
FID основана на взаимодействии пользователя со страницей. Если на вашей странице нет ничего интерактивного или люди никогда не нажимают кнопки на ней и не пытаются ничего ввести, то данные для FID просто отсутствуют.
Если страницы новые или ваши URL-адреса не были включены в отчёт CrUX, вы всё равно можете отследить результаты по FID, но потребуется чуть больше усилий.
Мы можем вычислить FID, используя API. Для этого нужно добавить немного JavaScript на страницу.
Статья на web.dev на русском языке: Как измерить FID в JavaScript
Что делать, чтобы улучшить показатели
1. Удалить лишний JavaScript или выполнить его загрузку в фоновом режиме.
Проверьте, не загружается ли у вас слишком много JavaScript – больше 200 кб. Если это так, подумайте над тем, чтобы разделить код на более маленькие части (отдельные файлы).
Загрузку любого некритичного для страницы кода можно выполнить в фоновом режиме, используя атрибуты async или defer.
2. Отслеживать время задержки взаимодействия с отдельными элементами страницы. Чаще всего первое взаимодействие пользователя связано с элементом, который находится вверху страницы. Например, кнопка меню или поле поиска. Если вы не понимаете, из-за чего у вашей метрики FID низкие показатели, проверьте каждый элемент в отдельности.
3. Разбить длительные задачи. Любой фрагмент кода, который блокирует основной поток на 50 мс или более, можно рассматривать как длительную задачу. Chrome DevTools визуализирует длительные задачи на панели Performance.
Отслеживать их можно и через Long Tasks API.