CSS content-visibility: Улучшение производительности веб-сайтов

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

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

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

.my-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

CSS свойство contain-intrinsic-size — сообщник content-visibility в преступлении. Оно предоставляет оценку размера, чтобы браузер мог зарезервировать место перед рендерингом, предотвращая смещение макета.

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

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

Однако content-visibility — это не бесплатная магия. Каждый элемент с content-visibility: auto становится отдельным содержащим блоком. Это может повлиять на позиционирование и привязку к прокрутке. Вот на что следует обратить внимание:

/* Это может вызвать неожиданное поведение */
.container {
  content-visibility: auto;
  position: relative;
}

.child {
  position: fixed;  /* Теперь относительно контейнера */
}

Экспериментируя с content-visibility в различных сценариях, я пришёл к выводу, что лучше всего он работает, когда:

1. Разделы чётко определены и независимы
2. Контент ниже первого экрана — сложный
3. Пользователям, не нужен немедленный доступ к скрытому контенту.

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

Комментарии