DEV Community

Discussion on: Improving CSS performance and file size - an in-depth guide

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