preparing for autoptimize 2.1.0; wanna test?

Surprise Result:-
1. AO generated aggregated CSS file too small. (In few bytes)
2. As far I could check, AO ignored all plugin CSS & JS Files.

the problem (which would be the same on AO 2.0.2) will be that AO runs after CDN-enabler, so AO indeed does not recognize the CDN’ed CSS/JS is in fact local. you can “teach” AO to accept cdn.example.com as local by using this code (warning; didn’t test this);

add_filter('autoptimize_filter_cssjs_multidomain','gulshan_add_domain');
function gulshan_add_domain() {
    return array("cdn.example.com");
}

let me know if that indeed fixes things for you!

frank

Hi

Testing it with ok sized site. Some points, maybe I’m missing something:

1. Would be nice to have minify only for CSS/JS. Meaning, not combined
2. It seems that Autoptimize is not as good as W3TC in minifying and combining the CSS and JS. On the same site, and others I’ve tried, W3TC doesn’t have dependency problems, maybe it’s because it’s less hard on combining.
3. Also, another thing with Combining – I’m not sure that having a single big CSS file is better than having 3-4 smaller files, because they can be downloaded in parallel, at least in the CDN case

thanks for the feedback eddr ??

1. that’s (currently) not supported
2. W3TC is great, but what do you mean with “it’s less hard on combining”?
3. depends, sometimes it’s better to have 1 big one (even when in parallel you still have the connection setup for each file separately), sometimes not (no connection setup cost in HTTP/2, but compression is more efficient on larger files). as with all web performance optimization measures one should test to confirm which approach is best fit for a specific context.

Thanks Frank for your kind reply as always.

I tested the function code which you have provided me, I couldn’t found any effect. May be it work, but for me it is not working as per my requirement.

Let’s please consider ao.example.com is my home URL. Okay
So, I want https://www.gulshankumar.net (home url) in AO CDN field, and https://static.gulshankumar.net in keycdn field. Exactly, I did this settings.

Result:
In source code, there was extra http:
<link type=”text/css” media=”all” href=”http:https://www.gulshankumar.net/wp-content/s/css/gk_1353f62b5447893845936ebbc18b6449.css&#8221; rel=”stylesheet” />

I also noticed this first time: AO accept CDN URL only with https://(As I tested with HTTP protocol only, can’t say about HTTPS or any other)

Thus, when I keep only www.gulshankumar.net then field color goes red, and when I tried to Save, Google-Chrome says- Type properly in right format.

At last I thought to keep CDN field blank (because, I want to serve AO resources with home URL, means no CDN but still I want to use Key CDN enabler with static.gulshankumar.netfor other resources like images, etc except AO resources).

Final result:
#1 AO touched only Inline CSS & Js. (Here, I was expecting to get full aggregated like AO do usually when I keep same subdomain at both plugin)
#3 Still ignored all plugin and theme CSS & JS.

Please refer to:-
https://gtmetrix.com/reports/www.gulshankumar.net/IasG1VB2#waterfall

Summary: Meaning by this, when I keep same subdomain (static.gulshankumar.net) as CDN is both field, then everything work perfect. AO do own work, and keycdn enabler handle images and other static resources with my static subdomain. But, for instance I don’t want to keep any CDN URL for AO.

Regarding AO issue, Kindly let me know, if I need to explain more. I think this problem should be fixed because, may be some other guys think to serve AO resources with other CDN..

Sincerely,
Gulshan

Hiya Gulshan ??

Did a quick test
1. my default hostname is localhost
2. installed CDN-enabler, set it to 127.0.0.1 (localhost IP)
3. set AO CDN to my 192.168.1.11 (my local IP)

In this case most JS/ CSS is indeed served separately via the CDN enabler configured hostname (127.0.0.1), the AO’ed files only contain inline JS/ CSS (if those options are set).

Now when adding this code (using code-snippets);

add_filter('autoptimize_filter_cssjs_multidomain','gulshan_add_domain');
function gulshan_add_domain() {
    return array("127.0.0.1");
}

All JS & CSS (except for admin-bar.min.js, which is always excluded by AO) is AO’ed and served via 192.168.1.11.

So not sure what’s happening in your case, but it should really work with the correct domain(s) being passed to AO (with the code snippet)?

After checking again carefully, I came to know that
This duplicate http: issue comes only if I add forcefully the homepage URL www.gulshankumar.net in the AO CDN field.

<link type="text/css" media="all" href="http:https://www.gulshankumar.net/wp-content/s/css/gk_1353f62b5447893845936ebbc18b6449.css"

We can say this is a minor issue. I solved this problem, by leaving AO CDN field blank, or by keeping any different path ao.gulshankumar.net

Your IP idea is really nice. I also tried adding my dedicated IP. It also worked perfectly without serving duplicate http: in source code

But one thing to note here, AO CDN field still didn’t accept IP without adding protocol… (as you mentioned). Anyway, that’s not a issue. A person can keep relative or whatever as per requirement. I can understand.

If possible, please add a placeholder in AO CDN field ??
Then, there would be NO confusion…

In this case most JS/ CSS is indeed served separately via the CDN enabler configured hostname (127.0.0.1), the AO’ed files only contain inline JS/ CSS (if those options are set).

Yes Exactly, with IP same result here.

