Search code examples
apachemod-expiresimage-caching

How to make static content on Apache be cached by browser and not checked for freshness with every request?

How can I get static content on Apache to be {cached by browser} and not {checked for freshness {with every request}}?

I'm working on a website hosted on Apache webserver. Recently, I was testing something with headers (Content-Type for different types of content) and saw a lot of conditional requests for images. Example:

200 /index.php?page=1234&action=list
304 /favicon.ico
304 /img/logo.png
304 /img/arrow.png
(etc.)

Although the image files are static content and are cached by the browser, every time a user opens a page that links to them, they are conditionally requested, to which they send "304 Not Modified". That's good (less data transferred), but it means 20+ more requests with every page load (longer page load due to all those round-trips, even with Keep-Alive and pipelining enabled).

How do I tell the browser to keep the existing file and not check for newer version?

EDIT: the mod_expires method works, even with the favicon.

Solution

  • Expires module in Apache solves this

    a2enmod expires

    it needs to be loaded in server config, and set up in .htaccess (or in server config).

    With an Expires header, the resource is only requested the first time. Before the expiration date, subsequent requests are fulfilled from browser cache. After the specified time expires and the resource is needed, only then it is requested again (conditionally - a 304 will be returned for an unchanged resource). The only reliable way to clear it from the cache before it expires is manually, or by forcing a refresh (usually Ctrl-F5). (This could be an issue if the resource changes in the meantime, but statical images don't change very often.)

    # enable the directives - assuming they're not enabled globally
ExpiresActive on

# send an Expires: header for each of these mimetypes (as defined by server)
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"

# css may change a bit sometimes, so define shorter expiration
ExpiresByType text/css "access plus 1 days"

    For favicon.ico, a bit more work is needed (Apache normally does not recognize Windows icon files, and sends this as the default text/plain).

    # special MIME type for icons - see http://www.iana.org/assignments/media-types/image/vnd.microsoft.icon
AddType image/vnd.microsoft.icon .ico
# now we have icon MIME type, we can use it
# my favicon doesn't change much
ExpiresByType image/vnd.microsoft.icon "access plus 3 months"

    And voila, It Works™!