Cache control / max age not working for the site

cache

In order to speed up my site Telium I implemented all of the .htaccess recommendations from this site. However, when I browse to my web site with the developer tools open (in Chrome), I see that all of the images on my pages are being re-downloaded every time I refresh. Strangely, the headers look right – so why are the images not being cached?

My .htaccess is located in the root of the web site, and looks like this:

# BEGIN Expire headers
<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 5 seconds"
  ExpiresByType image/x-icon "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 216000 seconds"
  ExpiresByType application/javascript "access plus 216000 seconds"
  ExpiresByType application/x-javascript "access plus 216000 seconds"
  ExpiresByType text/html "access plus 600 seconds"
  ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers
<ifModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
  AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
  AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
  AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript application/json
  AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
  AddOutputFilterByType DEFLATE font/truetype font/opentype
</ifModule>
# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
  <filesMatch ".(ico|jpe?g|png|gif|swf)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch ".(css)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch ".(js)$">
# was private  
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch ".(x?html?|php)$">
    Header set Cache-Control "private, must-revalidate"
  </filesMatch>
</ifModule>
# END Cache-Control Headers

Best Answer

Instead of "refreshing the page", try going to another page and clicking a link to go to the page, or copy the link into a new tab, and press enter.

What I have found is that when you click "refresh" Chrome assumes the user thinks something is out of date, and so it purposefully ignores the cache and downloads things fresh.

Related Solutions

Nginx – Disable caching when serving static files with Nginx (for development)

Since the answer is somehow hidden in the question - here is the solution for nginx in a VirtualBox environment as standalone answer.

In your nginx config (usally /etc/nginx/nginx.conf) or vhost config file change the sendfile parameter to off:

sendfile  off;

While sendfile is at the heart of Nginx's fame (blazing-fast low-level static file serving efficiency) it might be a bane for local development, e.g. Javascripts that change often and need to be reloaded. Nonetheless Nginx sendfile is smart and probably isn't most people's issue; check your browser's "disable cache" options as well!

Iis – Stop IIS 7.5 From Sending Out Cache-Control Max-Age on Error Codes

I created a rudimentary test "suite".

When I run the tests with a minimal Web.config on IIS 7.0 (Integrated pipline mode on .NET 4.0) everything passes; the test file's Cache-Control response header is set to private when it's request's Accept header doesn't match the file's Content-Type.

This leads me to believe that you have some module interrupting IIS's static caching routine or IIS 7.0 and 7.5 differ here.

Here are the files I used (sans some-script.js since its just an empty file):

Web.Config:

<?xml version="1.0"?>
<configuration>
    <system.web>
        <compilation debug="true" targetFramework="4.0">
        </compilation>
    </system.web>
    <system.webServer>
        <staticContent>
            <!-- Set expire headers to 30 days for static content-->
            <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" />
        </staticContent>
    </system.webServer>
</configuration>

test.html:

<!doctype html>
<html>
<head>
    <title>http://serverfault.com/questions/346975</title>
    <style>
        body > div
        {
            border:1px solid;
            padding:10px;
            margin:10px;
        }
    </style>
</head>
    <body>
        <div>
            <h2>Request JS file with Accepts: accept/nothing</h2>
            <b>Response Headers: </b>
            <pre id="responseHeaders-1">loading&hellip</pre>
        </div>

        <div>
            <h2>Request JS file with Accepts: */*</h2>
            <b>Response Headers: </b>
            <pre id="responseHeaders-2">loading&hellip</pre>
        </div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script>
            var responseHeaders1 = $("#responseHeaders-1"),
                responseHeaders2 = $("#responseHeaders-2"),
                fetchScript = function (accepts, element, successMsg, errorMsg) {

                    var jXhr = $.ajax({
                        // fetch the resource "fresh" each time since we are testing the Cache-Control header and not caching itself
                        "url": "some-script.js?" + (new Date).getTime(),
                        "headers": {
                            "Accept" : accepts
                        },
                        "complete": function () {
                            var headers = jXhr.getAllResponseHeaders();
                            headers = headers.replace(/(Cache-Control:.+)/i, "<strong><u>$1</u></strong>");
                            element.html(headers);
                        },
                        "success": function () {
                            element.after("<div>" + successMsg + "</div>");
                        },
                        "error": function () {
                            element.after("<div>" + errorMsg + "</div>");
                        }
                    });
                };

                fetchScript("accept/nothing", responseHeaders1, "Uh, your server is sending stuff when the client doesn't accept it.", "Your server (probably) responded correctly.");
                fetchScript("*/*", responseHeaders2, "Your server responded correctly.", "Something went wrong.");
        </script>
    </body>
</html>

Best Answer

Related Solutions

Nginx – Disable caching when serving static files with Nginx (for development)

Iis – Stop IIS 7.5 From Sending Out Cache-Control Max-Age on Error Codes

Related Topic