AO indeed touched only Inline/Critical CSS or Inline JS, but I want that AO anyhow handle my complete CSS & JS (Possibly, with specified CDN URL, including Fonts and Stylsheet Background Image also).
—————————————–

While testing above things, I had this code at Code Snippet.

/** Specify Different CDN path Specially for Autoptimize – Last Updated 3:35PM 12/08/2016
Please Note: cdn.gulshankumar.net is present in Key CDN Enabler plugin
But in AO field, there is ao.gulshankumar.net **/`

add_filter(‘autoptimize_filter_cssjs_multidomain’,’gulshan_add_domain’);
function gulshan_add_domain() {
return array(“https://cdn.gulshankumar.net&#8221;);
}
`
So, please look at how it could be possible if we keep multi-domain facility.

But one thing to note here, AO CDN field still didn’t accept IP without adding protocol…

the field expects a URL and not a domain, so adding just an IP does not work. it should be in one of these forms:

https://127.0.0.1/
https://127.0.0.1/
//127.0.0.1/

return array(“https://cdn.gulshankumar.net&#8221;);

the filter expects (an array) with a domain (hostname) and not a URL, so make it array("cdn.gulshankumar.net") instead.

If possible, please add a placeholder in AO CDN field ??

placeholder is too restrictive, but I just changed the label to read:

Enter your CDN root URL to enable CDN for Autoptimized files. The URL can be http, https or protocol-relative (e.g. //cdn.example.com/).

should be (somewhat) more clear like that ??

the filter expects (an array) with a domain (hostname) and not a URL, so make it array(“cdn.gulshankumar.net”) instead.

Wow! Great help @frank.

I followed this time correctly & now my problem has been fixed completely. Thank you so much Frank for clarifying me.

Since, about little mistake in defining array was creating all issue.
Before, again and again with all last attempt I was adding there in URL format, and that was only reason last time, AO ignored some CSS/JS when ‘KeyCDN enabler’ was enabled with any different CDN path.

Now, no more AO is ignoring CSS & JS. I’m really happy ?? ??
Because, It is working fine as I wanted always.

Right now my settings is www.gulshankumar.com in AO field.
and static.gulshankumar.net in KeyCDN Enabler field.

And I added, this code as you said

// Return array
add_filter('autoptimize_filter_cssjs_multidomain','gulshan_add_domain');
function gulshan_add_domain() {
    return array("static.gulshankumar.net");
}

Awesome Result:
1. AO is aggregating properly all CSS & JS in one go. Great.
2. Now, fully compatible with Key CDN enabler, as it is doing own job for handling other static except CSS,JS, CSS-Image and fonts.

After then, I tested complete site by browsing so many pages, no css broken, no any problem I found. Everything is perfect, mind blowing.

Just one thing, I found something abnormal. You can see there is double slash after wp-content/s/

Is it okay?

*background:transparent url(mhtml:https://www.gulshankumar.net/wp-content/s//gk_1337063c1128e043e77566dd104c2be0.txt!2) no-repeat right top 8px;_background:transparent url(//www.gulshankumar.net/wp-content/plugins/better-click-to-tweet/assets/css/../img/birdy.png) no-repeat right top 8px}

Sincerely,
Gulshan

Looking forward for complete awesome update.
Best of luck for new release ??

Just one thing, I found something abnormal. You can see there is double slash after wp-content/s/

Is it okay?

*background:transparent url(mhtml:https://www.gulshankumar.net/wp-content/s//gk_1337063c1128e043e77566dd104c2be0.txt!2) no-repeat right top 8px;_background:transparent url(//www.gulshankumar.net/wp-content/plugins/better-click-to-tweet/assets/css/../img/birdy.png) no-repeat right top 8px}

harmless, but still a small bug. fixed here; https://github.com/futtta/autoptimize/commit/087f46988365eaa5a3522110b7933c8c141b11dc

thanks!

Good to know, it has been fixed ??
You’re most welcome.

Thanks for the reply

1. that’s (currently) not supported

Would be nice!

2. W3TC is great, but what do you mean with “it’s less hard on combining”?

The words I chose aren’t that informative indeed. What I meant is that it doesn’t combine it all together. Sometimes it will create several combined CSS files
I don’t say it is easy or trivial, but it is very useful

Also, would be nice to have an option to reorder the files and inline stuff. Would be nice and useful

3. depends, sometimes it’s better to have 1 big one (even when in parallel you still have the connection setup for each file separately), sometimes not (no connection setup cost in HTTP/2, but compression is more efficient on larger files). as with all web performance optimization measures one should test to confirm which approach is best fit for a specific context.

Also, sometimes only small portion of the CSS is needed to start rendering. Currently, with one big file, the browser would wait for the big file. True, in smaller files it’s not as bad

4. People will be glad to pay, you should know. Also donate

sometimes only small portion of the CSS is needed to start rendering.

hence “inline & defer” ??

hence “inline & defer” ??

EDIT: Oh, I understand now, you should inline the css you want to be above the fold. Would be nice to paste a link to the CSS file as another option to inlining it

Thanks. So, with this option, there will be several CSS files? one of them will be in the head to load quicker?
I didn’t understand it from the description of this option

also, how does AO knows which are the important files? according to the header/footer parameter in the WP enqueue function?

Thanks