Excessive CSS

Good Morning,
I think I need some details about how your CSS in combination with Cloud Library works.
My site speed is overall pretty good and I have a clean site without too much going on. However, the source code of the page reveals almost 6000 lines of code and optimization pages are recommending to reduce the filesize – which I understand.
Now, I know that my simple header, footer, post template and content do not require 6000 lines of code or all that CSS in there. How can I get rid of it? How do we actually only use and load what is relevant and needed? The CSS analyzer tool would not removed the unused CSS correct? It just regroups the code and moves it to the end as far as I understand.
Any details that could help? There are just too many references in CSS which probably aren’t even used on the whole website. I just want to make sure that my pages only contain CSS which the page is using, I hope that makes sense.

Thank you.

Hi Bettina,
I’m not looking for page speed, my site is blazing fast.
I’m just curious why the pages are so bloated with thousands of lines and unused CSS. I don’t think I need custom services, if the theme is placing 6000 lines of code on one page which is using only a couple of styles, that is a theme issue.
Any way when creating new headers or pages to only publish the CSS code that is indeed being used?

Hi Bettina,

As I mentioned, I have no speed issues. My site is crazy fast. A, 99%, 600ms. Again, this is NOT about speed.

This is about coding and unnecessary thousands of lines of code on every single page. Usually my page has less than 800 lines, with your theme it is in the 6000s.

My question was, how to load a page with only the code that is necessary. Code wise the site is just bloated.

Thank you.

Hi Bettina,
So according to the video, this works only on pages and not posts. Indeed I can’t see the save button on my end. Also the tool tip says that this is only moving the CSS below the fold at the end of the page which means it still loads.
Any more insights on this?
Thank you.

Hi Calin,

Unfortunately, that does not work for posts. My content on a blog is written in posts not pages.
No optimize plugin is able to cut your code of the source file. Still trying to learn why all that not needed code gets loaded on the page. Even Bing Webmaster Tools is complaining about it, see screenshot.
https://prnt.sc/ZhFbPVUgOFL4

Hello,

I would not like to share it public but you can see on any of your demos that your theme is loading an excessive amount line of codes.

Thanks.

It is sad to see a developer not acknowledging the issue and then trying a workaround. It was a simple question with no solution. It was asked why you load so much code, why is it so bloated. You can check any demo of your cloud templates and see the problem right there. The use of plugins to fix this is just a band aid.

Yup, the css code is such bloat! Way too excessive – more than 80% of it is unused. The function available in theme to reduce this simply DOESNT WORK.
Only way to trim it efficiently is via wp-roc$*&@t – not marketing a third party plugin – but, only best/efficient way.

I use that plugin already but still get the massive amount of CSS shown. Which options do you use to get rid of it?
Beside this issue, the most annoying part is that there has never been an explanation of WHY there is so much unnecessary CSS code. The CSS code for a cloud template should be based on the options and selections we make in the tagdiv editor.

Using the “remove unused css” option – ensure you have a mobile template enabled so you don’t remove some necessary “unused” css. Why? – Enabling this with a global template appears to break frontend appearance for some blocks. Took a while to get this right, but works.