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