DEV Community

Cover image for Improving CSS performance and file size - an in-depth guide

Improving CSS performance and file size - an in-depth guide

Adrian Bece on October 16, 2019

Table Of Contents What makes CSS slow File size CSS rendering Reducing CSS file size Minification Optimization Compression ...
Collapse
 
moopet profile image
Ben Sinclair

I'm dubious about tips relating to decreasing the transfer size for CSS assets.

They're loaded once, and cached. Or they're served from a CDN. Once they're loaded they're unpacked in milliseconds where whitespace makes no difference and the difference between short-forms and full forms is inconsequential unless you have millions of rules.

What that means is maybe a dozen milliseconds more load time for the first page and then no perceivable effect on subsequent pages.

Keeping selectors simple is more worthwhile, but still most people won't notice the difference, especially when you consider that your CSS is likely aggregated with that provided by the five hundred "essential" plugins your framework bundles.

Collapse
 
adrianbdesigns profile image
Adrian Bece

Speaking from experience working on an massive eCommerce site, minifying, concatenating and optimizing 2MB CSS file to 350kB-ish file resulted in an increase of mobile users. The improvement also added lazy loading for images and minifying JS and it boosted the number of mobile users significantly.

The problem was that users on mobile and slower connections would perceive the site as slow and unresponsive due to the massive file being loaded.

It's true that everything is well after that first load, but users might give up if they wait too long for that first load.

Collapse
 
elmuerte profile image
Michiel Hendriks

If you can play the Doom shareware episode in the size of your CSS you are doing something really wrong.

Thread Thread
 
adrianbdesigns profile image
Adrian Bece

I've done quite a few audits of various sites in my career. I have seen some really crazy stuff I haven't thought of possible. Including the CSS and JS files with source maps included.

Collapse
 
dimitrovski_a profile image
Antonio Dimitrovski

You are wrong, compressing the CSS speed up the website quite a lot.
After caching the website is fast but big BUT the first load it's most important the first load is the load that make sales, make great user experience etc...

Slowly 2019 is coming to end, every again every website should load critical CSS per URL and load the rest 99% of the CSS after the page as non render blocking.

Me as SEO Manager, I can't hire someone to optimize CSS if the developer don't know what critical CSS is and how to do it.

It was hard to find a developer who know how to do technical SEO optimization per instruction so if the website is WordPress I'm doing it myself but can't do it at custom coded website. Please educate yourself for SEOs needs because nearly every website is searching for SEO services.

Every one will ask you as developer to optimize the website as speed is ranking factor now.

We can extend further this conversation with examples and I can show you the difference white space is doing or speaking about discarding invalid CSS properties other than CSS 3.

Let's extend this conversation I might be able to find someone reliable that I can hire in the future.

Collapse
 
bayuangora profile image
Bayu Angora

I have this code ->

.entry {
background: #fff;
transition: transform 0.5s ease, background 0.5s ease;
}
.entry:hover {
transform: scale(1.02);
}
.darkmode .entry {
background: #444;
}

Is that efficient?

Collapse
 
simonholdorf profile image
Simon Holdorf

I like your Posts Adrian, good Job!

Collapse
 
adrianbdesigns profile image
Adrian Bece

Thank you very much, Simon.

Dev.to and the community really inspired me to write articles more often and put more work into them.

Collapse
 
peke314 profile image
Victor Janin

Great article! Thank you for taking the time to write this, very insightful

Collapse
 
adrianbdesigns profile image
Adrian Bece

Thank you very much. Glad you like it!

Collapse
 
ryanpwalker profile image
Ryan Walker

Correct me if I'm wrong but http/2 is fine if all of the stylesheets come from the same server, otherwise multiple http requests slows down mobile.

Collapse
 
alidhuniya profile image
Ali Hussain Dhuniya

A very helpful and informative post. It's good to animate position, scale, rotate and opacity.
for more: html5rocks.com/en/tutorials/speed/...

Collapse
 
adrianbdesigns profile image
Adrian Bece

Thank you. I do remember reading this article quite a while back.