Оптимизация задержки ввода

Узнайте, что такое задержка ввода и как ее уменьшить, чтобы ускорить интерактивность.

Jeremy Wagner

Взаимодействия в интернете – это сложные процессы, в которых задействованы различные действия в браузере. Однако у них есть кое-что общее: перед запуском обратных вызовов событий происходит задержка ввода. В этом руководстве вы узнаете, что такое задержка ввода и как ее минимизировать, чтобы ускорить взаимодействие с сайтом.

Что такое задержка ввода?

Задержка ввода – это период времени, который начинается, когда пользователь впервые взаимодействует со страницей (например, нажимает на экран, кликает мышью или нажимает клавишу), и заканчивается, когда начинают выполняться обратные вызовы событий для этого взаимодействия. Каждое взаимодействие начинается с некоторой задержки ввода.

Упрощенная визуализация задержки ввода. Слева изображен курсор мыши со звездочкой за ним, что означает начало взаимодействия. Справа находится рисунок шестеренки, обозначающий момент, когда начинают выполняться обработчики событий для взаимодействия. Пространство между ними отмечено фигурной скобкой и подписано как задержка ввода.
Причины задержки ввода. Когда операционная система получает входные данные, она должна передать их браузеру до начала взаимодействия. Это занимает определенное время, которое может увеличиться из-за работы основного потока.

Некоторая часть задержки ввода неизбежна: операционной системе всегда требуется некоторое время, чтобы распознать событие ввода и передать его браузеру. Однако эта часть задержки ввода часто даже не заметна, и на самой странице происходят другие вещи, которые могут сделать задержки ввода достаточно длинными, чтобы вызвать проблемы.

Как оценивать задержку ввода

В целом, чтобы сайт соответствовал пороговому значению показателя Interaction to Next Paint (INP) независимо от устройства пользователя, нужно стремиться к тому, чтобы каждая часть взаимодействия была как можно короче. Контроль задержки ввода – лишь один из способов достичь этого порога.

Поэтому, чтобы достичь хорошего значения INP, нужно стремиться к минимальной задержке ввода. Однако полностью устранить задержку ввода невозможно. Если вы избегаете чрезмерной загрузки основного потока, когда пользователи пытаются взаимодействовать со страницей, задержка ввода должна быть достаточно низкой, чтобы не вызывать проблем.

Как минимизировать задержку ввода

Как уже говорилось, некоторая задержка ввода неизбежна, но в то же время некоторой задержки ввода можно избежать. Вот что можно сделать, если вы столкнулись с задержкой ввода.

Избегайте повторяющихся таймеров, которые запускают чрезмерную работу основного потока

В JavaScript есть две часто используемые функции таймера, которые могут способствовать задержке ввода: setTimeout и setInterval. Разница между ними заключается в том, что setTimeout планирует обратный вызов, который должен быть выполнен по истечении указанного времени. setInterval, напротив, планирует обратный вызов каждые n миллисекунд бессрочно или до тех пор, пока таймер не будет остановлен с помощью clearInterval.

setTimeout не является проблемой сама по себе. На самом деле она может быть полезна для предотвращения длительных задач. Однако это зависит от того, когда истекает время ожидания и пытается ли пользователь взаимодействовать со страницей во время выполнения обратного вызова.

Кроме того, setTimeout можно запускать в цикле или рекурсивно, когда он действует скорее как setInterval, хотя предпочтительно не планировать следующую итерацию до завершения предыдущей. Хотя это означает, что цикл будет уступать основному потоку при каждом вызове setTimeout, вам следует позаботиться о том, чтобы его обратный вызов не выполнял чрезмерную работу.

setInterval запускает обратный вызов с определенным интервалом, поэтому с большей вероятностью может помешать взаимодействию. Это связано с тем, что, в отличие от одного вызова setTimeout, который является одноразовым обратным вызовом, который может помешать взаимодействию с пользователем, повторяющийся характер setInterval делает гораздо более вероятным, что он будет мешать взаимодействию, тем самым увеличивая задержку ввода при взаимодействии.

Скриншот профилировщика производительности в инструментах разработчика Chrome, на котором показана задержка ввода. Задача, запущенная функцией таймера, выполняется непосредственно перед тем, как пользователь инициирует клик. Однако таймер увеличивает задержку ввода, из-за чего обратные вызовы событий взаимодействия выполняются позже, чем могли бы.
Таймер, зарегистрированный предыдущим вызовом setInterval, увеличивает задержку ввода, как показано на панели производительности в инструментах разработчика Chrome. Дополнительная задержка ввода приводит к тому, что обратные вызовы событий для взаимодействия выполняются позже, чем могли бы.

