Prevent entire CSS stylesheet from loading - load only the content you need?
I am trying to improve the speed of my site as I am integrating certain features of a theme that I purchased from my site and came across this interesting feature on the website of the said theme.
Now the problem is that my CSS stylesheet is absolutely massive (220kb) and takes ages (3-4 seconds) to load. I am working to reduce this, but that's a different story ...
When I try to load the same page on the dev theme website, it loads much faster. After checking on my website, I find that the sizes of the "Size" and "Content" styles in the dev tools are about the same.
The developer page is much smaller in size than the content. Does this mean that ONLY elements called in HTML are loaded from a stylesheet? If so, how to do it, because it sounds extremely effective.
I also thought it was because the dev page was caching content in my browser, but I disabled the cache and it still only downloads part of the content.
My site's cache is working, btw I'm just curious to speed up this initial load time.
Any thoughts?
Relevant images:
The cache is disabled:
Dev site with small size / content ratio - http://i.imgur.com/B3uhOWF.png
My site with a size / content ratio of ~ 1: 1 - http://i.imgur.com/Ymu2YRz.png
source to share
Off the top of my head, you can minify your CSS. It has several free tools including the Speed Insights page for Chrome.
See https://developers.google.com/speed/docs/insights/MinifyResources
It looks like your CSS is already in the minifile, but it may not be!
People are simply not 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 minify your css anyway).
source to share
"On the developer page, the size is much smaller than the content. Does this mean that ONLY elements called in HTML are loaded from the stylesheet? If so, how can this be done, because that sounds extremely efficient."
This is not how css works. And what you describe may not be very efficient even if you implement it in some way. The server would need to know what styles to send, which would require the browser to load the page and submit it to the list, and the server would have to generate the custom css and send it back ...
You can of course restrict the css loading where - and you should. But it needs to be done manually, at least in my experience.
Anyway, a few things to consider before proceeding:
I think 200k is really, really big for a stylesheet. Most of the sites I work on with a total CSS weight can be 20k or less. I would investigate why you are so huge. Maybe something went wrong. Minification can help, but it's not going to confuse you a lot.
However, even though it is the world's largest CSS file, 200k is not large. Not 4-5 seconds. I am working on a site right now where the whole page is ~ 350KB and I load it in a second. Again, I suspect something else went wrong. The size of this CSS is probably indicative of something, but I suspect it's not just file load times.
source to share