Jump to content

How to Implement Caching on a Static Site (the easy way)

Recommended Posts

Note: This is only one of the many ways to implement caching. This in my opinion 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 before implementing these caching headers.




Not to shabby, but we can make it better.


To implement caching headers you would need to go to the cPanel file manager or connect via ftp. Then you would need to open the .htaccess file. If you don't see one, make sure to go to settings and show hidden files. If you don't have one, you can 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"


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.




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


<IfModule mod_headers.c>
Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires 0

<FilesMatch "\.(css|flv|gif|htm|html|ico|jpe|jpeg|jpg|js|mp3|mp4|png|pdf|swf|txt)$">
<IfModule mod_expires.c>
ExpiresActive Off
<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"

Save the file and wait a few minutes (5 - 30 minutes). Then just replace the .htaccess file with the original caching code.
Edited by robertzo
Link to comment
Share on other sites

BTW, this isn't the WordPress site I showed before in the Heliohost Loads Really Fast Topic. I used the Publii CMS this time since it contains all the features I need and isn't an overkill (like WordPress).

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...