How to implement Caching Headers in a Static Site (the easy way)

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.

5 Likes

Nice, but your image did not upload :joy:

Oh, thank you now it should be uploaded.

2 Likes

WONDEFULL thankyou
you dont say where to paste your code, once your in the
htaccess file ?

do you mean paste into the HTML files ?
i have 30 web-pages.
Also is the code pasted into the
HEAD or the BODY of the html file ?

Paste it in the htaccess file

2 Likes

Any other ideas ?

Yes!
Read carefully line 1 to line 8 of that file.

5 Likes

Doesnt make sense
it wont SAVE

You didn’t read carefully the first 8 lines of that file.

4 Likes

How do create a New htaccess file ,
is it a notepad file ?

you cant paste that code into the htaccess file

You have to create an .htaccess file in your htdocs folder (if you don’t already have one) and paste the code in that new file.

5 Likes

Wow this soooooo difficult
what do you name the file ?

You name it exactly .htaccess . It does not have a name. Just the extension.
Files that start with a dot are hidden files in UNIX systems.

Just create a text file and name it exactly .htaccess with the dot at the start.

2 Likes

EASY ?

You have to create it inside the htdocs folder of the site.
In your case, if you want those rules in all your sites, you have to create one .htaccess file in each htdocs folder of each of your sites.

5 Likes

Ok alexvf…thanx for your help
but i give up
this is so stupid.

Don’t give up!
Just try to create it inside the htdocs folder of one of your sites. There’s no rocket science behind it.

The htdocs is the root folder of your site and, because .htaccess rules are valid in the folder where the .htaccess file is and all its sub-folders, if you create it in the htdocs folder of one of the sites, the rules you have in it are valid for that site.

If you want them to work for your other sites, you have to create one (or copy) for each site.

5 Likes

Download the file below, upload it to the .htdocs directory, and replace it’s contents with the ones you want. @alexvf, I’m not sure if you can create hidden files for UNIX systems I’m the online file manager.

https://forum.infinityfree.net/uploads/short-url/t4IwjKuklzwGs53NRJcrxhQBmaT

1 Like

Thanx
"Replace its contents with the ones you want"

Hows anyone meant to know, what that means ?
robertz
has given the wrong instructions for this procedure.
What A Mess…