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

Community Guides
21

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/vnd.microsoft.icon "access plus 1 year"
</IfModule>

@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
22

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

23

Yes

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

3 Likes
24

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

25

Iv decided that for me, this is too Stressfull

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

26

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.

Nope.

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.

4 Likes
27

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
28

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

2 Likes
29

Thanx , that was easy x

30

robertz

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

.htaccess VIDEO-TUTORIAL

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

NET1
NET11405×1050 217 KB

NET1 HEAVY
NET1 HEAVY1405×1050 282 KB

added code

NV +CODE
NV +CODE1405×1050 221 KB

NV +CODE 2
NV +CODE 21405×1050 282 KB

31

That was a very good guide!

1 Like
32

Thanx | Im still looking for the fastest codes.

Screenshot_2021-06-16 GTmetrix Performance Report
Screenshot_2021-06-16 GTmetrix Performance Report1388×1068 203 KB

Screenshot_2021-06-16 GTmetrix Performance Report
Screenshot_2021-06-16 GTmetrix Performance Report1478×1068 225 KB

THE PROFESSIONALS

Screenshot_2021-06-16 GTmetrix Performance Report
Screenshot_2021-06-16 GTmetrix Performance Report1478×1068 243 KB

33

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.

4 Likes