Как улучшить перфоманс вашего сайта на 80% всего одним CSS свойством

В этой статье я на примере покажу как браузер рисует контент сайта и как это можно оптимизировать.

Бороздил тут просторы интернета как наткнулся на сайт некой компании, не важно какой, как вдруг ноут у меня начал потихонечку нагреваться, вентиляторы загудели... Мне показалось это странным, потому что на сайте не было никаких сложных анимаций, это просто лендинг с картиночками и текстом. Чем дольше я находился на странице тем сильнее напрягался мой ноутбук. Немного поковырявшись в devtools я обнаружил причину этого и подумал — отличная идея для статьи! Если вам интересно — погнали разбираться.

Речь пойдет об этом блоке.

Я записал короткое видео, где видно как у меня подскакивает нагрузка на CPU от 0 до практически 100% просто при ховере на логотип. Как такое возможно?

Есть такая штука в браузере как слои — layers.

Браузер основные вычисления совершает с помощью процессора — CPU, но вот слои обрабатываются графическим процессором — GPU.

Чтобы упростить себе задачу браузер нарезает страницу на такие слои и отправляет их в GPU для отрисовки. Проблема в том, что браузер не всегда понимает что считать слоем и по умолчанию рисует все одним слоем. В итоге любые изменения в стилизации могут спровоцировать перерисовку всей страницы, что мы и наблюдали на видео. Пересмотрите видео и понаблюдайте за мерцаниями и морганиями — вот это она и есть, перерисовка.

Хорошие новости — мы можем подсказать браузеру что конкретно мы хотим вынести в отдельный слой такими CSS свойствами как: animation, transform, backface-visibility.

В нашем примере элементы сгруппированы через position: absolute и никаких вышеперечисленных свойств не наблюдается, что, как мы теперь знаем, замедляет работу браузера, ну и нагружает наши с вами процессоры.

Давайте теперь вооружившись знаниями вынесем всю эту группировку логотипов в отдельный слой. Для этого просто добавим свойство transform: translate3d(0, 0, 0) к родительскому элементу всех логотипов.

В результате всего одним CSS свойством мы снизили нагрузку на CPU до 5-17% вместо 70-100%! На панеле layers видно, что наш блок теперь обведен в рамку — это и есть наш слой. Теперь все анимации и позиционирование браузер рассчитывает относительно этого блока, а не всей страницы как раньше.

Пользуйтесь этим приемом, чтобы оптимизировать свои красивые лендосики с кучей анимаций — ваши будущие клиенты скажут вам спасибо. И не забывайте поглядывать в devtools — там много интересного.