Освоение INP: как использовать видимость контента для повышения отзывчивости

Хотите узнать секрет отзывчивости веб-страниц, более плавного взаимодействия с пользователем и отличного результата INP?

Это эффективная работа по рендерингу.

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

Из следующих строк вы узнаете, как использовать свойство CSS content-visibility , чтобы значительно повысить производительность вашего сайта, повысить основные веб-показатели и улучшить взаимодействие с пользователем.

Читай дальше.

Количественная оценка реакции на взаимодействие с следующей картинкой (INP)

90% времени пользователь проводит на странице после ее загрузки.

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

Это глючно? Обеспечивает ли он плавную прокрутку? Это отзывчиво?

Все ответы скрыты за вашим баллом INP.

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

Ключевое слово здесь «визуально».

Никто не ожидает, что все ваши взаимодействия будут выполнены за пару миллисекунд. Это просто невозможно. Все, что вам нужно сделать, чтобы получить хороший балл INP и Core Web Vitals, — это обеспечить немедленную визуальную обратную связь о действиях посетителей на вашем веб-сайте.

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

И два важнейших фактора, которые сильно влияют на скорость рендеринга, — это основной поток и размер DOM.

Роль основного потока и размера DOM

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

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

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

Среди главных виновников — большие ресурсы JavaScript и, что не менее важно, большой размер DOM.

Это процесс. Теперь давайте демистифицируем каждую часть.

Основная тема

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

• HTML, парсинг CSS
• Выполнение JavaScript
• построение объектной модели документа (DOM)
• добавление вычисляемых стилей
• создание дерева макета
• создание записей о покраске

Если выполнение задачи занимает более 50 мс , она считается длинной задачей . В основном это происходит из-за интенсивной работы файлов JavaScript или большого размера DOM.

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

Почему?

Представьте, что у вас есть веб-страница с интерактивной функцией, например сложной визуализацией данных или динамическим пользовательским интерфейсом. Пользователь запускает действие, скажем, нажимая кнопку, что инициирует тяжелые вычисления JavaScript (выполнение которых занимает более 50 мс).

Это автоматически создает несколько проблем с производительностью и отзывчивостью вашего сайта:

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

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

DOM (объектная модель документа)

Одной из основных задач потока является анализ HTML.

Это означает, что браузер превращает данные (разметку HTML) в DOM.

DOM представляет структуру страницы в виде дерева объектов, которые браузер использует для отображения контента на экране.

Больший размер DOM обычно означает большее количество узлов (элементов, текста, комментариев и т. д.), которыми может управлять браузер.

Если у вас большой размер DOM, главному потоку приходится выполнять больше работы. Требуется больше времени для анализа HTML в DOM, применения стилей CSS, макета страницы и повторной визуализации частей страницы при возникновении изменений (например, посредством манипуляций JavaScript).

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

Итак, хорошее практическое правило — чтобы страница имеларазмер DOM до 1400 узлов.

Один из способов повысить эффективность основного потока и смягчить влияние большого DOM — контролировать рендеринг закадрового контента.

И это свойство CSS может помочь вам в этом…

Использованиевидимости контентадля улучшения рендеринга

CSS -свойство content-visibility — это новаторское дополнение к набору инструментов оптимизации веб-производительности.

Это свойство, особенно его автоматическая настройка, играет ключевую роль в повышении эффективности рендеринга веб-страниц. Атрибут content-visibility: auto сообщает браузеру, что он может пропустить расчеты рендеринга и макета для элемента до тех пор, пока он не понадобится, что обычно происходит, когда элемент попадает в область просмотра.

При применении content-visibility: auto позволяет браузеру оптимизировать рабочую нагрузку рендеринга. Откладывая рендеринг невидимого контента, контент-видимость значительно сокращает начальное время загрузки и снижает рабочую нагрузку на основной поток, что приводит к более высокой скорости рендеринга и улучшению отклика веб-страницы.

Практический пример, когда content-visibility: auto светится, — это оптимизация Interaction to Next Paint.

Например, в сообщении блога с несколькими комментариями или на новостном сайте с длинной прокруткой применение content-visibility: auto к отдельным комментариям или новостным статьям, которые не видны сразу, гарантирует, что браузер будет реагировать на действия пользователя и быстро загружает видимый контент.

Вот простой способ реализовать это:

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

Видимость контента в действии

Во время нашего вебинара с Google на тему «Оптимизация INP» у нас была возможность продемонстрировать влияние видимости контента и то, как NitroPack ее применяет.

Мы определили основную причину плохого INP с помощью нескольких инструментов — расширения Web Vitals, Chrome DevTools и профилировщика производительности.

В процессе мы обнаружили, что основными виновниками, вызвавшими оценку INP в 272 мс, были два события «стиля пересчета», обработка которых заняла 69,87 мс и затронула 1139 элементов.

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

Кроме того, оценка INP улучшилась с «нужно улучшить» до «хорошо».

Подготовьте свой веб-сайт к будущему и пройдите INP на автопилоте. Получите NitroPack прямо сейчас →

Дополнительные советы по оптимизации INP

Несомненно, видимость контента обеспечивает значительный прирост производительности при минимальных усилиях.

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

1. Выход в основной поток

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

Этого можно достичь с помощью возвращающих функций, таких как:

• планировщик.доходность()
• setTimeout
• запросАнимацияFrame
• запросIdleCallback

2. Уменьшите размер DOM

Второй упомянутой причиной отзывчивости был размер DOM. Наличие большого размера DOM может существенно затруднить прохождение INP. Чтобы предотвратить это, крайне важно минимизировать его размер или, точнее, ограничить глубину DOM.

Эта цель может быть достигнута с помощью различных стратегий:

• Держитесь подальше от плагинов и тем, которые плохо закодированы.
• Ограничьте использование JavaScript для создания узлов DOM.
• Выбирайте альтернативы конструкторам страниц, которые создают чрезмерный HTML.
• Рассмотрите возможность разделения одностраничного веб-сайта на несколько страниц.
• Не скрывайте ненужные элементы с помощью свойства CSS display: none.
  

3. Избегайте дублирования взаимодействия

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

Чтобы оптимизировать это, рассмотрите:

• Реализация устранения дребезга на входах для уменьшения частоты обратного вызова событий.
• Использование AbortController для отмены текущих запросов на выборку, предотвращая перегрузку основного потока из-за чрезмерных обратных вызовов выборки.
  

Заворачивать

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

Пользователи хотят знать, что их действия обрабатываются и что что-то происходит в фоновом режиме.

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

Протестируйте NitroPack бесплатно →