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

It literally means delete all the text in the file and replace it with the code you want in it. For example, replace everything in the file so it only has the code below.

<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/ "access plus 1 year"

@robertz did great. Although he did put a ‘ at the beginning of his htaccess file, if he could remove that it would be great. And not to be picky, but it’s also not lined up :slight_smile:

1 Like

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:

thats is the wrong procedure, is it not ?

you can see from the above screenshots
thats not possible.


Yes, but the .htaccess file must not be in the root folder. It has to be in the /htdocs folder.

No, it’s not the wrong procedure. It is correct.

I told you to download and fix the file above because I don’t think you can create a file starting with a dot [.] in the online file manager (I think FileZilla allows it though). So since you were having trouble creating the file, I decided to give it to you, and all you have to do is upload it to the server (in the /htdocs directory) and open it up (edit it) with the code that you want in it. Also, never give up because it’s hard, pushing through is the only way to learn (And if you continue on the same page (like web design) you will most likely need those skills later, so the earlier you learn them, the less time you have to spend worrying about it later).


Wow this is so stupid, and CONFUSING
What code are you reffering too ?

I wish someone could do a quick TUTORIAL on this
what a mess.
has given the wrong procedure

not only is it the wrong coding by adding an " ’ "
but also by stating
you must paste his code, into the htaccess FILE.

He DOES NOT say to
add an htaccess FILE . into the htdocs folder.

so that is a Mistake.

Iv decided that for me, this is too Stressfull

thanx for all your help guys…im off to create a new website.

First of all, it is @name not just name

If you pay me.

He has not. The procedure is correct.

The first one I’m sure is an accident, it happens to everyone. The second one should be implied, since you cannot upload or edit files in the root directory, and the .htaccess file there has a big “DO NOT EDIT ME” at the top.


It’s really quite simple.

  1. Download the file from above

  2. Upload it to the /htdocs folder

  3. Open it in the online home manager editor

  4. Remove all the text in the file

  5. Copy and paste the code I cave you above into the file

  6. Save and close the file

  7. Clear your cache and open your site.


BTW you didn’t have to delete everything, you just need to paste this code at the top (after the instructions). Sorry if I wasn’t clear.

1 Like

Just open the /htdocs/ folder and create a file called “.htaccess”


Thanx , that was easy x


Iv created a Video-Tutorial,to make the initial-procedure easier to understand.
Screenshot_2021-06-16 I F TUT


These are the results from my side.

  1. the first 2 screenshots are BEFORE the added code. NET1
  2. the second 2 screenshots are AFTER the added code. NV

A1. is the lowest data web-page | no images videos
B2. is the highest data web-page | 7 HD-Vimeo videos

added code

That was a very good guide!

1 Like

Thanx | Im still looking for the fastest codes.


This is not true.
This only works if all your past users access the website in those few minutes.
If they don’t, and you put the old .htaccess rules back on after a few minutes, the user’s browser will never see those changes and keep using the old cached files.

The best way to solve this is attributing versions to your cached files to make the user’s browser think that these are new files.
So, if you have this:

<link rel="stylesheet" href="css/styles.css" />

You can force your user’s to fetch the changed files doing something like this:

<link rel="stylesheet" href="css/styles.css?v=0.1" />

Using this, the browser will download the updated files because it thinks they are new files.