Understanding Expires Headers for Web Caching

Let’s check how to use Expires headers in your web server configuration to control caching for your web content. Properly setting Expires headers can improve your website’s performance by reducing the number of requests made to the server.

.htaccess Configuration

The .htaccess file is used to define directives for the Apache web server. Below is an example of how to set Expires headers in your .htaccess file:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
  ExpiresByType application/x-font-ttf "access plus 1 year"
  ExpiresByType application/x-font-opentype "access plus 1 year"
  ExpiresByType application/x-font-woff "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresDefault "access plus 2 days"
  ExpiresByType text/html "access plus 2 days"
  ExpiresByType image/gif "access plus 3 months"
  ExpiresByType image/jpeg "access plus 3 months"
  ExpiresByType image/jpg "access plus 3 months"
  ExpiresByType image/png "access plus 3 months"
  ExpiresByType image/x-png "access plus 3 months"
  ExpiresByType text/css "access plus 8 days"
  ExpiresByType text/javascript "access plus 7 days"
  ExpiresByType application/x-javascript "access plus 7 days"
  ExpiresByType application/javascript "access plus 7 days"
  ExpiresByType image/x-icon "access plus 3 months"
</IfModule>

Reference: Apache HTTP Server Documentation

web.config Configuration

For IIS (Internet Information Services) users, the web.config file is used to configure caching. Here is an example configuration:

<configuration>
  <system.webServer>
    <staticContent>
      <clientCache cacheControlMode="UseExpires" httpExpires="Tue, 19 Jan 2038 03:14:07 GMT" />
    </staticContent>
  </system.webServer>
</configuration>

<configuration>
  <system.webServer>
    <staticContent>
      <!-- Set default to 1 day -->
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="1.00:00:00" />

      <!-- Override for specific types -->
      <remove fileExtension=".svg" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00">
        <add fileExtension=".svg" />
      </clientCache>

      <!-- Add similar overrides for other mime types as needed -->
    </staticContent>
  </system.webServer>
</configuration>

Explanation

Adding an Expires header provides a fully-formatted date and time that follows the specification in RFC 1123. The max-age directive takes priority over the Expires header. To use the cacheControlMaxAge attribute, you need to set the value of the cacheControlMode attribute to UseMaxAge.

The default value for max-age is 1.00:00:00 (1 day). Here is an example of a Cache-Control: max-age=<nnn> header:

Cache-Control: max-age=86400

Reference: Microsoft Learn Documentation

Best Practices and Considerations

Resource Types and Durations - Static resources (fonts, images): 3+ months

Dynamic content (HTML): Shorter duration (2 days)
CSS/JS files: Medium duration (7-8 days)
Version-controlled assets: Long duration (1 year)

Testing Your Configuration

curl -I https://example.com/image.jpg

Look for the Cache-Control and Expires headers in the response. 3. Important Notes - max-age directive takes priority over Expires headers

Always test changes in a staging environment first
Consider using versioning for static assets to maintain control over updates
Monitor performance metrics after implementing changes