How can I tell which page styles are in use?
I want to know which post styles are in use so I can delete the CSS for unused styles, to made the style file smaller.
I know I run the risk of selecting a style that I’ve removed the stylesheet for, but I am OK with that risk, because I’m fairly sure I have only allowed three styles. – I just want to prove it.
Also, I want to work our which modules and other block I’m using / not using, so I can delete the unused stylesheet information.
I have already tried minifying the stylesheets and I already compress them, but I want to try to make more improvements. Minifying the 876K stylesheet makes it 648K.
It would be a great thing if there was a way to have the stylesheet consisting of many small parts, that are then joined together to make the production stylesheet.
Hi,
Our css is not the biggest one, we found other themes with bigger ones. The css got so complex due to market demand and users don’t want simple themes anymore and the majority of users want a theme that works with a lot of other features. Many large complex themes have one large CSS file for better caching, while some others break it down into 4-6 other files. Our choice is one file for better performance and it can be minified.
We also have worked on this and now the woocommence style is in a different file which is loaded only when woocommerce plugin is active and also the demo styles were removed, each demo has its own file.
So if you want to remove some code from style.css you are free to do this if you have some basic experience. The specific css related to the post templates contain the unique class for each one for example:
– .td-post-template-default – for default post style/template
– .td-post-template-1 – post style/template 1
– .td-post-template-2 – post style/template 2
and so on
Thanks!
I just don’t want to load down my site with bloated stuff that isn’t needed.
I also found a big chunk of Buddypress CSS – why is that there?
I’ve removed some of the things I don’t think I need and that has taken the 876K down to 691K. (I estimate I can get it down another 100K.
The minified complete style.css is 648K and the cutdown minified css is 489k
Before, My story pages were loading in 8+ seconds. Now they are loading in 4 seconds.
That is better, but I want them to be faster. That is why I want to remove anything that doesn’t need to be there. I haven’t tried it with the cutdown CSS yet.
I’ve also tried most of the things suggested by Chris, including preventing Visual Composer loading in stories (posts).
After this, I will work on shrinking VC for the front page.
Then, I will try using Varnish and nginx rather than Apache.
Hi,
You can try to cut things down based on your own preference. We cannot cut things down ourselves from our own theme. All of the css is needed in order to use all of the features of the theme. If you are able to figure out what you use and need and are able to discard the rest, then good job! It’s your choice what you customize on your own copy of the theme.
For better page speed you can also take a look at this guide: https://forum.tagdiv.com/search/faster/
Thank you!
