Interaction to Next Paint

На этой неделе метрика Interaction to Next Paint (INP) перестала быть «экспериментальной» и стала полноценной частью Core Web Vitals.

Про Core Web Vitals я уже вкратце рассказывал в своём докладе на Frontend Night By Sber. Если упрощать, то это набор метрик, которые показывают, насколько удобно или неудобно пользоваться сайтом. Но чего я в своём выступлении не сказал, так это того, что от этих метрик зависит позиция вашего сайта в поисковой выдаче. Чем хуже показатели, тем ниже в результатах поиска будет ваш сайт.

Так вот, значит, INP. Эта метрика пришла на замену другой метрике, First Input Delay (FID). В чём между ними разница?

Новая метрика (INP) измеряет время, которое требуется на обработку пользовательского ввода и отрисовку изменений на странице. А старая метрика (FID) измеряет лишь то время, которое проходит между пользовательским взаимодействием и началом его обработки. То есть время на "перерендер" в старую метрику не входит. А в новую входит)) И если 12 марта ваш сайт уехал вниз в поисковой выдаче, то причина может быть именно в этой метрике.

Чем её измерять?

1) Про Lighthouse вы знаете. Добавлю только, что в обычном режиме navigation он не покажет INP, ведь ему нечего будет измерять. INP можно измерить только если вы прям будете взаимодействовать со страницей во время теста. Поэтому выбирайте режим timespan.

2) Браузерное расширение Web Vitals: выглядит не так громоздко, как lighthouse, поэтому может показаться даже удобнее.

3) npm пакет web-vitals. Удобен тем, что можно встраивать прям в свой сайт и выводить console.log с нужными вам метриками в нужных вам местах. Или, например, кидать результаты измерений прям с продакшена в google analytics или другой инструмент для сбора метрик. А если вы всё ещё используете create-react-app, то пакет web-vitals у вас уже даже установлен. Ничего больше делать не надо, бери и пользуйся))

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

И, кстати, есть ещё yellowlab. Удобный и быстрый инструмент для анализа производительности. И результаты он показывает не в метриках google, а в более конкретных показателях, таких как размер страницы, количество запросов и т.д.

И не забываем про Frontend Performance Best Practices.