Table Of Contents
What makes CSS slow
File size
CSS rendering
Reducing CSS file size
Minification
Optimization
Compression
...
For further actions, you may consider blocking this person and/or reporting abuse
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.
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.
If you can play the Doom shareware episode in the size of your CSS you are doing something really wrong.
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.
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.
I have this code ->
Is that efficient?
I like your Posts Adrian, good Job!
Thank you very much, Simon.
Dev.to and the community really inspired me to write articles more often and put more work into them.
Great article! Thank you for taking the time to write this, very insightful
Thank you very much. Glad you like it!
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.
A very helpful and informative post. It's good to animate position, scale, rotate and opacity.
for more: html5rocks.com/en/tutorials/speed/...
Thank you. I do remember reading this article quite a while back.