Close Menu
    SEO

    How to serve static assets with an efficient cache policy

    Editorial StaffBy Updated:No Comments3 Mins Read

    Serving static assets with an efficient cache policy is crucial for optimizing website performance and reducing load times. This tutorial will guide you through the process of setting up a robust cache policy for static assets, such as images, stylesheets, and JavaScript files.

    How to serve static assets with an efficient cache policy

    1. Understanding Cache Control Headers:

    Cache control headers, specifically the Cache-Control and Expires headers, dictate how browsers and intermediate caches should handle the caching of static assets.

    2. Configuring Cache-Control Header:

    In your web server configuration or the .htaccess file, set the Cache-Control header to specify caching directives. For example, to cache assets for one week, use the following:

    <FilesMatch "\.(jpg|jpeg|png|gif|js|css)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>

    This example sets a maximum age of 604800 seconds (one week) for JPEG, PNG, GIF, JavaScript, and CSS files, indicating they can be cached by both the browser and intermediary caches.

    3. Implementing Expires Header:

    While Cache-Control is more modern and widely supported, you can also use the Expires header. However, note that Cache-Control takes precedence if both headers are present.

    <FilesMatch "\.(jpg|jpeg|png|gif|js|css)$">
ExpiresActive On
ExpiresDefault "access plus 1 week"
</FilesMatch>

    This example achieves a similar result to the previous one, setting the expiration date one week from the time of access.

    Full code for Apache Servers:

    
<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>

    4. Leveraging ETags:

    ETags (Entity Tags) are unique identifiers assigned to each version of a file. They can be used for cache validation.

    <FilesMatch "\.(jpg|jpeg|png|gif|js|css)$">
FileETag MTime Size
</FilesMatch>

    This example uses the file’s modification time and size to generate ETags.

    5. Testing Cache Policies:

    After implementing the cache policy, use browser developer tools or online tools like Google PageSpeed Insights to verify that caching is working as expected. Check for the presence of cache headers in the response headers.

    6. Handling Cache Invalidation:

    To handle cache invalidation for assets that change frequently, consider versioning or appending a query parameter with a unique identifier to the asset URL.

    <link rel="stylesheet" href="/styles/main.css?v=1.1">

    This ensures that when the asset is updated, the URL changes, and clients fetch the latest version.

    7. Monitoring and Adjusting:

    Regularly monitor your website’s performance and make adjustments to the cache policy as needed. Analyze user behavior, traffic patterns, and update static assets accordingly.

    Conclusion:

    Efficiently serving static assets with a well-defined cache policy is an integral part of web performance optimization. By utilizing cache control headers, ETags, and cache validation strategies, you can significantly enhance your website’s speed and user experience.

    Regularly review and fine-tune your cache policy to adapt to changing content and ensure optimal performance over time.

    Share.

    Related Posts