that’s weird … AO aggregates the CSS (and JS) found in the HTML, so size _should_ be slightly smaller (because of minification). What CSS optimization options did you have active @paulmartinsen? could you re-enable AO so I can do some tests?
Hi Frank,
Wow, I didn’t expect such a fast reply. Thanks!
I’ve been exploring a little more and toggling AO on and off (I thought there was a query string parameter I could use to do this but I can’t find it again).
I made some progress.
We use the code crayon plugin to format code. I found its CSS in the home page’s AO.css file, even though no code is on that page and the CSS wasn’t referenced when AO is off. I found a comment on the authors blog that makes me wonder if they are adding the CSS file to a list then pulling it out again if the plugin isn’t used.
http://aramk.com/blog/2012/01/07/enqueuing-themes-and-fonts-in-crayon/
We’re also using the Jupiter theme by artbees. With AO off, the page references:
full-styles.6.1.1.css. This is in a folder with a bunch of other css files. It looks like AO is automatically including them (based on the content of AO’s css file). This is the main thing that is blowing out the file size.
When I exclude:
wp-content/plugins/crayon-syntax-highlighter/themes/classic,
wp-content/themes/jupiter/assets/stylesheet
AO’s css file returns to a much more manageable 17.7 kb.
The downside is that this leaves a separate request for the other stylesheets that block for a bit (because of number of parallel content requests by the browser).
So I was wondering if there is a way to tell AO to exclude a folder, but include a specific css file from it? It would be great if there was an extra parameter in the config section where we could give it a specific file to include. I guess that might be more complex than it sounds since I believe order matters for css.
Any idea why AO would be grabbing all these extra CSS files? If there is anything I can do/send you to help solve that one, please don’t hesitate to ask. I’m happy to provide access to our test site if that would be useful.
I’ve turned AO back on again, though it has those exclusions now.
This really is a nice plugin. Thanks for all your hard work on it.
Kind regards
Paul.
We’re also using the Jupiter theme by artbees. With AO off, the page references:
full-styles.6.1.1.css. This is in a folder with a bunch of other css files. It looks like AO is automatically including them (based on the content of AO’s css file). This is the main thing that is blowing out the file size.
well, that is very weird, AO’s MO is to scan the HTML for a page, to extract the CSS, to try to do the @imports in that CSS and to put all of that in one file (or more if there are different media-attributes involved) …
so let’s try to gain an understanding here, starting with some questions:
* can you confirm that when (briefly) switching themes there is no AO CSS bloating any more?
* can you confirm the problem also occurs with all plugins disabled, only using the Jupiter theme?
* does the Jupiter theme have any options to change how CSS is generated/ loaded? if so, which ones and does toggling these make any difference?
* do you have any plugins that have options to change how CSS is generated/ loaded? if so, which ones and does toggling these make any difference?
frank
Hi Frank,
It is indeed strange!
I removed the CSS exclude filters and confirmed we were back to 1.2MB for AO’s css file.
* I switched to the Twenty Seventeen theme. AO’s css file is a sensible 117 kB
* Crayon Syntax Highlighter plugin was active, I deactivated it and AO’s css file dropped to 101kB. Interestingly, if I active the syntax highlighter and turn off AO’s CSS optimization the crayon.min.css file is only 3.8 KB, less than the difference in AO’s css file. I suspect AO is including more css files from the syntax highlighter.
* I turned Jupiter back on, confirmed we were back to the big css file from AO then turned off all the plugins that weren’t needed for Jupiter. That left: WPBakery Page Builder, Really Simple SSL, Artbees Themes Captcha and Autoptimize. AO’s css was 1.1MB.
* Jupiter has speed optimization to minify theme styles files. Turning that off made no difference to the size of AO’s css file. It also has something called “global lazy load”, but turning that off didn’t make a difference either.
* Crayon Syntax Highlighter has an option “Enqueue themes in the header” which sounds like it does something with css. turning that off dropped AO’s css file from 691k to 101k with the Twenty Seventeen theme. Though not consistently; it was a bit confusing.
So the Jupiter theme really does seem to be at the root of the problem here. I’ve put the site back to Jupiter so it it is making the large files. I left the css for convertplug excluded because that seems to attach per user tags to the css so the AO keeps creating lots of new CSS files, as explained in one of your FAQs.
Hope that helps,
Kind regards
Paul.
Such a mystery …
OK, my main problem; Jupiter is premium so I cannot test myself, but what we could do;
1. log a ticket at artbees; maybe this is a known issue? maybe there is an easy fix? if not getting their assistance might be helpful anyway.
2. if you could set up a test-site, stock WordPress + AO + Jupiter and give me access, then I could do some tests there
3. alternatively I could give you instructions on where/ how to add debug-code to AO and we could work from there?
The problem got me pretty curious really, so I’ll be happy to spend some time on this! 🙂
frank
A puzzle wrapped up in an enigma!
I’m travelling for the next couple of days. When I get back I’ll setup an account so you can access our test site. Would you mind contacting me using paul at megunolink.com so I can send you the login credentials?
I’ll see if I can raise a ticket with Artbees too.
Thanks for your help,
Paul.
For anyone else seeing this ‘problem’:
It turned out that the server we are using is configured not to compress files greater than 1 MB and the developer tool I was using was only reporting the transferred size and not the content size.
The theme we are using has quite a large CSS file. So when AO joined them all together, we went over the 1MB limit and see a large file transferred. When AO is disabled, each CSS file gets transferred with compression so it looks smaller overall.
Frank was super helpful figuring this out. The solutions he proposed:
* best: tweak litespeed config to also compress the AO’ed CSS-file
* alternative: tweak litespeed config to allow PHP in wp-content/cache/autoptimize/* being executed and then disable the AO option to serve the files statically.
I’ll investigate these.
Thanks Frank for all your help. AO is awesome!
Paul.
Thanks Frank for all your help. AO is awesome!
thanks @paulmartinsen, feel free to leave a review here! 😉
Frank was super helpful figuring this out. The solutions he proposed:
* best: tweak litespeed config to also compress the AO’ed CSS-file
* alternative: tweak litespeed config to allow PHP in wp-content/cache/autoptimize/* being executed and then disable the AO option to serve the files statically.
I’ll investigate these.
Hey Paul,
Did you ever solve this problem? I’m seeing this exact same issue with a different theme.
luminsol; as a workaround you could always exclude 1 or 2 large CSS-files from CSS optimization, bringing the total size under 1MB and end up with 1 compressed AO CSS-file and 1 or 2 compressed non-optimized files?
Thanks for the reply. I did remove the largest one which was caused by Visual Composer. But unfortunately there’s no way to control the order of the non optimised CSS. In my case it breaks the layout of the site, as it needs to be loaded before Autoptimizer’s CSS.
arghh … 🙂
well, you could;
* exclude one of more _other_ css-files
* OR tell AO to inject the autopitmized CSS later using (a variation of) this code snippet:
add_filter('autoptimize_filter_css_replacetag','inject_css_later',10,1);
function inject_css_later($replacetag) {
return array("</head>","before");
}
* OR (have your hoster) fix the root cause (litespeed config)
@optimizingmatters i really dont know how to reach you. sorry totally different matter, my autoptimize plugin in having a conflict with some elementor page builder addon the javascript of the page builder does not work any more.
until i unchecked this setting option but my site optimization isnt what it once was.
By default Autoptimize is also active for logged on users, uncheck not to optimize when logged in e.g. to use a pagebuilder.
how to i resolve this issue please.
