⌨️ 150 карточек на странице. Видны только пять

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

В эксперименте со 150 карточками автор измеряет рендеринг в DevTools и разбирает следующий вопрос: как сохранить геометрию страницы, пока содержимое пропущено. Для этого пригодится contain-intrinsic-size с примерной высотой блока.

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

🐸 Библиотека программиста