Карточки далеко за пределами экрана тоже могут требовать работы браузера. Свойство
content-visibility: auto позволяет пропускать работу по отображению их содержимого, пока оно не нужно пользователю. Решение о пропуске принимает браузер.В эксперименте со 150 карточками медианное время в категории Rendering, то есть работы по отображению, в Chrome DevTools снизилось с 42 до 20 мс. Это замер одной категории на тестовой странице, а не ускорение всей загрузки.
При прокрутке возникает нюанс: размеры ещё не отрисованных карточек могут уточняться, сдвигая содержимое страницы. Автор показывает, как задать запасной размер через
contain-intrinsic-size. Попробуйте пример из статьи и сравните замеры в своём браузере.#практика