Stoyan is absolutely correct. As much as we all love CSS, it’s still an important player in how websites load and using less of it is a good thing. He has a neat new bookmarklet called CSS Me Not to help diagnose unnecessary CSS files, but we’ll get to that in a moment.
The [problem] is that CSS is in the critical path, it blocks rendering and often even JavaScript execution. We love CSS, it’s magic, it can do unbelievable feats and fix broken UIs and manipulate images and draw amazing pictures. We love CSS. We just want… less of it, because of its inherently blocking nature.
Sometimes our sites use entire stylesheets that are simply unnecessary. I hate to admit it, but WordPress is a notorious offender here, loading stylesheets for plugins and blocks that you might not even really be using. I’m in that position on this site as I write. I just haven’t found the time to root out a couple of little stylesheets I don’t need from loading.
Stoyan created a quick bookmarklet called CSS Me Not to see all those CSS files. The big benefit, of course, is that it lets you know what you’re up against.
You could find these stylesheets in DevTools as well, but the CSS Me Not bookmarklet makes it extra easy and has a killer bonus feature: turning off those stylesheets. Testing the bookmarklet here on CSS-Tricks, I can see four stylesheets that WordPress loads (because of settings and plugins) that I know I don’t need.
If you wanted to do this in DevTools instead, you could filter your Network requests by CSS, find the stylesheet that you want to turn off, right-click and block it, and re-load.
I’ve been fighting this fight for ages, dequeuing scripts and styles in WordPress that I don’t want.
Removing totally unused stylesheets is an obvious win, but there is the more squirrely issue of removing unused CSS. I mention in that post the one-true-way of really knowing if any particular CSS is unused, which is attaching a background-image to every selector and then checking the server logs after a decent amount of production time to see which of those images were never requested. Stoyan corroborates my story here:
UnCSS is sort of a “lab”. The “real world” may surprise you. So a trick we did at SomeCompany Inc. was to instrument all the CSS declarations at build time, where each selector gets a 1×1 transparent background image. Then rummage through the server logs after a week or so to see what is actually used.
Yup. you get all block style CSS downloaded whether you use them or not. woo-commerce? All them too. “Cool Gutenberg blocks”? uh-uh.
Someone, somewhere, suggested that with HTTP2 you might as well include the CSS and JS in the as you bring each “component” in. If repeated then the browser local cache lookup would say “we already got this”.
Mmmph – yeah it’s rubbish in WP
Or in Firefox, it’s in the traditional menus: View → Page Style → No Style.
If you’re wondering why the other option in that submenu is “Basic Page Style”, it’s because browsers supported multiple themes for websites long, long before
@prefers-color-schemewas a thing. It’s called alternative style sheets. Almost no one actually used it, so Chrome never bothered to implement it, not sure if Safari currently supports it, so I suspect Firefox may be the only browser that supports it now. Demo at https://www.w3.org/Style/Examples/007/alternatives.en.html.I feel like I’m fighting a different war, but it might just be the same fight.
I see CSS as being an important building block, but JavaScript as an evil, that is often unnecessary.
I totally understand that excessive CSS is not needed, but in general it does important things, while half of the JS we use is for whole libraries (where only a tiny bit is used) or even just for tracking our usage.
What ruins the performance of a website, CSS or Javascript? Less javascript is much better than less CSS. We use javascript frameworks that double or triple the total weight of CSS files. In fact, we are sometimes inclined to use javascript frameworks that we didn’t really need to use. So I see no reason to focus on CSS exclusively.
I agree that JS is a bigger target, but it does matter. CSS can block the JavaScript from even starting. That matters.