Improve Website Performance Using .htaccess Browser Caching

Introduction

Website performance plays a crucial role in user experience, search engine rankings, and overall server efficiency. One of the easiest ways to improve page load times is by enabling browser caching and content compression through the .htaccess file.

When the Apache modules mod_expires and mod_headers are enabled on the server, you can configure caching rules that allow browsers to store static resources locally. This reduces the number of requests sent to the server and significantly improves website loading speeds for returning visitors.

Prerequisites

Before implementing browser caching, ensure the following requirements are met:

• Apache web server is in use.
• The mod_expires module is enabled.
• The mod_headers module is enabled.
• Access to the website’s .htaccess file.
• Appropriate backup of the existing .htaccess configuration before making changes.

You can verify that the required modules are enabled by running:

apachectl -M | grep -E 'expires|headers'

Implementation

Add the following directives to your website’s .htaccess file:

# BEGIN Compress Text Files

<IfModule mod_deflate.c>
    SetOutputFilter DEFLATE
</IfModule>

# END Compress Text Files

# BEGIN Expire Headers

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 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"

    ExpiresByType text/css "access plus 604800 seconds"

    ExpiresByType text/javascript "access plus 216000 seconds"
    ExpiresByType application/javascript "access plus 216000 seconds"
    ExpiresByType application/x-javascript "access plus 216000 seconds"

    ExpiresByType text/html "access plus 600 seconds"
    ExpiresByType application/xhtml+xml "access plus 600 seconds"
</IfModule>

# END Expire Headers

# BEGIN Cache-Control Headers

<IfModule mod_headers.c>

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

    <FilesMatch "\.(css)$">
        Header set Cache-Control "max-age=604800, public"
    </FilesMatch>

    <FilesMatch "\.(js)$">
        Header set Cache-Control "max-age=216000, private"
    </FilesMatch>

    <FilesMatch "\.(html|htm)$">
        Header set Cache-Control "max-age=600, private, must-revalidate"
    </FilesMatch>

</IfModule>

# END Cache-Control Headers

# BEGIN Disable ETags

<IfModule mod_headers.c>
    Header unset ETag
</IfModule>

FileETag None

# END Disable ETags

# BEGIN Remove Last-Modified Header

<IfModule mod_headers.c>
    Header unset Last-Modified
</IfModule>

# END Remove Last-Modified Header

How It Works

Compression (mod_deflate)

The DEFLATE filter compresses text-based content before it is sent to visitors, reducing bandwidth usage and improving page load times.

Expires Headers

Expires headers tell browsers how long they can store specific file types locally before requesting an updated version from the server.

Cache-Control Headers

Cache-Control directives provide additional caching instructions for browsers and intermediary proxies, helping optimize content delivery.

ETags

Disabling ETags can reduce unnecessary validation requests and improve caching consistency, especially in load-balanced environments.

Last-Modified Header

Removing the Last-Modified header can reduce conditional requests when expiration and cache-control directives are already being used.

Verification

After updating the .htaccess file:

1. Clear your browser cache.
2. Reload the website.
3. Use browser developer tools (Network tab) to verify caching headers.
4. Test the website using performance tools such as:
   • Google PageSpeed Insights
   • GTmetrix
   • WebPageTest

Conclusion

Enabling browser caching and compression through .htaccess is a simple yet effective way to improve website performance. By leveraging Apache’s mod_expires, mod_headers, and mod_deflate modules, static resources can be cached efficiently, reducing server load and delivering faster page load times for visitors. Properly configured caching can significantly enhance user experience and contribute to better website performance overall.