376 files, totalling 414891 Kbytes in Cache

regarding number of files/ cache size; that indeed is rather a lot. but how long has AO been running without the cache having been purged? and are those mostly .js or .css files?

regarding code to exclude checkout/ cart, there are 2 issues;
1. make sure to remove the double-slash in front of the first line;

add_filter('autoptimize_filter_noptimize','my_ao_noptimize',10,0);

2. the conditional check should be;

if (strpos($_SERVER['REQUEST_URI'],'/carrinho/')!==false) {

hope this helps,
frank

Hi Frank,
thanks for your fast response!
Funny how I totally didn’t get the the excluding cart & checkout pages right.
Got it working now, thanks a lot!
Concerning the first part of the question.

How can I determine how much of the cache is .js or .css?

I’d like to figure out a way to reduce the size.
That accumulated in about 2 weeks.

Thanks for your help,

well, if you have static delivery active (default, last option), then CSS lives in wp-content/cache/autopitmize/css/ and JS in wp-content/cache/autoptimize/js/. count the number of .css or .js files in there to know.

I have about double as many css cache files compared to JS.
Also the css cache files are on average about 1.5mb while the js are around 200-300kb.

Any ideas what might be causing this and how I can potentially reduce it?

hmmm … can you remind me of the URL of your site? ??

Hi,

sorry. Thought I had posted it ??
cormilu.com.br

ok, so I had a quick look, the reason is you have significant differences in the CSS being loaded between different pages (I compared your home, /loja/ and /ideias-para-decorar/).

gravity forms, for example, is loaded on /loja/ (a.o. the contact widget), but is not loaded on your homepage or on /ideias-para-decorar/, which means that due to the GF CSS being added on /loja/, the CSS from /ideias-para-decorar/ cannot be reused.

similarly, /loja/ and /ideias-para-decorar/ have CSS with “yoStar” in the selector (I guess for product star ratings), which is not on the homepage.

the result; 3 different CSS-files for those 3 pages. and as you have _a lot_ of CSS, that results in a significant amount of disk space used AND in the fact that the CSS needs to get re-downloaded when going from home to /loja/ or /ideias-para-decorar/.

a solution for this could be to switch to a whitelist for CSS, where (using the API) you tell AO what can be autoptimized (instead of the blacklist-approach on the settings-screen), e.g.;

add_filter("autoptimize_filter_css_whitelist","test_css_whitelist");
function test_css_whitelist() {
	return "style.css, dashicons.min.css, edd.min.css";
}

if you build that whitelist based on only all major shared CSS (starting with e.g. your theme’s CSS but also the CSS of plugins that are active on the majority of pages/ posts/ products), you should be able to ensure a better re-use of cached CSS, resulting in fewer files and less disk-space used (while, on the other hand, you will have CSS this will not be optimized any longer, as it is not on the whitelist).

hope this helps ??

frank

Hi Frank,
so please let me check if I understood you correctly.
Given that not all plugins load on the all pages new css files and js files have to be constantly created.
I use plugin organizer to stop plugins from loading on certain pages. I figured that would speed up the loading of the site as it significantly decreases http requests and sorts.
With external js I do the same but as they arent included in autoptimize they dont affect loading.

Never heard of yoStar I have to admit ??

Anyways, if I create a whitelist the following will happen.
AO will only autoptimize the css & js files mentioned in the whitelist?
I see what you mean, Ill temporarily deactivate plugin organizer to have a look and compare the cache size. I’m curious to see what the effects are.
I didnt realize that there is a negative effect for AO when using plugin organizer…

Given that there would be less files to be cached if I understand you correctly that could imply that although the pagesizes are potentially larger or there are more http requests, the user could experience faster load times as he would only have to load the ao.css and ao.js once instead of on multiple pages.
Correct?
Another thing, if I were to include all stylesheets in the whitelist(independent of if they are loaded on a page or not), would that effectively have AO only create 1 css and js file or multiple ones?

Thanks for your help!

ah, plugin organizer; indeed that could explain the many differences between the autoptimized CSS-files. I’d indeed think it’s better not to let plugin organizer act on local JS/ CSS. Maybe try with and without plugin organizer (for local files) maybe and compare results?

frank

It’s quite a strange situation as now Im not quite sure what to do.
Just to give you a feedback on my preliminary findings from gtmetrix:
with AO & Plugin organizer:
https://gtmetrix.com/reports/cormilu.com.br/oJluxHCS
with AO & without PO in order to have less css and js files:
https://gtmetrix.com/reports/cormilu.com.br/v967KDnm
-> Better results with AO & PO

test on shop page:
With AO & PO:
https://gtmetrix.com/reports/cormilu.com.br/taz4xpIz
With AO & without PO:
https://gtmetrix.com/reports/cormilu.com.br/u4Vv7SKX
-> Better results with AO & without PO…

strange ??
I’ll keep investigating

I re-ran the second test on the shop page:
Now the results make more sense. With AO & PO the performance also better (slightly)
gtmetrix.com/reports/cormilu.com.br/raODtxqd

The thing I have on my mind is the pageload time.
When using the Plugin organizer my pageload times are significantly better.
I’m now wondering however that potentially due to the caching benefit (which isnt actually taken into account on i.e. Gtmetrix) it might load faster without PO as users would use the same ao.js and ao.css files.
What do you think?

I don’t think there’s an exact answer here, it would depend on your context really. In general the best theoretical approach to me seems to be to have PO work on plugins that load external resources, but not on plugin that load local CSS/ JS. That way you would ensure identical AO’ed CSS/JS between pages, while not loading unneeded external CSS/JS.

The proof of the pudding, would be in the testing. Instead of using gtmetrix you could to a scripted test on webpagetest.org, loading e.g. 5 pages and comparing the results?

I just ran such a small test on your site, cfr. https://www.webpagetest.org/result/160712_RJ_WVZ/, this was the script I used;

combineSteps
navigate	https://cormilu.com.br/
navigate	https://cormilu.com.br/loja/
navigate	https://cormilu.com.br/ideias-para-decorar/
navigate	https://cormilu.com.br/luminarias-em-promocao/
navigate	https://cormilu.com.br/loja/diy/monte-seu-fio-de-luz/

Maybe not a simple as gtmetrix, but webpagetest is much more powerful really ??

frank

I deactivated PO before and now my cache information is the following:
65 files, totalling 42480 Kbytes (calculated at 18:15 UTC)
That also seems like quite a lot to me…

I’ll take that suggestion of yours and use PO to deactivate external css/js plugins for pages, makes a lot of sense (especially since those are the ones I mainly need to block – yotpo).

I never knew one could run scripts on webpagetest.org , Ill have a look at that right away.
Any other ideas what might reduce the amount of files & size?
I tried adding above the fold but it broke some of the css on pages.
Also it only gives the impression that the page loads faster but in reality the first loaded css always changes after the page is completely loaded.
(In reality if I understood it correctly it increases the page size as the above the fold css is simply loaded twice, once above the fold and it’s also inside the normal ao.css file).

I tried adding above the fold but it broke some of the css on pages. Also it only gives the impression that the page loads faster but in reality the first loaded css always changes after the page is completely loaded.

both symptoms indicate you’re missing some of the critical CSS to render the above-the-fold part of the page, really. not always easy to fix, but still … ??

In reality if I understood it correctly it increases the page size as the above the fold css is simply loaded twice, once above the fold and it’s also inside the normal ao.css file)

doesn’t matter really, this is about being able to render the above-the-fold part of the page asap, it’s worth the extra couple of KB’s.