Ваша страница загружается быстро, но кажется медленной? Это INP

Ваш отчет Lighthouse выглядит зеленым. LCP в норме. CLS в норме. Страница загружается быстро.

Затем ваши показатели в реальных условиях падают. Вы не понимаете почему.

Проблема, скорее всего, в INP. Interaction to Next Paint заменил FID в марте 2024 года. FID измерял только первую задержку. INP измеряет каждое взаимодействие, пока пользователь находится на вашей странице. Он сообщает о самом медленном из них.

INP — это не метрика загрузки. Это метрика отзывчивости. Она отвечает на один вопрос: когда вы кликаете или печатаете, сколько времени проходит до изменения экрана?

Google использует следующие диапазоны:

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

Инструменты Lighthouse часто упускают INP. Lighthouse не кликает по вашим кнопкам. Он дает лишь оценку. У вас может быть «зеленый» лабораторный отчет и «красный» показатель в реальных условиях (field score).

Чтобы увидеть реальное число, используйте этот код:

import { onINP } from 'web-vitals';
onINP(function (metric) {
  console.log('INP', metric.value, metric.entries);
});

Это записывает медленное взаимодействие и конкретный элемент.

Проблемы с INP возникают из-за того, что основной поток (main thread) занят. Браузер не может отрисовать ответ, пока не завершится задача JavaScript.

Распространенные причины:

Исправьте это, разбивая длинные задачи. Дайте браузеру «передохнуть» между шагами:

async function onClick() {
  doUrgentPart(); 
  await yieldToMain(); 
  doExpensivePart(); 
}

Используйте yieldToMain, чтобы позволить браузеру отрисовать интерфейс перед началом тяжелой работы.

Другие способы исправления:

Перестаньте смотреть только на LCP, если ваши реальные показатели низки. Вместо этого измеряйте свои взаимодействия.

Source: https://dev.to/lamas51/your-page-loads-fast-but-still-feels-slow-its-inp-not-load-time-2gkn