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

[robertzo]

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"

  </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.

 

 

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:

 

# 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.

Edited June 11, 2021 by robertzo

[robertzo]

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).