После нажатия «Продолжить» форма замирает, хотя начальная загрузка быстрая. Проверяйте профиль конкретного взаимодействия. Причиной может быть синхронная валидация, сторонний скрипт, перерисовка или ожидание сети; длинная задача и медленный API требуют разных решений.
Повторите конкретный клик на тестовых данных
INP описывает отзывчивость взаимодействий и включает задержки до обработки, выполнение и показ следующего кадра. Официальная документация.
Укажите точное действие: ввод символа, выбор варианта или нажатие продолжения. Запишите состояние формы и размер входных данных, не сохраняя личные сведения. Быстрая начальная загрузка ничего не говорит о тяжёлой проверке после клика. Опишите ожидаемую обратную связь: сообщение, переход или состояние ожидания. Если задержка появляется только с длинным текстом, этот вход становится отдельным контрольным случаем. Не называйте всю форму медленной по одному общему баллу. Профиль должен соответствовать конкретному действию, которое пользователь воспринимает как зависание.
Отличите вычисление от ожидания сервера
| Этап действия | Где возникает задержка | Где посмотреть | Что сохранить после оптимизации |
|---|---|---|---|
| Нажатие | Обработчик события | Записать профиль | Найти работу основного потока браузера |
| Ответ API | Сетевой этап | Сравнить Network | Отдельная задержка |
| Ошибка поля | Валидация | Проверить результат | Не удалить проверку |
| Повторное нажатие | Дублирование действия | Проверить блокировку | Один предусмотренный запрос |
Синхронное вычисление может задерживать возможность показать состояние, даже когда сервер ещё не получил запрос. Медленный API способен задержать итог, но браузер при этом оставаться отзывчивым. Запишите время начала запроса, выполнения обработчика и появления сообщения или спиннера. Если браузер занят вычислением, исправляйте код обработчика; если запрос начался сразу, а ответ пришёл поздно, ищите задержку API. Проверьте прокрутку и другие элементы во время ожидания на тестовой копии. Нельзя выводить причину из спиннера: он может появиться поздно именно из-за занятого потока. Сначала сопоставьте сетевой журнал и профиль выполнения.
Найдите функцию в Performance
Начните запись Performance перед действием и остановите после появления результата. Найдите соответствующее взаимодействие, выполнение обработчиков, длинные задачи и работу layout. Посмотрите стек, чтобы определить функцию и источник кода. Если тяжёлая задача началась до клика, задержка может возникать при обработке фонового виджета. Длинная задача в записи ещё не является значением INP. Важно, мешала ли она обработать этот клик и показать следующий кадр. Метрика взаимодействия включает разные этапы, и конкретный профиль помогает понять, какой из них требуется исправить.
В Chrome начните запись Performance, нажмите тестовую кнопку и остановите запись после ответа. На дорожке Main выделите длинную задачу около клика, откройте Call tree и файл/строку функции. В Network посмотрите, начался ли запрос до зависания. Используйте тестовый обработчик: реальную заявку для записи отправлять не нужно.
Сравните короткий и длинный текст
Допустим, форма проверяет введённый текст до отправки запроса. Сравните короткий и длинный безопасный вход в одной версии и на одном устройстве. Запись должна показать, где растёт вычисление и когда начинается сеть. Затем временно замените подтверждённый тяжёлый этап на тестовой копии и повторите действие. Если без этого этапа задержка исчезла, причина найдена. В рабочем варианте нужно ускорить проверку, сохранив её результат и ошибки. Не отправляйте реальные заявки ради профиля. Используйте предусмотренный тестовый обработчик или остановите отправку после наблюдения локального этапа.
Уменьшите найденную синхронную работу
Выберите оптимизацию по стеку: устранение повторного расчёта, более эффективный алгоритм, разделение работы или подходящий worker. Не переносите DOM-операции в worker механически, поскольку ему недоступен обычный DOM страницы. Для крупной переработки сохраните соответствие результата проверки и ошибок. Если проблема в многократном layout, отделите чтения и записи по архитектуре компонента. Если в стороннем скрипте, проверьте возможность изменить его запуск. Просто добавить задержку setTimeout недостаточно, если весь тяжёлый блок снова выполняется одной задачей и мешает следующему действию.
Сохраните валидацию и защиту от дублей
После оптимизации протестируйте правильные данные, ошибочное поле, отказ сети и повторное нажатие. Сообщение «Проверяем данные» или спиннер должны появляться сразу после клика и не перекрывать форму. Кнопка не должна создавать несколько одинаковых запросов, пока действие обрабатывается. Ошибку нельзя скрывать ради ощущения скорости. Если результат приходит позже, сохраните возможность человеку понять текущий статус и восстановиться после отказа. Для клавиатуры проверьте фокус после ошибки и продолжения. После ускорения повторите действие целиком: правильные данные проходят, ошибочные показывают сообщение, а повторный клик не создаёт вторую отправку.
Повторите успешный и ошибочный сценарии
Форма быстрее показывает обратную связь после того же клика. Неверное поле всё ещё вызывает нужную ошибку, отказ сети объясняется, повторный клик не создаёт два запроса. Профиль одного действия помогает диагностике, но не заменяет INP всей аудитории.
Читайте также: INP (Interaction to Next Paint): как оптимизировать отзывчивость и JavaScript оптимизация для производительности: полное руководство для веб-разработчиков. Проверки сайта доступны на странице технического аудита reChecker.