Свойство CSS content-visibility теперь является базовым. Недавно доступно.

Опубликовано: 30 октября 2024 г.

Введение Interaction to Next Paint (INP) в качестве основного показателя Web Vital в начале 2024 года вызвало больший интерес к производительности рендеринга. Часть INP фокусируется на том, что нужно браузеру для рисования следующего кадра после того, как пользователь инициирует взаимодействие со страницей. Поддержание низкого уровня INP вашего веб-сайта означает, что пользователи будут чувствовать, что он реагирует на их взаимодействия как можно быстрее и плавнее.

Что также важно, так это работа по рендерингу, которая должна выполняться при загрузке страницы, что может привести к задержке взаимодействия с самого начала . Стоит найти способы сократить объем работы, выполняемой на этом важном этапе жизненного цикла страницы. Свойство CSS content-visibility — один из способов добиться этого, и мы рады сообщить, что теперь оно доступно в базовой версии с сентября 2024 г.!

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

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

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

.render-me-later {
  content-visibility: auto;
}

content-visibility оперирует некоторыми вариантами поведения, определенными для свойства contain в CSS Containment . Цель сдерживания CSS — обеспечить изоляцию частей дерева DOM. Это позволяет ограничить операции рендеринга определенной частью дерева DOM, поэтому макет становится недействительным и переделывается только для подмножества дерева DOM. Применение этого метода для повышения производительности рендеринга требует достаточного знания различных значений свойства contain и способов их эффективного использования.

Когда к элементам применяется content-visibility: auto , они автоматически принимают некоторые свойства, предоставляемые свойством contain . В результате затронутые элементы изначально будут отображаться с высотой 0px , что фактически означает, что они не отображаются.

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

Поскольку content-visibility недавно стала доступна в качестве Baseline Newly, у вас могут возникнуть некоторые опасения по поводу пользователей браузеров, которые еще не обновились для использования нового свойства. Учитывая, что content-visibility — это свойство CSS, вам не следует слишком беспокоиться! Браузеры, которые это понимают, будут его использовать, а те, которые этого не понимают, — нет. Это означает, что помимо преимуществ в производительности, которые вы получаете от браузеров, поддерживающих content-visibility , вы можете ожидать, что страницы будут в основном функционировать одинаково.

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