Prevent loading of entire CSS stylesheet - only load needed content?

Question

I'm trying to improve my site speed as I integrate certain features of a theme I purchased into my site and came across this interesting feature on the website of said theme.

The problem I have now is my CSS style sheet is absolutely massive (220kb) and takes ages (3-4 seconds) to load. I'm working to reduce that, but that's a different story...

When I try to load that exact same page on the theme dev's website, it loads much faster. Upon inspection, on my website, I find my 'Size' and 'Content' amounts of the stylesheet in the dev tools is about identical.

On the developer's page, the size is much smaller than the content. Does this mean that ONLY the elements called upon in the HTML are downloaded from the stylesheet? If yes, how does one accomplish this, because it sounds tremendously efficient.

I also thought it was because the dev's page was caching the content on my browser but I've disabled cache and it still only loads a portion of the content.

My website's cache works by the way, I'm just interested in speeding up that initial load time.

Any thoughts?

Relevant imagery:

Cache Disabled:

Dev's website with small size/content ratio - https://i.sstatic.net/AdFO4.png

My website with ~1:1 size/content ratio - https://i.sstatic.net/Fvwvk.png

Answer 1

Off the top of my head, you could minify your CSS. There's a few free tools around including the Page Speed Insights for Chrome.

See https://developers.google.com/speed/docs/insights/MinifyResources

It looks like your CSS is already in a minified file, but perhaps the content isn't!

---

Just so people aren't confused. The solution was to enable gzip on the server, which you can read more about at https://developers.google.com/speed/articles/gzip (but still minify your css as well).

Answer 2

"On the developer's page, the size is much smaller than the content. Does this mean that ONLY the elements called upon in the HTML are downloaded from the stylesheet? If yes, how does one accomplish this, because it sounds tremendously efficient."

That's not generally how css works. And what you describe might not be very efficient even if you did somehow implement it. The server would have to know which styles to send, which would require the browser to load the page and send in it's list and the server would have to generate the custom css and send it back...

You certainly can limit which css loads where--and you should. But that has to be done manually, at least in my experience.

Anyway, a few things to consider before you proceed:

I think 200k is really, really big for a stylesheet. Most sites I work on the total CSS weight might be 20k. Or less. I'd investigate why yours is so huge. Maybe something has gone wrong. Minifying might help, but it isn't going to knock you down a whole order of magnitude.

However, even if it is the world's largest CSS file, 200k isn't THAT big. Not 4-5 seconds big. I'm working on a site right now where an entire page weighs ~350kb and I have it loading in under a second. Again, I suspect something else has gone wrong. The size of that CSS is probably indicative of something but I suspect it's not purely the time it takes the file to download.

Answer 3

Thanks to user worldofjr, I found the answer to be ENABLE GZIP on the server.

Unbelievable increase in speed.

That should be required reading whenever someone signs up for webhosting. I can't believe my site has gone 1 year without this when it took 2 seconds to enable!!!