How to Cache Your Site with .htaccess


how to cache your site with .htaccess

Caching improves your website speed by loading frequently accessed content right from users’ browser. It not only reduces server load but also improves user experience. Here’s how to cache your site with .htaccess.

 

How to Cache Your Site with .htaccess

Here are the steps to cache your site with .htaccess. Before you proceed, please ensure you have enabled .htaccess (mod_rewrite) for your Apache web server. Here are the steps to do it:

 

Place your .htaccess file in the root document folder of your website (/var/www/html).

 

1. Enable mod_expires

Apache requires mod_expires and mod_headers module to enable caching and set HTTP headers. You can enable it with the command


$ sudo a2enmod expires
$ sudo a2enmod headers

In CentOS, it comes pre-installed. If not, you can open up Apache config file in a text editor, look for the line containing “mod_expires.so” and uncomment it by removing ‘#’ at its beginning.

 

2. Browser Caching using .htaccess

There are 2 ways to enable browser caching in Apache.

Using ExpiresByType

You can set cache expiry for each type of file as shown. Just add the following lines in your .htaccess file


<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

 

In the above example, we have given time interval in year, month. You can also use days, weeks, years, hours, minutes and seconds.

 

You can also combine time units, like so:


ExpiresByType text/html "access plus 1 month 5 days 3 hours"

 

Instead of basing cache expiry on access time of the user, you can also base it on modified time of the file


ExpiresByType image/gif "modification plus 7 days"

 

You can also combine the different file extensions into a single expression,


<IfModule mod_expires.c>
<FilesMatch "\.(jpe?g|png|gif|js|css)$">
ExpiresActive On
ExpiresDefault "access plus 1 week"
</FilesMatch>
</IfModule>

 

Using Cache-Control

You can also set Cache-Control in response header. It gives developers a finer control over cache expiry.


# 1 Month cache expiry
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>

 

3. Restart Apache Web Server

Restart Apache Web Server to apply changes


$ sudo systemctl restart apache2 [Ubuntu/Debian]
$ sudo systemctl restart httpd [RHEL/CentOS]

 

4. Test Caching

You can use one of the HTTP response header tools to enter your website URL and examine the headers.

OR

Open web browser and visit any page of your website. After the page is loaded, right click anywhere on the page and select ‘Inspect Element’ option. You’ll see a window with page headers and other details in it. You will see an Expires header and Cache-Control header with a max-age directive.

http headers

 

 

 

About Sreeram Sreenivasan

Sreeram Sreenivasan is the Founder of Ubiq, a business dashboard & reporting platform for small & medium businesses. Ubiq makes it easy to build business dashboards & reports for your business. Try it for free today!