Если таймеры находятся в собственном коде, вы можете ими управлять. Подумайте, нужны ли они вам, или постарайтесь максимально сократить работу над ними. Однако таймеры в сторонних скриптах – это совсем другое дело. Часто вы не можете контролировать, что делает сторонний скрипт, и устранение проблем с производительностью в стороннем коде часто включает в себя работу с заинтересованными сторонами, чтобы определить, необходим ли данный сторонний скрипт, и, если да, установить контакт со сторонним поставщиком скриптов, чтобы определить, что можно сделать для устранения проблем с производительностью, которые они могут вызвать на вашем сайте.

Избегайте длительных задач

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

Визуализация того, как длительные задачи увеличивают задержку ввода. Вверху: взаимодействие происходит вскоре после выполнения одной длительной задачи, что приводит к значительной задержке ввода, из-за которой обратные вызовы событий выполняются намного позже, чем должны. Внизу взаимодействие происходит примерно в то же время, но длительная задача разбивается на несколько более мелких за счет уступки, что позволяет обратным вызовам событий взаимодействия выполняться гораздо раньше.
Визуализация того, что происходит с взаимодействиями, когда задачи слишком длинные и браузер не может достаточно быстро реагировать на взаимодействия, по сравнению с тем, когда более длинные задачи разбиваются на более мелкие.

Помимо минимизации объема работы, выполняемой в задаче (а вы должны всегда стремиться выполнять как можно меньше работы в основном потоке), вы можете улучшить реакцию на пользовательский ввод, разбивая длительные задачи.

Учитывайте перекрывающиеся взаимодействия

Особенно сложной частью оптимизации INP может быть наличие перекрывающихся взаимодействий. Перекрытие взаимодействий означает, что после взаимодействия с одним элементом вы выполняете другое взаимодействие со страницей до того, как у первоначального взаимодействия появится возможность отобразить следующий кадр.

Изображение того, когда задачи могут перекрываться, что приводит к длительным задержкам ввода. На этой иллюстрации взаимодействие по клику перекрывается с взаимодействием по нажатию клавиши, что увеличивает задержку ввода для взаимодействия по нажатию клавиши.
Визуализация двух одновременных взаимодействий в профилировщике производительности в инструментах разработчика в Chrome. Отрисовка, выполняемая при первом клике, вызывает задержку ввода для последующего взаимодействия с клавиатурой.

Пересечение взаимодействий может быть вызвано тем, что пользователи совершают много действий за короткий период времени. Это может произойти, когда пользователи вводят текст в поля формы, где за очень короткий период времени может произойти множество взаимодействий с клавиатурой. Если работа над ключевым событием особенно дорога, например, в обычном случае полей автозаполнения, когда сетевые запросы отправляются на серверную часть, у вас есть несколько вариантов:

  • Рассмотрите устранение дребезга контактов входных данных, чтобы ограничить количество выполнений обратного вызова события за определенный период времени.
  • Используйте AbortController, чтобы отменять исходящие запросы fetch. Это позволит избежать перегрузки основного потока при обработке обратных вызовов fetch. Примечание. Свойство signal экземпляра AbortController также можно использовать для прерывания событий.

Ещё одним источником повышенной задержки ввода из-за перекрывающихся взаимодействий могут быть ресурсоемкие анимации. В частности, анимация в JavaScript может вызывать множество вызовов requestAnimationFrame, которые могут мешать взаимодействию с пользователем. Чтобы избежать этого, по возможности используйте анимацию CSS. Это позволит не ставить в очередь потенциально ресурсоемкие кадры анимации. Однако при этом важно избегать некомбинированных анимаций, чтобы анимация выполнялась в основном в потоках графического процессора и компоновщика, а не в основном потоке.

Заключение

Хотя задержки ввода могут не составлять большую часть времени, необходимого для выполнения ваших взаимодействий, важно понимать, что каждая часть взаимодействия занимает определенное количество времени, которое вы можете сократить. Если вы наблюдаете длительную задержку ввода, то у вас есть возможность ее уменьшить. Чтобы уменьшить задержку ввода и ускорить интерактивность сайта, избегайте повторяющихся обратных вызовов таймера, разбивайте длительные задачи и учитывайте возможное перекрытие взаимодействий.