How to properly set up client-side browser caching?

From what I understand, setting up the caching rules so that .jpg's, .js etc. only have to be downloaded once by a visitor is usually done with htaccess or php headers. I didn't find a way to modify the php headers that modx outputs so I tried using htaccess. What I did was include the following rules:



However, it didn't really work as planned (the browser kept reloading the assets, not caching them). How do you guys control client-side caching with modx? What is the best way?

I'm currently working with this, wich seems to do okay.

Quote from: c.reiss at Aug 27, 2013, 10:16 AM

From what I understand, setting up the caching rules so that .jpg's, .js etc. only have to be downloaded once by a visitor is usually done with htaccess or php headers. I didn't find a way to modify the php headers that modx outputs so I tried using htaccess. What I did was include the following rules:

# 480 weeks
<filesmatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"="">
Header set Cache-Control "max-age=290304000, public"
</filesmatch>
 
# 2 DAYS
<filesmatch ".(xml|txt)$"="">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</filesmatch>
 
# 2 HOURS
<filesmatch ".(html|htm)$"="">
Header set Cache-Control "max-age=7200, must-revalidate"
</filesmatch>

However, it didn't really work as planned (the browser kept reloading the assets, not caching them). How do you guys control client-side caching with modx? What is the best way?

Are you talking about wanting to cache the PHP requests returning these content types, or just serving those file types directly from the web server with those caching headers? If the former, take a look at the microcache add-on.

Quote from: opengeek at Aug 27, 2013, 11:52 AM

Quote from: c.reiss at Aug 27, 2013, 10:16 AM

From what I understand, setting up the caching rules so that .jpg's, .js etc. only have to be downloaded once by a visitor is usually done with htaccess or php headers. I didn't find a way to modify the php headers that modx outputs so I tried using htaccess. What I did was include the following rules:

# 480 weeks
<filesmatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"="">
Header set Cache-Control "max-age=290304000, public"
</filesmatch>
 
# 2 DAYS
<filesmatch ".(xml|txt)$"="">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</filesmatch>
 
# 2 HOURS
<filesmatch ".(html|htm)$"="">
Header set Cache-Control "max-age=7200, must-revalidate"
</filesmatch>

However, it didn't really work as planned (the browser kept reloading the assets, not caching them). How do you guys control client-side caching with modx? What is the best way?

Are you talking about wanting to cache the PHP requests returning these content types, or just serving those file types directly from the web server with those caching headers? If the former, take a look at the microcache add-on.

I'm talking about wanting to serve files directly from the webserver (they are not in the modx database, but are static files) with the proper caching headers. My internal modx caching is already pretty optimized. So I'm specifically talking about how I can get the visitors of my site to cache as much files as possible, so they don't download them over and over again.

You can simply use a version suffix for js, css files etc.

Quote from: absent42 at Aug 27, 2013, 12:49 PM

You can simply use a version suffix for js, css files etc.

But a version suffix would imply that there is already some client side caching going on. I'm asking how to get the client side caching going in the first place (and then I might use versioning to make sure users are downloading the latest versions).

Is the recommended way just using htaccess like I explained in the first post (or similar to what thapriest86 is doing)? Or do I need to set/tweak some other things? It would help a lot if you could give me examples of what you're doing to promote client side caching on your modx website (because I couldn't find anything about this in the docs).. [ed. note: c.reiss last edited this post 10 years, 7 months ago.]

Quote from: c.reiss at Aug 27, 2013, 08:03 PM

Quote from: absent42 at Aug 27, 2013, 12:49 PM

You can simply use a version suffix for js, css files etc.

But a version suffix would imply that there is already some client side caching going on. I'm asking how to get the client side caching going in the first place (and then I might use versioning to make sure users are downloading the latest versions).

Is the recommended way just using htaccess like I explained in the first post (or similar to what thapriest86 is doing)? Or do I need to set/tweak some other things? It would help a lot if you could give me examples of what you're doing to promote client side caching on your modx website (because I couldn't find anything about this in the docs)..

Anyone?

It would help a lot if you could give me examples of what you're doing to promote client side caching on your modx website (because I couldn't find anything about this in the docs)..

This presentation gives a decent 101 on MODX caching and file expirations.

http://vimeo.com/56727530

Quote from: absent42 at Aug 30, 2013, 11:35 AM

This presentation gives a decent 101 on MODX caching and file expirations.

http://vimeo.com/56727530

Thanks for your answer! I don't know why, but the video won't load for me, even through a proxy (it keeps buffering). Do you know roughly what is being said about (client-side) caching? Or is it too detailed too summarize?

Some slide screenshots