Тяжелые CSS свойства которые заставляют ваш браузер тормозить

Тяжелые CSS свойства которые заставляют ваш браузер тормозить

Слушая доклад Андрея Ситника из Evil Martians про CSS линтер, я узнал что существуют тяжелые CSS свойства, которые сильно влияют на скорость отображения станицы в браузере. И действительно, я замечал это ранее и не раз.

Веб шрифты, custom scroll, smooth scrolling

То, что мне уже было известно:

— большое количество подключенных веб-шрифтов, даже если 70% из них не используются — сильно тормозят прокрутку и рендеринг страницы.

— кастомный скролл — одно из самых больших зол. Хуже только кастомный скролл плюс js/jQuery плагин smooth scrolling effect.

Box-shadow

Вот что сказал Андрей:

— box shadow в большом количестве замедляет рендеринг и прокрутку страницы.

Погуглив на тему box-shadow, я узнал что чем больше тень, тем сильнее она тормозит рендеринг и прокрутку. При скролле страницы на каждые 30-40 пикселей скролла, тень перерисовывается браузером заново по 3-4 раза! Теперь следует 10 раз подумать прежде чем лепить box-shadow эффект. Смею предположить что с text-shadow та же история.

Исследование airbnb

Airbnb провели целое исследование на эту тему CSS box-shadow Can Slow Down Scrolling. Вот их результаты, это просто ошеломляет:

10px box-shadow blur-radius = 3 перерисовки элемента на каждые 40px скролла

От тени полностью они не отказались, но поменяли 10px blur на 3px blur. Подробнее у них в статье по ссылке. Сказать честно, их сайту и сейчас явно не помешало бы ускорить производительность. Рекомендую подписаться на их блог/твиттер если вы фронтэнд разаботчик.

border-radius и что с ним не так

Дальше по списку. Еще немого погуглив, я обнаружил статью про выявление проблем с производительностью. Автор сделал пару десятков автоматических тестов, которые запускал по 10 раз на своем сайте, чтобы выявить CSS свойство которое значительно тормозило отрисовку страницы. И это был — border-radius! Причем не просто радиус. Это свойство было применено к большому контейнеру, в котором располагалось очень много элементов. Это как если взять главный контейнер main со списком всех статей на блоге, запихнув в него же сайдбар и навигацию, и задать ему радиус скругления. В общем не знаю почему именно, но вот такие результаты дало его исследование. Отсюда делаем вывод. Радиус для кнопок и небольших плашек — используем как и ранее. Для задания радиуса большим плашкам в которых помещен чуть ли  не весь контент страницы следует относится осторожнее. Если есть проблемы с производительностью, присмотритесь к ним.

Самые дорогие / сложные CSS свойства для отображения

Очень познавательная статья про селекторы, раздутый код и CSS свойства. Рекомендую хотя бы бегло ее просмотреть. Если вкратце и сразу к выводам.

Самые дорогие CSS свойства — это те свойства, которые браузер должен пересчитывать каждый раз когда прорисовывает элемент. К ним относятся: box-shadow, border-radius, прозрачность (так как браузер должен высчитывать что показывает под полу-прозрачным элементом), трансформами transform и убийцы производительности CSS фильтры. Если производительность ваш приоритет, то все из перечисленного ваш худший враг.

Пользуйтесь BEM

Эта статья про CSS свойства, а не про селекторы. Но говоря о производительности нельзя их не затронуть. Пользуйтесь BEM именованием для классов и все у вас будет в порядке.

 

Статьи по теме и около:

Какие анимации самые «дешевые» для рендеринга в браузере

UnCSS — Инструмент для определения и удаления неиспользуемых CSS селекторов