Image Caching

1) Correct.

2A) No, the Cache-Control plugin only works on dynamic files generated by WordPress. The caching policies and headers for your static files, such as your robots.txt or any uploaded images, are controlled by your HTTP server.

2B) The Cache-Control plugin won’t work with WP Super Cache. WP Super Cache disregards caching headers and apply its own cache policies. WP Super Cache works as a dub HTTP-unaware local-caching proxy. The Cache-Control plugin is meant to work with HTTP-aware caches (such as your web browser, or a caching proxy like Varnish, Apache mod_proxy, or a CDN).

2C) You can send both the Expires header (mod_expires) and a Cache-Control header at the same time. Expires contain an exact date in the future when the cache will expire, where as a Cache-Control: max-age=seconds header instructs a client (or intermediary cache) how many seconds they should use the cached version before fetching a new copy. Expires is a left-over from HTTP/1.0. Most implementations prefer Cache-Control headers and ignore Expires headers.

• This reply was modified 7 years, 8 months ago by Dan.

Thanks for the explanation. I wanted to use this plugin because i noticed my http headers were outputting the following:

Cache-Control: no-cache, must-revalidate, max-age=0

So this seemed to tell me that the page was saying not to be cached, but please correct me if my understanding is incorrect.

So after enabling your plugin i get the following for the homepage which i set for 1 day:

Cache-Control: max-age=86400

and for posts which i set for 1 month:

Cache-Control: max-age=2592000

So currently i am using Comet Cache and KeyCDN. My intention is to have KeyCDN cache the homepage for 1 day, and posts for 1 month.

I have also added the following to my htaccess to cache static resources as you recommend in the plugin:

# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch “\.(ico|jpg|jpeg|png|gif|webp|swf)$”>
Header set Cache-Control “max-age=31536000, public”
</filesMatch>
<filesMatch “\.(css)$”>
Header set Cache-Control “max-age=2592000, public”
</filesMatch>
<filesMatch “\.(js)$”>
Header set Cache-Control “max-age=2592000, public”
</filesMatch>
<filesMatch “\.(woff|woff2|ttf|svg|eot|otf)$”>
Header set Cache-Control “max-age=31536000, public”
</filesMatch>
</ifModule>
# END Cache-Control Headers

So this would make the KeyCDN cache for images 1 year, css 1 month, js 1 month, and fonts 1 year.

Could you tell me if this is all now setup correctly for what i wanted, whereby i wanted to specify how long a post, the homepage, and static resources are cached for on KeyCDN?

EDIT

I just noticed after testing my site with pingdom when i look at the response headers for an image file i get the following:

Cache-Control no-cache

but the correct value is set for the request header

Cache-Control max-age=2592000

Cache-Control: no-cache, must-revalidate, max-age=0

So this seemed to tell me that the page was saying not to be cached, but please correct me if my understanding is incorrect.

That is exactly what it’s saying.

So after enabling your plugin i get the following for the homepage which i set for 1 day: Cache-Control: max-age=86400

and for posts which i set for 1 month: Cache-Control: max-age=2592000

So currently i am using Comet Cache and KeyCDN. My intention is to have KeyCDN cache the homepage for 1 day, and posts for 1 month.

That seems correct. I’m not familiar with KeyCDN, specifically. At some CDNs you have to enable an option called something like “Respect original caching policy/headers”. At most CDN providers, this is the default behavior.

Header set Cache-Control “max-age=31536000, public

public is the default value and you don’t need to set it. It’s so rarely useful to explicitly set it that you’re unlikely to ever have to set it manually.

<filesMatch “\.(ico|jpg|jpeg|png|gif|webp|swf)$”>

You should use LocationMatch. It’s faster than FilesMatch because the matching is done on the Location (meaning the incoming request URL) instead of having to do the matching after it has found the corresponding file on your disk.

Otherwise it seems like your setup should do what you want.

I just noticed after testing my site with pingdom when i look at the response headers for an image file i get the following:

Use https://redbot.org/ to test your headers.

I tried using location match but it gives me “500 internal server error”. Is this the correct way to do it?

# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
    <locationMatch "\.(ico|jpg|jpeg|png|gif|webp|swf)$">
        Header set Cache-Control "max-age=31536000"
    </locationMatch>
    <locationMatch "\.(css)$">
        Header set Cache-Control "max-age=2592000"
    </locationMatch>
    <locationMatch "\.(js)$">
        Header set Cache-Control "max-age=2592000"
    </locationMatch>
    <locationMatch "\.(woff|woff2|ttf|svg|eot|otf)$">
        Header set Cache-Control "max-age=31536000"
    </locationMatch>
</ifModule>
# END Cache-Control Headers

EDIT

ok i realized locationmatch is expressed differently to filesmatch. How would i implement this correctly for the wp-contents directory and subfolders. Would it be something like this:

<LocationMatch “^/wp-content”>
Header set Cache-Control “max-age=31536000”
</LocationMatch>

But doesn’t that then apply to everything in the wp-contents folder? How would i specify particular filetypes (e.g., image vs css files) to give them a unique max age?