Свойство contain в CSS положительно влияет на производительность веб-страницы. 13 Оно позволяет указать, что элемент и его содержимое максимально независимы (изолированы) от остальной части дерева документов. 1
Это даёт возможность браузеру пересчитать макет, стиль, размер или любую их комбинацию для ограниченной области DOM, а не для всей страницы сайта, что повышает производительность. 1
Например, свойство полезно на страницах, на которых установлено большое количество сторонних виджетов, так как они могут ухудшить производительность сайта, производя ресурсозатратные операции компоновки, стиля и отрисовки. 1 Чтобы отделить эти процессы от процессов сайта, можно установить свойство contain: strict для внешнего элемента стороннего виджета. 1
Также свойство contain помогает, если на сайте есть элементы, находящиеся вне экрана, но появляющиеся на нём при определённом действии (например, выезжающее меню). 1 Если установить свойство contain: paint, браузер перестанет рендерить элемент вне экрана и отрисовывает остальное содержимое быстрее. 1
Однако в некоторых случаях, особенно при использовании строгого значения strict, браузер может потребовать дополнительных ресурсов для оптимизации рендеринга, поэтому важно тестировать и измерять производительность при использовании свойства. 2