well, easiest solution would be to disable CDN in Autoptimize.
but re. “even when I put wp-content/themes/[CHILD THEME NAME] into the excluded scripts, it adds the CDN to icons within the child theme” -> aren’t the icons loaded by CSS iso JS? did you try adding to the CSS exclusion field?
Thread Starter
Richard
(@richardemap)
Yes, I tried adding it to the CSS exclusion list to no avail.
Problem with disabling CDN is we really need it. We already had to write a script to upload AO compiled CSS & JS to our S3 bucket.
Is there no way around it other than not using the CDN. There should really be a CDN exclusion list. Don’t suppose any add-ons have this functionality.
Hmmm … are you 100% sure it’s AO’s CDN-field which is causing this? Because if I remember correctly (I should double-check the code/ do a quick test on my end) excluded JS/ CSS is never put on the CDN by AO?
Thread Starter
Richard
(@richardemap)
I’m pretty sure since without the CDN specified in AO, it works as expected.
-
This reply was modified 2 years, 3 months ago by
Richard.
Weird, as I can’t reproduce I’m afraid. Can you share your site’s URL + indicate which exact files are but should not be fetched from the CDN?
Thread Starter
Richard
(@richardemap)
I can’t as it’s on my local environment. However, an example of a file is this: wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js
These are my JS exclusions: wp-includes/js/dist/, wp-includes/js/tinymce/, js/jquery/jquery.js, mbm-emap/assets/library/slick/slick.min.js, wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js
Even though that exclusion isn’t working, ideally I’d need to be able to exclude everything in wp-content/plugins, which according to your FAQ can be done like wp-content/plugins/* but as I said, that is not working.
-
This reply was modified 2 years, 3 months ago by Richard.
-
This reply was modified 2 years, 3 months ago by Richard.
the correct exclusion is wp-content/plugins/, without the *, maybe that’s the problem (lazysizes.min.js is .. special).
Thread Starter
Richard
(@richardemap)
Tried that, still includes the “special” file, how do we exclude it?
Thread Starter
Richard
(@richardemap)
Also another issue breaking the site when the CDN is set, it tries to convert some images which are PNG to SVG? What’s causing that?
-
This reply was modified 2 years, 3 months ago by Richard.
Thread Starter
Richard
(@richardemap)
Okay, new update; ignore my previously stated issues. When I have the CDN and lazy loading, that causes the site’s images to break. Is there a solution for this?
re. lazysizes.min.js; if a CDN is defined, it is always put on the CDN. if you want you can hook into autoptimize_filter_imgopt_lazyload_js to change the URL back to the non-CDN one.
re. “when I have the CDN and lazy loading, that causes the site’s images to break” -> is lazysizes loaded? any JS error on the browser console?
Thread Starter
Richard
(@richardemap)
Okay so, here’s the scenario and my theory based on your question about lazysizes loading. When I disable LL, the lazysizes disappears. However, with both enabled, whilst it tried to load the file from the S3 bucket, it’s unable to because it doesn’t exist. So my theory is that lazysizes is needed for the CDN and LL to work simultaneously. Because that file is not loaded, it breaks images.
Firstly, I tried the hook you suggested but couldn’t really figure out what code I need to remove the CDN. This is what I tried:
add_filter(“autoptimize_filter_imgopt_lazyload_js”, function ($in) {
var_dump($in);die;
});
Could you send me the code I’d need to revert lazysizes to the local version please?
-
This reply was modified 2 years, 3 months ago by Richard.
-
This reply was modified 2 years, 3 months ago by Richard.
Thread Starter
Richard
(@richardemap)
Right, got it. That was exactly the issue. For future reference to anybody who has this same issue. Just add this to your theme functions:
add_filter(“autoptimize_filter_imgopt_lazyload_js”, function ($in) {
return str_replace(get_option(“autoptimize_cdn_url”), AUTOPTIMIZE_WP_SITE_URL, $in);
});
Great work Richard! But why didn’t you simply push lazysizes.min.js to the S3 bucket as well?
