Caching via .htaccess for a Faster Website

At Little Fire, we like to talk about site-speed. Caching is a critical strategy to improve website performance, reducing server load and improving user experience. Caching stores copies oft-needed files for rapid deployment and reduces the time needed to generate and serve those files. If you are working in an Apache environment, caching via .htaccess is a quick and effective strategy.

Caching via .htaccess is a client-side mechanism. .htaccess tells your users’ device to keep a copy of static files scripts, logos, stylesheets and the like. Your users’ devices will then use those files rather than attempt to retrieve them from your server next time they view your site.

What is .htaccess?

.htaccess is a configuration file used by the Apache web server to manage various server settings, including URL redirections, access controls and, importantly, caching. This file is typically located in the root directory of your website and can override global settings specified in the Apache configuration files.

Why Use Browser Caching?

Improved Load Times: Users’ devices call browser-cached content straight off their own file system – way quicker than making a call to the internet.
Reduced Server Load: The server receives fewer requests, leading to better performance and resource management.
Enhanced User Experience: Faster load times lead to a smoother user experience, this should improve engagement and conversion rates.
Better SEO: Search engines favour websites that load quickly, potentially boosting your search rankings.

Implementing Caching via .htaccess

To enable caching, we need to add specific rules to the .htaccess file. These rules tell the server how to handle different types of files and how long to cache them.

Step-by-Step Guide

Accessing the .htaccess File:

Connect to your web server using an FTP client or a file manager in your hosting control panel.
Navigate to the root directory of your website, usually the httpdocs or public_html folder.
If the .htaccess file does not exist, create a new file named .htaccess.

Enabling Caching:
Add the following code snippets to your .htaccess file to set up caching for various file types.

   # BEGIN Caching via .htaccess

   # Enable compression
   <IfModule mod_deflate.c>
       AddOutputFilterByType DEFLATE text/plain
       AddOutputFilterByType DEFLATE text/html
       AddOutputFilterByType DEFLATE text/xml
       AddOutputFilterByType DEFLATE text/css
       AddOutputFilterByType DEFLATE application/xml
       AddOutputFilterByType DEFLATE application/xhtml+xml
       AddOutputFilterByType DEFLATE application/rss+xml
       AddOutputFilterByType DEFLATE application/javascript
       AddOutputFilterByType DEFLATE application/x-javascript
   </IfModule>

   # Set up caching for images, CSS, and JavaScript files
   <IfModule mod_expires.c>
       ExpiresActive On
       ExpiresByType image/jpg "access plus 1 year"
       ExpiresByType image/jpeg "access plus 1 year"
       ExpiresByType image/gif "access plus 1 year"
       ExpiresByType image/png "access plus 1 year"
       ExpiresByType text/css "access plus 1 month"
       ExpiresByType application/pdf "access plus 1 month"
       ExpiresByType text/x-javascript "access plus 1 month"
       ExpiresByType application/x-shockwave-flash "access plus 1 month"
       ExpiresByType image/x-icon "access plus 1 year"
       ExpiresDefault "access plus 2 days"
   </IfModule>

   # Caching HTML files
   <FilesMatch "\.(html|htm)$">
       FileETag None
       <IfModule mod_headers.c>
           Header unset ETag
           Header set Cache-Control "max-age=3600, private, must-revalidate"
       </IfModule>
   </FilesMatch>

   # END Caching via .htaccessCode language: PHP (php)

Compression with mod_deflate: This module compresses text-based content before sending it to the client, reducing the amount of data transmitted.
Expiration Headers with mod_expires: This sets expiration times for different file types, specifying how long browsers should cache these files.
HTML File Caching: This section handles the caching of HTML files, setting the Cache-Control header to ensure the content is cached for a short period and revalidated frequently.

Save and Upload:

Save the .htaccess file and upload it to your web server if you edited it locally.
If you edited the file directly on the server, simply save your changes.

Verifying Your Caching Configuration

After implementing the caching rules, verifying that they are working as expected is essential. You can use browser developer tools or online tools like GTmetrix or similar to check the caching headers of your website’s assets.

Caveats

.htaccess is Invisible

Because the file name starts with a period/full-stop most file systems will not display the file in a normal directory/folder window. You may need specialist software to view or amend your file.

.htaccess is Powerful

If you get your syntax wrong, .htaccess will break your website. Completely. Fortunately you can delete your changes and the effects should be immediately reversed.

Sticky Content

Don’t forget, when you dispatch files to the user, if .htaccess sends an instruction to cache that file for a month. Your users’ devices will do just that. If you tweak your logo or a key script file, those devices won’t know and won’t look for the updated file – they have been specifically instructed not to.

Files stored on the client’s cache are a common source of errors that you, as the website owner, cannot see but still frustrate your users – a “Works for Me” bug.

For this reason, browser caching, is only a wise strategy once your site is stable.