Взаимодействие с Next Paint теперь является стабильной метрикой Core Web Vital, заменяющей задержку первого ввода.
Сегодня тот самый день! После многих лет работы мы наконец готовы сделать Interaction to Next Paint (INP) стабильной метрикой Core Web Vital. Это знаменует собой значительный шаг вперед в том, как мы измеряем скорость реагирования на взаимодействие, устраняя многие недостатки первой задержки ввода (FID) .
В этом посте мы кратко перечислим, что именно меняется сегодня, установим более конкретные сроки прекращения поддержки и удаления FID из инструментов Chrome, а также поделимся некоторыми ресурсами, которые помогут вам найти и устранить проблемы с INP.
Что меняется сегодня
Что касается Chrome, все наши инструменты Core Web Vitals теперь будут отражать стабильный статус INP, где это применимо. Например, такие инструменты, как PageSpeed Insights, панель мониторинга CrUX и расширение Web Vitals, будут более заметно отображать INP в трио основных показателей Web Vitals. В частности, в PageSpeed Insights логика оценки Core Web Vitals будет оценивать производительность INP вместо FID. Чтобы узнать больше о соответствующих изменениях в Search Console, прочтите сообщение в блоге команды поиска.
Кроме того, начиная с сегодняшнего дня некоторые инструменты могут отображать уведомление об устаревании FID в качестве предупреждения о том, что этот показатель больше не является ключевым веб-важным показателем и будет удален. В следующем разделе графика прекращения поддержки FID обсуждаются даты, которые необходимо знать, чтобы обеспечить полный переход от FID.
График прекращения поддержки FID
Теперь, когда INP заменил FID в качестве показателя Core Web Vital, Chrome официально прекращает поддержку FID. Это означает, что инструменты Chrome больше не будут гарантировать доступность FID, и разработчикам придется до 9 сентября 2024 года перейти на INP.
Это особенно важно для пользователей отчета об опыте пользователей Chrome (CrUX) или API PageSpeed Insights . Приложения, обрабатывающие данные FID из любого из этих API, должны быть переведены на INP до 9 сентября, чтобы избежать каких-либо сбоев или перебоев в обслуживании. Чтобы внести ясность, это будет кардинальное изменение в последних версиях API, и в основных номерах версий не произойдет увеличения!
Ресурсы для оптимизации INP
Независимо от того, знакомитесь ли вы с INP впервые или являетесь профессионалом в области оперативности, коллекция ресурсов по оптимизации INP станет отличной отправной точкой для поиска того, что вы ищете. Эта постоянно обновляющаяся коллекция документов охватывает все: от определения самой метрики, методов ее измерения локально и с участием реальных пользователей, практических советов по оптимизации различных вариантов использования и списка практических примеров, показывающих рекомендации в действии. .
Используя эти документы, вы можете следовать общему рабочему процессу, чтобы найти и устранить проблемы INP на вашем сайте:
Ознакомьтесь с тем, как INP измеряет оперативность взаимодействия с пользователем, в канонических документах INP .
Посмотрите на данные реальных пользователей, чтобы оценить эффективность INP вашего сайта. Чтобы считаться хорошим, не менее 75 % проектов INP должны реагировать на действия пользователя менее чем за 200 миллисекунд. Если на вашем сайте уже есть хороший INP, не переживайте!
Подключите свой URL-адрес к PageSpeed Insights или просмотрите отчет Core Web Vitals в Search Console, если ваш веб-сайт включен в набор данных CrUX .
Узнайте у своего поставщика аналитики, поддерживают ли они мониторинг INP.
Разверните собственное решение INP с помощью web-vitals.js .
При необходимости настройте свой сайт для сбора диагностической информации о пользовательском опыте. Это важные метаданные, например, с каким элементом страницы взаимодействовал пользователь и почему он работал медленно, а также другие полезные данные. В совокупности эта информация поможет вам понять самые большие возможности для улучшения.
Воспроизводите медленное взаимодействие локально с помощью Chrome DevTools. Это поможет вам точно увидеть, что происходит «под капотом» и какой код вызывает нарушение.
Оптимизируйте свой код , чтобы выполнять как можно меньше работы при взаимодействии с пользователем:
Измеряйте изменения локально и отслеживайте опыт реальных пользователей, чтобы гарантировать, что производительность вашего INP растет (и остается!) быстро.
Надеемся, что это руководство направит вас на правильный путь к оптимизации INP. Если у вас возникнут какие-либо проблемы на этом пути, вы всегда можете получить помощь, опубликовав вопрос с пометкой interaction-to-next-paint в Stack Overflow.
Запуск INP в качестве основного веб-важного показателя состоялся уже давно, оглядываясь назад на нашу первую публикацию о создании лучшего показателя оперативности в 2021 году. С тех пор мы учли все замечательные отзывы сообщества и разработали показатель, который мы твердо верим, что это поможет разработчикам улучшить недостаточно обслуживаемую область взаимодействия с пользователем, что в конечном итоге приведет к улучшению сети. Спасибо всем за помощь в формировании этой метрики и за всю вашу тяжелую работу по улучшению состояния реагирования!