Слухаючи доповідь Андрія Ситника з 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 скролла
border-radius і що з ним не так
Найдорожчі / складні CSS властивості для відображення
Найдорожчі CSS властивості - це ті властивості, які браузер повинен перераховувати кожен раз коли промальовує елемент. До них відносяться: box-shadow, border-radius, прозорість (так як браузер повинен вираховувати що показує під напів-прозорим елементом), Трансформ transform і вбивці продуктивності CSS фільтри. Якщо продуктивність ваш пріоритет, то все з перерахованого ваш найгірший ворог.
користуйтеся BEM
Статті по темі і близько: