CSS Performance

Overview

As with the rest of your code, CSS can be optimized to offer the best loading times possible for your site. Always try to use available tools like PageSpeed Insights or your browser built-in developer tools to measure the performance of your code. Try to replicate the users environment, throttling your connection speed and disabling the cache system for example, for better real-world situations.

Performance tips

Always try to follow these guidelines in your code, and you will ensure that your code is performing well:

• Minification
• Simplify selectors
• Replace images with CSS effects
• CSS Animations
• Avoid animating expensive properties
• Critical CSS

Minification

This one is obvious (and automatic, thanks to our

gulp configuration). But it's always important to make sure that our code is correctly minified in production environments. Also, correctly concatenated, in order to limit the number o HTTP requests that we make to the server.

Simplify selectors

Using SCSS have great benefits, but sometimes it can hide away some bad practices, like overcomplicating some selectors. Even though they take miliseconds to parse, they bloat the codebase and in big projects can sum up for bigger file sizes.

Replace images with CSS effects

Don't use images for shadows, borders, rounded edges or gradients... There's usually a way to do it with CSS and that will greatly reduce the impact in download time, as well as the rendering quality in different screens. Additionally, getting the effects and images done with CSS, opens the path to add animations.

CSS Animations

Native animations will always be faster than JavaScript driven effects that modify the same properties. In any case, think about the true necessity for an animation, is it really worth it? Animations can take a great deal of processing power, hurting the performance. Also, some animations can cause motion sickness in some users.

If you're decided to add animations, try to always use the 3D rendering options ( translate3D instead of translateZ for example) as they would rely on GPU rendering, relieving the CPU sharing load in between them, resulting in a smoother performance.

Avoid animating expensive properties

In line with the previous point, animating certain properties require more painting/reflow of the page, resulting in worse performance (imagine animating some element that forces the repainting of the whole page each frame... at 60fps). Performance can be improved if the animation only affects the compositing stage. The most efficient animations use:

• opacity
• transform or translate (move, scale or rotate as the original space the element used is not altered).

Consider taking the element out of the page flow with position: absolute so it can be animated in its own layer.

Critical CSS

Most tools and audits will tell you that the "above the fold" code takes a long time to render. Depending on the situation it can be a good idea to create a separate CSS file that contains only the styles that affect the above-the-fold content, and load the rest asyncronously. This way, we only need to load a small fraction of the code, showing the first bit of the page way faster than it would take if we were to download the whole CSS file.