Hi,
Newsmag CSS is too heavy:
js_composer
801.611 kb
style
589.912 kb
style
116.628 kb
Total CSS:
1560 kb (1551.767 external css / 8.704 internal css)
Standard css theme file should be less than 75K, Is there anyway you can optimize the theme ( inline css, combine ).
I also try to remove the javascripts, and css rendering with speed booster but it didn’t work properly.
Thank
Any theme framework using Visual Composer will have that file – it’s not technically part of theme; so hundreds of themes using VC will have that payload, but it’s the plus and minus to this kind of fancy site.
You can minify the main css file per my suggestions in my sticky post on optimization, which helps quite a bit.
Also, luckily this stuff actually gets zipped/compressed when sent to browser and cached so not being loaded over and over.
There is also code in my optimization sticky on topic of disabling VC loading on post pages where it’s not used (at least in my case).
Sadly, for highly complex and “lots of features” sites, there *is* a big payload, but not so bad — some themes make it seem smaller by loading 10 diff CSS files, where here it’s all combined.
Standard size CSS for most complex themes is actually about 550KB — not 75KB. It’s not apples to apples, it’s apples to watermelons — footprint is quite different.
But you can optimize stuff quite a bit for speed and Google pagespeed rating, which should be the main target for using large complex “feature-packed” themes like this one.
That might not have helped, but some feedback (I’ve been doing webdev 20 years and using WP 10 years, so not totally nuts over here… at least most of the time) đ
Thank Chris,
I’m new here and should have look at the sticky post. Your guide is really a big help for me, I did try most of the tips and the site is a lot faster now.
Also, I dig in a lots in the “render blocking css” issues, tag div speed booster seem not to work for me, I tried to move with many ‘id’ but it didn’t work, but I found another way to use W3 Total Cache to combine the css file together and move it to the footer by this code:
<!– W3TC-include-css –> ( put it before wp_footer(); )
But still, there is fonts.googleapis.com/css ( there is around 3,4 files for the font Open + Sans and Roboto + Condensed ) which I can’t move using this method.
If by any chance, could you have a look and provide better method of removing those css file to footer?
Ken
I had done a tutorial somewhere once upon a time which I don’t think is part of my sticky, only because the locale moved several times between themes …
but best way to optimize fonts (broad strokes):
a) disable loading from the main includes/functions file
b) copy the rendered css from Google for the stylesheet
c) put the actual CSS at bottom of the main style.css
this way you’re loading the fonts, but *not* the actual CSS sheet which is just a redirect loading the fonts from Google (so this saves loading the external style sheet, essentially)…
working on an ebook to cover all this stuff in detail but a bit behind ….
