Note: This is only one of the many ways to implement caching. This is the easiest and the one that works for me.
This is my method on how to easily Implement Caching Headers in .htcaccess.
Now some of you must be wondering. What in the world is caching. Caching is a way to speed up your site by preloading the site so that it can be delivered to you faster. What that means is that instead of doing the complex calculations of generating a website every time, they can just deliver you a saved copy. Kind of like making more products than your customers ordered so when another customer orders the product, you won’t have to make it from scratch, you just need to deliver the premade product to them.
So with no further due, lets get started.
Before we start, here is a Gtmetrix test for my website (hosted on Infinityfree) before I implemented these caching headers.
Not to shabby, but we can make it better.
To implement caching headers you would need to go to the vPanel file manager or connect via ftp. Then you would need to open the .htaccess file. If you don’t have one, just create it.
Then paste in this code:
'<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"
# CSS, JavaScript
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
# Others
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
</IfModule>
Done, it is that easy. Now if you want, you can edit the code to your preference but that is optional.
Now take a look at the exact same website after implementing that caching methods.
You can see my website (without any changes) loaded TWICE as fast as before.
If your homepage has changed and you want to clear the cache. Just replace the code above with this code:
# DISABLE CACHING
<IfModule mod_headers.c>
Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires 0
</IfModule>
<FilesMatch "\.(css|flv|gif|htm|html|ico|jpe|jpeg|jpg|js|mp3|mp4|png|pdf|swf|txt)$">
<IfModule mod_expires.c>
ExpiresActive Off
</IfModule>
<IfModule mod_headers.c>
FileETag None
Header unset ETag
Header unset Pragma
Header unset Cache-Control
Header unset Last-Modified
Header set Pragma "no-cache"
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Expires "Thu, 1 Jan 1970 00:00:00 GMT"
</IfModule>
</FilesMatch>
Save the file and wait a few minutes (5 - 30 minutes). Then just replace the .htaccess file with the original caching code.
P.S If you want to use Gtmetrix to measure your sites speed, you will unfortunately need to use Cloudflare since they don’t measure sites with invalid SSL (and missing CA Bundles). You can try it without Cloudflare and let me know the results.
