Jump to content

Archived

This topic is now archived and is closed to further replies.

janpeeters

Compiled CSS not updating on Cloudfront after change

Recommended Posts

janpeeters

Hi,

 

I've tried to troubleshoot the following issue over de last few days. 

When I update something in my child themes CSS it isn't updated on AWS Cloudfront.

I'm using W3 Total Cache for the following website www.lovo.nu

 

I've read the this thread and followed the hint to add the CSS to custom files.

http://forum.pagelines.com/topic/27371-pagelines-compiled-css-wont-cache/

 

This didn't solve the problem.

When I shut the CDN functionality down everything works but I get a heavy load-time penalty.

 

In W3TC I'm only using page cache (enhanced), browser cache and CDN (Cloudfront /origin pull). Minification I left alone.

 

According to the W3TC dev an updated CSS file should properly update on the CDN when caches are emptied.

 

I have yesterday setup W3TC totally fresh including a new distribution on AWS. In the new situation I have the same problem as before the complete refresh. 

 

Thanks for any suggestions,

 

Jan

Share this post


Link to post
Share on other sites
Rob

Jan,

 

I've asked Simon and await his response.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
janpeeters

Hi Rob,

 

I have to correct the title of my post. It's not the compiled-CSS that is not updating it is my child themes Custom CSS file. I have done quite a bit of troubleshooting over the last days but with no result. 

 

The Custom CSS file on the CDN stays the same after being published for the first time.

I have added the following string to the Custom File list in W3TC CDN settings: {wp_content_dir}/themes/dms-base/*

But that didn't change a thing. 

 

I can see that the file on the CDN has a different version string then the one on my hosts webserver. 

To be able to do testing of changes fast I have activated in W3TC to not replace the URLs for logged in administrators.

 

Hopefully this gives some more info. Would love to solve this. 

 

Thanks again, Jan

Share this post


Link to post
Share on other sites
Danny

Hi,

 

I don't use Cloudfront, but if this issue resolves itself when you disable Cloudfront, then I recommend you contact their support and ask them for assistance. It's most likely an issue with your setup of the CDN.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters

Hi Danny, 

 

Thanks for your reply. I could do that but I don't think the problem is with them. It might be a misconfiguration of W3TC with DMS on my side. Everything updates fine on the CDN except this specific file. 

 

I know Simon_P knows a lot about CDN and Cloudfront having read his answers (and solutions) on other threads so I hoped he would know what could cause this in my specific case. 

 

Hopefully he could spare a minute,

Thanks, Jan

Share this post


Link to post
Share on other sites
Simon

the css file should look like this:
<link rel='stylesheet' id='pagelines-child-stylesheet-css' href='http://cdn1.pross.org.uk/wp-content/themes/test/style.css?ver=103-0909220408' type='text/css' media='all' />

 

I have highlighted the version number, this is made from the parent theme version and file modified time of the child css file.

Share this post


Link to post
Share on other sites
janpeeters

Hi Simon_P

 

thanks for explaining. My problem is that a change that I make to the child themes CSS on my webhosts doesn't get to the CDN.

 

When you look at the code on my hosts server:

http://www.lovo.nu/cms/wp-content/themes/dms-base/style.css?ver=103-0917183451

You can see the following comment on top:

 
/*
This is a test to see if a change gets to the CDN
*/
 

When you look at the one on the CDN it's not there:

http://cdn.lovo.nu/cms/wp-content/themes/dms-base/style.css?ver=103-0917183451

 

So I'm bit lost. How could this happen?

 

Thanks again for your help.

 

Jan

Share this post


Link to post
Share on other sites
Simon

Its there now lol

 

Your CDN is probably caching too.

 

Cloudfront is VERY aggressive and has a lot of settings. If your developing in any way make sure you turn the bypass ON so that the cache is bypassed, then once your happy with your edits just turn bypass off again and purge the cdn.

Share this post


Link to post
Share on other sites
janpeeters

Simon_P

Thanks for your explanation of the workflow, that helps.

 

But..... [sorry this drags on, I'm really trying to understand how this works].

 

When I look at the CDN version there is no 

/*
This is a test to see if a change gets to the CDN
*/

At the top of the CSS. I placed it there to see if it synchs. 

When I look at my 'local' version it's there. Just a quick verification with you: do you really see that piece of code?

 

A few last questions:

 

- Can a CSS file with the same string 103-0917183451 have different content? Is this because it only applies a new string when I 'Flush Cache' from the DMS editor 'Resets' menu? Wat would be a use case to do a Flush?

 

- I understood from this thread: http://wordpress.org/support/topic/plugin-w3-total-cache-editing-css-and-syncing-cdn-files that emptying the W3TC cache should be enough to get new files to Cloudfront. You say the CDN needs to be purged. How long would an update normally take? I might just be too impatient and assume incorrectly that this is in minutes. Could this be a lot longer?

 

Thanks again really appreciated.

 

Jan

Share this post


Link to post
Share on other sites
Simon

http://screencast.com/t/g6E3KxUMI

Yes i see it, you are probably viewing a locally cached version..

 

As i said cloudfront has VERY aggressive caching.

 

 

Basically, ALL caching, be it browser/cdn/server-side whatever should ALWAYS be disabled while you are making edits to your page.

 

You are using a PULL zone, so unless w3 cache remote purges pull zones all your doing is purging the cache on the server...

 

you have multiple cache layers...

 

 

1. cached on server, w3 cache is caching pages here

2. cloudfront is caching pages/js/css 

3 both cloudfront AND w3 cache are probably pushing long expires headers to the users browser..

Share this post


Link to post
Share on other sites
janpeeters

Okay thanks Simon_P, your explanation of the caching proces clarifies a lot.

And I will deactivate the caching plugin when editing to prevent strange behaviour.

 

What stays weird though is that I don't see my inserted code on the CDN version that I'm viewing (http://cl.ly/image/1A0E2m2Y0t19) even after deleting my cache in Firefox, Chrome, Safari on OS X, shutting these apps down and visiting the page again. Extremely weird.

Maybe its a distribution error and that the file is already updated on your nearest AWS hub? I'm in The Netherlands.

My head cracks ;-)

 

But thanks again, Jan

Share this post


Link to post
Share on other sites
Rob

I'll let Simon know of your comments.  I'm happy you obtained the help you needed. :)


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

×