DEV Community

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 CS...

Read full post

Ben Sinclair • Oct 16 '19

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.

Adrian Bece • Oct 16 '19

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.

Michiel Hendriks • Oct 16 '19

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

Adrian Bece • Oct 16 '19

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.

Antonio Dimitrovski • Oct 16 '19

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.

Benjamin Stigsen • Oct 16 '19 • Edited

The class / ID names in the HTML / JS could also be minified / replaced with something shorter, allowing one to minify the class / ID specific CSS names.

I've never use that many slashes in a sentence before

Bayu Angora • Oct 16 '19

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?