W3TC Plugin Not Integrating with CDN to Serve Certain Static Image Files

> but 5 image files under the “uploads” directory refuse to be served from the cdn servers

please, post here the 5 urls not serverd from the cdn, and copy paste your “Custom file list” in CDN page settings ( https://yourwebsite.com/wp-admin/admin.php?page=w3tc_cdn )

Thanks for the reply. I got frustrated and went back to auto minify as the manual minify was impacting the site and I couldn’t leave it unstable (causes pages to intermittent) lose their formatting. People start freaking out when they see that.

Right now on auto minify the site is stable. There still this one picture that won’t serve from the CDN server. Here’s the picture on the CDN domain and CDN servers. I loads just fine in my browser, but W3TC does “not” seem to like using it to build the home page at least, which is the page I’m currently focused on for performance and look meeting our brand requirements.

https://cdn.be3dimensional.com/wpress/wp-content/uploads/2016/10/058-VIP_Event_Leslie-MR-IMG_5241-1024×683.jpg

Here’s the picture (below) where the static image file is served via the host when the page is actually built. Strange that W3TC loads this picture after all the JavaScript and CSS files, where the W3TC config loads all the other static images before the JavaScript and CSS. And to top it off, there’s a big delay (can range from 0.25 seconds to even 0.75 seconds) before this image (and the other 5 when I had it on manual) even starts downloading. Right now this image, completely dominates the page loading time vs the other asset in the page build. If not for this image, the page ranking on the speed tests would be extremely high. We’ve put a lot of design effort into and are incurring CDN costs to optimize site performance.

https://be3dimensional.com/wpress/wp-content/uploads/2016/10/058-VIP_Event_Leslie-MR-IMG_5241-1024×683.jpg

Here’s the current config for the custom files in the custom file box below:
I added

{wp_content_dir}/uploads/*

I had also tried the other version of the syntax for the uploads folder I saw: ?

wp-content/uploads/*

Neither had any impact and the files continue to be ignored in building the page, but they are as you see on the CDN mirror.

The below that was already in the custom file box:

?{wp_content_dir}/gallery/*
{wp_content_dir}/uploads/avatars/*
{plugins_dir}/wordpress-seo/css/xml-sitemap.xsl
{plugins_dir}/wp-minify/min*
{plugins_dir}.css
{plugins_dir}/*./*.js
{plugins_dir}/*gif
{plugins_dir}/*.jpg
{plugins_dir}/*.png

Thanks for the help and time. It would be good to find the solution to this. Appreciated.

• This reply was modified 8 years, 1 month ago by og1. Reason: fixed spelling

Sorry. I retested and here are the other two image files on the CDN that won’t serve from the CDN server.

https://cdn.be3dimensional.com/wpress/wp-content/uploads/2016/10/119-B3D_Sat_Stage_Leslie-IMG_6054.jpg

and

https://cdn.be3dimensional.com/wpress/wp-content/uploads/2016/10/b3d-tom-1024×539.jpg

The W3TC plugin configures things such that the page builds using the images (loading them at the very end after all the JavaScript and CSS) from the host server on the main domain. It’s like it’s being forced to use those images. But all the other images needed to build the page the config finds on the cdn and serves the proper file from the cdn and also loads those images before the JavaScript and CSS.

I use “async” to deferr the JavaScript and CSS after the body and “deferred” in the header.

The slideshow plugin you’re using is loading these images dynamically, AFTER the page is processed by W3TC. Your server sends the fully-composed HTML back to the browser and then the JavaScript for the slideshow plugin executes and downloads those files from your primary domain.

If your slideshow plugin supports it, try changing the URLs for those images manually to use the CDN version.

Thanks for the excellent information. Appreciated.

It’s not readily (safely) apparent that I can edit the image url from the WordPress library the slide show uses to pull the images from the CDN. Before I get into messing with the WordPress database which is never a smart long term solution I need to do more research on how the slider is designed and executes it’s Javascript code.

I’m communicating with the creator of the slideshow I’m using in the theme now. Will let you know what their response is.

I checked some more pages on the site to see what’s going on with the images on the cdn to see if that slider is the only thing causing the issue.

This page is just basic html, javascript, css page, no slider or anything. Just a few sections to that use an image that have transpency in the background and we write over the transparency image with some text.

Two images on this page won’t use the cdn.

Strange that the page builds with this url from the host (a subdomain that it shouldn’t be using):
https://b3d2017.think2thing.com/wpress/wp-content/uploads/2016/10/toronto-canada-10.jpg

when this image on the cdn is available, but is ignored:

https://cdn.be3dimensional.com/wpress/wp-content/uploads/2016/10/toronto-canada-10.jpg

With this image and page build you can see it happening in real time. The entire page loads and there’s a grey space where this image should be, while it downloads from the host. Very noticeable by the users.

And this image same thing,but even strange. It’s just a straight html image call (nothing but standard html from what I can see), but the page builds using this image from the host:
https://b3d2017.think2thing.com/wpress/wp-content/uploads/2016/10/Thomas-Wallner-bw-150×150.jpg

when this image on the cdn is the one that should be used:
https://cdn.be3dimensional.com/wpress/wp-content/uploads/2016/10/Thomas-Wallner-bw-150×150.jpg

Thanks for your help and time.

Not sure which page you’re referring to above, but I can see the same thing happening here:

https://be3dimensional.com/programs/be3d-innovation-fund/

In this case, these two images load from your host’s domain instead of your own domain or from the CDN subdomain:

https://b3d2017.think2thing.com/wpress/wp-content/uploads/2016/10/22211334884_38f5abbb2c_o.jpg
https://b3d2017.think2thing.com/wpress/wp-content/uploads/2016/10/IMG_0451.jpg

However, neither of those images is in the source code for the page, so I believe the same JavaScript slider is being used here to dynamically load the images.

The reason they’re using the old host’s domain is not clear, but it’s most likely because you starting building the site from that domain and the image URLs were saved that way in the database.

Thanks for your reply.

I know the behaviours that are appening with images downloading from the host when they should be coming from the CDN to create the pages. The issue(s) are most likely either in the page builder plug-in (I’m working with them at the same time I discuss with yourself) or the W3TC plug-in. I’m trying to isolate which one. Or it could be both plugins not working well together with regards to a CDN setup.

If we use the page you’re referring to, those two images are not in a slider like the home page. They’re transparent images used as a page background. Fairly standard stuff.

I understand your point the page builder is using the images from the wrong url, but there’s a reason for it. Those old urls for those two images and the url for all other images exist no where in the database (except the guid which I believe is used as an unique identifier and should never be changed). I’ve double checked all the urls in the database and the media library since you mentioned your last post. They are all in the database under the right url and the media library files on the host have the right urls.

If you would like to look into it some more while I wait to hear back from the page-builder plug-in people, these three pages still have issues with the certain images not downloading form the copy on the CDN, but are downloading from the host. In some cases a fairly significant amount of the page size, so it has an impact on user experience and page download time (which is the frustrating thing, most of the images work just fine from the CDN).

https://be3dimensional.com/events/be3d-2017-think-forward/
https://be3dimensional.com/
https://be3dimensional.com/programs/be3d-innovation-fund/

Thanks for the help and time.

• This reply was modified 8 years, 1 month ago by og1.

Something I noticed since yesterday since I went back to auto minify. I don’t think W3TC is working on my site at all. The comment markers down at the bottom of the page are not showing any longer. A couple of days ago those comments on the cached pages were just fine.

Can you have a look and see if you agree that W3TC is not working (no page, no database caching, etc.) at all on any of my pages. Thanks.

I’ve checked every setting many times (more than 25 times probably) for over a week now trying to get it working on it’s own and with the CDN 100%.

I completely removed W3TC and reinstalled it and double checked everyone setting again.

There’s definitely something off with the caching plugin. It’s way more than just the page builds not pulling a couple static files from the CDN now. Nothing works in the plugin. Or at least there’s not way for me to verify (wish I could see the cache files like you can with WP Supercache). The htaccess file looks fine. I rebuilt it step by step.

I’m starting to think W3TC just is not for this WP site. If anyone has any suggestions to get this plugin working 100% let me know.

Thanks for the help and time.

Just FYI! I have to go with WP Rocket on this site as I ran out of time with W3TC.

Still I think W3TC is a great product, so I’d be more than willing to work to debug what happened on this setup as I’m sure others are running into it and I’ll be using W3TC on other sites.

I think the original issue you ran into was related to this:

https://forum.wpbeaverbuilder.com/support/q/page-builder-modules-writing-full-path-in-js/

Looks like the page builder hard-codes certain URLs directly into its JavaScript files, and since it’s not aware of the CDN it just uses your primary domain.

Thanks for the information. I’ll follow up with the person I’m working with at Beaver Builder to see what they did on this. It was quite a while ago.

That said. It’s very strange what’s happening with these couple of images not pulling from the CDN. It make be a combo of the page builder and the plugin that you’re using to tell that informs the page builder that there’s a different link to use. I’m using a different CDN enabler and it’s still happening with those exact same images. But with WP Rocket it seemed to be able to help get all but one image to pull from the CDN on the built pages.

I got the site working quite well for caching and CDN distribution using a combination of the CDN Enabler from KeyCDN and a new caching tool called “Speed of Light” or something like that.

I decided I didn’t like WPRocket as it messed up the site and it took me all day to get it back. So I pieced together a caching and CDN integration solution using two simpler plugins vs one complex plugin. Sometimes when tools do one thing well, that’s the way to go.

Speed of Light doesn’t give the control that W3 Total Cache does though. The “help” feature within the Minify function for W3TC where you can handle the JS and CSS files one-by-one is a great feature. When something breaks you know what caused it right away if you handle the files one-by-one.

If you have any suggestions as to why W3TC completely stopped caching for me it would be appreciated. I didn’t remove W3TC because of the image file not coming from the CDN…. I had to remove it because it just wasn’t doing any caching. I tried, but could not get it to start working again.

I heard from the people at Beaver Builder. Here’s their response. Note, I gave them several scenarios on my site where the page builds using the url for an image from the host vs from the CDN url. For some reason they responded to just one scenario where I pointed out it a slider with several pictures had images that were using the host vs the CDN.

“the slideshow saves the image IDs and pull the image data using “wp_prepare_attachment_for_js” when the slideshow is loaded.”

The indication was that is the plugin that connects the CDN that does the rewrite of the url to use the CDN (which if I think about it makes sense), but for some reason is not able to accomplish what it’s trying to do. They suggested that it’s the developer of the plugin that creates the rewrite of those urls needs to determine if their implementation is using “wp_prepare_attachment_for_js” appropriately so that the images used in the slide can have their url rewritten on the page to use the image on the CDN and not the host.

It’s a very repeatable behaviour. So there’s a specific flow of logic that causes it. We need to determine if it’s isolated to one plugin or not.

Please let me know how their response would apply to W3TC (even it even does) and if you have any suggestions on what I should ask of the page builder developers, let me know. Thanks.

A quick search of the WT3C codebase doesn’t turn up any references to wp_prepare_attachment_for_js, so that’s probably the issue. The solution would be for W3TC (or other CDN plugins) to hook into this functionality and rewrite the image URLs before they get output in a JavaScript statement.

I’ve filed this a potential improvement for a future release of W3TC, but for now you should continue to use the plugins that are working best for your site.

(I’m not sure why W3TC would’ve stopped working altogether, you may have to work with your host to determine that… I would start by doing a completely fresh install of WP and W3TC on a staging server and then import posts to the new installation to see if that works.)