Предполагаемая задержка ввода — это один из шести показателей, отслеживаемых в разделе «Производительность» отчета Lighthouse. Каждая метрика отражает определенный аспект скорости загрузки страницы.
В отчетах Lighthouse отображается расчетная задержка ввода в миллисекундах:
Что измеряет расчетная задержка ввода
Предполагаемая задержка ввода — это оценка того, сколько времени требуется вашему приложению, чтобы ответить на ввод пользователя в течение самого загруженного 5-секундного окна загрузки страницы. Время этого аудита — от первой значимой отрисовки до конца трассировки, что примерно через 5 секунд после времени до интерактивности . Если ваша задержка превышает 50 мс, пользователи могут воспринимать ваше приложение как тормозящее.
Модель производительности RAIL рекомендует, чтобы приложения реагировали на ввод пользователя в течение 100 мс, а целевой показатель предполагаемой задержки ввода Lighthouse составляет 50 мс. Почему? Lighthouse использует прокси-метрику — доступность основного потока — для измерения того, насколько хорошо ваше приложение реагирует на ввод пользователя.
Lighthouse предполагает, что вашему приложению требуется 50 мс, чтобы полностью отреагировать на ввод пользователя (от выполнения любого выполнения JavaScript до физического рисования новых пикселей на экране). Если ваш основной поток недоступен в течение 50 мс или более, у вашего приложения не останется достаточно времени для завершения ответа.
Примерно 90% пользователей столкнутся с задержкой ввода, о которой сообщает Lighthouse, или даже меньше. 10% пользователей могут ожидать более высокой задержки.
Как улучшить оценку предполагаемой задержки ввода
Чтобы ваше приложение быстрее реагировало на ввод пользователя, оптимизируйте работу вашего кода в браузере. Ознакомьтесь с серией методов, описанных на странице Google «Производительность рендеринга» . Эти советы варьируются от передачи вычислений веб-работникам для освобождения основного потока до рефакторинга селекторов CSS, чтобы выполнять меньше вычислений, до использования свойств CSS, которые минимизируют количество ресурсоемких операций браузера.
Как измерить расчетную задержку ввода вручную
Чтобы измерить расчетную задержку ввода вручную, сделайте запись с помощью временной шкалы Chrome DevTools. Пример рабочего процесса см. в разделе «Уменьшайте работу основного потока ». Основная идея состоит в том, чтобы начать запись, выполнить пользовательский ввод, который вы хотите измерить, остановить запись, а затем проанализировать диаграмму пламени, чтобы убедиться, что все этапы пиксельного конвейера завершены в течение 50 мс.