How to set up proper caching in Apache?

Question

Apache HTTP Server

Hello fellow toasters!
I found a strange problem with caching of images, css-, js-files on the site under development.
I use LAMP on the server:
- Debian GNU/Linux 7.5 (wheezy).
- Apache 2.2.22 (loaded modules: alias, auth_basic, authn_file, authz_default, authz_groupfile, authz_host, authz_user, autoindex, cgid, deflate, dir, env, expires, fcgid, headers, mime, negotiation, reqtimeout, rewrite, setenvif, ssl , status, suexec, unique_id, xsendfile).
- PHP 5.4.4-14+deb7u11 (cgi-fcgi).
In the directory with images, I placed the .htaccess file with the following content:

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 month"
    Header append Cache-Control "public"
</IfModule>

When the page is first requested, the following headers are sent to the server:

GET /images/some_image.png HTTP/1.1
Host:            example.com
User-Agent:      Mozilla/5.0 (Windows NT 6.3; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0
Accept:          image/png,image/*;q=0.8,*/*;q=0.5
Accept-Language: ru-RU,ru;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Referer:         https://example.com/
Connection:      keep-alive
Pragma:          no-cache
Cache-Control:   no-cache

And the server responds like this:

HTTP/1.1 200 OK
Date:            Tue, 01 Jul 2014 10:33:49 GMT
Server:          Apache/2.2.22 (Debian)
Last-Modified:   Mon, 09 Jun 2014 19:29:59 GMT
Etag:            "2016e1-50b-4fb6c3ca9a6b1"
Accept-Ranges:   bytes
Content-Length:  1291
Cache-Control:   max-age=2592000, public
Expires:         Thu, 31 Jul 2014 10:33:49 GMT
X-Frame-Options: sameorigin
Keep-Alive:      timeout=5, max=100
Connection:      Keep-Alive
Content-Type:    image/png

As you can see from them, the server correctly sets the "Cache-Control" and "Expires" headers.
When you re-request, when the image should already be in the cache, for some reason a request is still sent to the server:

GET /images/some_image.png HTTP/1.1
Host:               example.com
User-Agent:         Mozilla/5.0 (Windows NT 6.3; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0
Accept:             image/png,image/*;q=0.8,*/*;q=0.5
Accept-Language:    ru-RU,ru;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding:    gzip, deflate
Referer:            https://example.com/
Connection:         keep-alive
If-Modified-Since:  Mon, 09 Jun 2014 19:29:59 GMT
If-None-Match:      "2016e1-50b-4fb6c3ca9a6b1"
Cache-Control:      max-age=0

And this is where " Cache-Control: max-age=0 " confuses me. It should be?
Server response:

HTTP/1.1 304 Not Modified
Date:          Tue, 01 Jul 2014 10:48:10 GMT
Server:        Apache/2.2.22 (Debian)
Connection:    Keep-Alive
Keep-Alive:    timeout=5, max=98
Etag:          "2016e1-50b-4fb6c3ca9a6b1"
Expires:       Thu, 31 Jul 2014 10:48:10 GMT
Cache-Control: max-age=2592000, public

Accordingly, this each time causes a delay in the display of pictures.
Tell me, please, what could be the problem? In which direction to dig?
Thanks in advance!

Answer 1

Maybe so, as a universal solution.

<ifModule mod_headers.c>
    #кэшировать html и htm файлы на один день
    <FilesMatch "\.(html|htm)$">
        Header set Cache-Control "max-age=43200"
    </FilesMatch>
    #кэшировать css, javascript и текстовые файлы на одну неделю
    <FilesMatch "\.(js|css|txt)$">
        Header set Cache-Control "max-age=604800"
    </FilesMatch>
    #кэшировать флэш и изображения на месяц
    <FilesMatch "\.(flv|swf|ico|gif|jpg|jpeg|png)$">
        Header set Cache-Control "max-age=2592000"
    </FilesMatch>
    #отключить кэширование
    <FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
        Header unset Cache-Control
    </FilesMatch>
</IfModule>
<ifModule mod_expires.c>
    ExpiresActive On
    #по умолчанию кеш в 5 секунд
    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"
    #кэшировать css, javascript и текстовые файлы на одну неделю
    ExpiresByType text/css "access plus 604800 seconds"
    ExpiresByType text/javascript "access plus 604800 seconds"
    ExpiresByType application/javascript "access plus 604800 seconds"
    ExpiresByType application/x-javascript "access plus 604800 seconds"
    #кэшировать html и htm файлы на один день
    ExpiresByType text/html "access plus 43200 seconds"
    #кэшировать xml файлы на десять минут
    ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>

Answer 2

Why don't you want to distribute statics and cache through the frontend on nginx?

Answer 3

If a repeated request is made by pressing F5, then this is normal. In this case, the browser (at least chrome and ff ) checks that the data is up to date. If you just walk around the site, then the content will be taken from the cache without verification.