Если у вас на странице много контента (лента постов, длинные таблицы, каталоги товаров), браузер тратит кучу ресурсов на расчет макета и отрисовку даже тех элементов, которые находятся глубоко за пределами экрана.
Свойство content-visibility: auto указывает браузеру пропустить рендеринг элементов до тех пор, пока они не окажутся близко к области видимости.
.card-item {
/* Браузер не рендерит содержимое карточки, пока она вне экрана */
content-visibility: auto;
/* Задаем примерную высоту, чтобы скроллбар не прыгал */
contain-intrinsic-size: 0 300px;
}
