Listening to the talk by Andrey Sitnik from Evil Martians about CSS linters, I learned that there are heavy CSS properties that greatly affect the speed of page display in the browser. Indeed, I have noticed this before and more than once.
Web fonts, custom scroll, smooth scrolling
What I already knew:
– a large number of connected web fonts, even if 70% of them are not used – greatly slow down scrolling and page rendering.
– custom scrolling is one of the biggest evils. Worse is only custom scrolling plus js / jQuery plugin smooth scrolling effect.
Here’s what Andrey said:
– a lot of box shadow slows down rendering and scrolling of the page.
Googling about box-shadow, I found out that the larger the shadow, the more it slows down rendering and scrolling. When scrolling the page for every 30-40 pixels of scrolling, the shadow is redrawn by the browser 3-4 times! Now you need to think 10 times before sculpting the box-shadow effect. I dare to assume that the story is the same with text-shadow.
Airbnb has done a whole lot of research on this topic CSS box-shadow Can Slow Down Scrolling. Here are their results, it’s just overwhelming:
10px box-shadow blur-radius = 3 element redraws for every 40px scroll
They did not completely abandon the shadow, but changed the 10px blur to 3px blur. Read more in their article at the link. To be honest, their site would still benefit from speeding up performance. I recommend subscribing to their blog / twitter if you are a front-end developer.
border-radius and what’s wrong with it
Further down the list. After a little googling, I came across an article on identifying performance issues. The author made a couple of dozen automated tests that he ran 10 times on his site to reveal a CSS property that significantly slowed down page rendering. And that was – border-radius! And not just a radius. This property was applied to a large container that contained a lot of items. It’s like taking the main container, main, with a list of all blog posts, stuffing the sidebar and navigation into it, and giving it a rounding radius. In general, I don’t know why exactly, but these are the results that his research gave. From here we draw a conclusion. Radius for buttons and small dies – use as before. To set the radius for large dies in which almost the entire content of the page is placed, you should be more careful. If there are performance issues, take a closer look at them.
Most expensive / complex CSS properties to display
A very informative article on selectors, bloated code, and CSS properties. I recommend at least skimming through it. In short, and immediately to the conclusions.
The most expensive CSS properties are those that the browser must recalculate every time it renders an element. These include: box-shadow, border-radius, transparency (since the browser has to calculate what it shows under a semi-transparent element), transforms, and performance killers CSS filters. If productivity is your priority, then all of these are your worst enemy.
This article is about CSS properties, not selectors. But speaking of performance, one cannot but touch upon them. Use BEM naming for classes and you should be fine.
Which animations are the “cheapest” for rendering in a browser
UnCSS – Tool for detecting and removing unused CSS selectors