How to Serve Static Assets with an Efficient Cache Policy

Serving static assets like images, videos, fonts, CSS, and JavaScript efficiently can significantly improve your website’s performance. One of the best practices is to leverage browser caching by setting appropriate cache headers. This tells browsers to reuse downloaded resources instead of re-fetching them every time.

🔧 Setting Up Cache Policy for Apache Servers

If you're using an Apache server, you can configure caching rules via the .htaccess file. Here's how:

1. Open or create a .htaccess file in your web root directory.
2. Copy and paste the following configuration:

<IfModule mod_expires.c>
  ExpiresActive On

  # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"

  # Video
  ExpiresByType video/webm "access plus 1 year"
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"

  # Fonts
  ExpiresByType font/ttf "access plus 1 year"
  ExpiresByType font/otf "access plus 1 year"
  ExpiresByType font/woff "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType application/font-woff "access plus 1 year"
  ExpiresByType application/font-woff2 "access plus 1 year"

  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType text/javascript "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"

  # Others
  ExpiresByType application/pdf "access plus 1 year"
  ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
</IfModule>

This configuration tells browsers to cache these assets for one year from the time they are accessed.

ℹ️ Deprecation Notice

While application/font-woff and application/font-woff2 are still supported, they are deprecated. It's recommended to use the newer MIME types:

• font/woff
• font/woff2

Using modern and proper MIME types ensures better compatibility and future-proofing of your configuration.

---

✅ Pro Tip: Always version your static files (e.g., style.v1.css, app.v2.js) so you can force updates when needed without relying solely on cache expiry.