Browser Cache Control

Question

First: I'm a Designer that knows some HTML and CSS, not a programmer, so I'm so in advance for my limited knowledge and understanding :) My website skeleton is based on a single HTML and a few CSS & JS files which I edit on my computer and copy to the domain FTP when needed. These files were not written by me but I do edit them as best as I can.

Second: I'm using Google's PageSpeed Insight to check my website. A main part of my low score results from the lack or wrong file caching. I did looked around the web quite a bit trying to solve the issue but so far haven't succeeded, because either I don't understand the solutions or they are not relevant (for example meant for WordPress sites etc).

My question: How do I add a cache limit to my entire site (css, js, image files etc) using code edits on html/css/php/other(?) files.

I want the limit to be monthly (changes don't occur often). Problem is mostly with images which do not change their file-names if updated.

Notes: My site is with GoDaddy, I believe it is using an Apache 2.0 server. I've read .htaccess file not caching and Google Pagespeed tells me to leverage browser caching when caching is already enabled but didn't fully understand them. Where and how do I use such code? That might be the answer if one could elaborate it for me.

Thanks

---

Edits will be added here if needed:

Answer 1

.htaccess is a file where you can add directives to change the headers of your files. you can add the following code below in htaccess which will determine an expiration time for every type of file. The default expiration time will be 7 days. Then, if the type of file is present in the list apache is going to pick the directive rather than the default.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/x-icon                              "access plus 1 year"
ExpiresByType image/jpeg                                "access plus 1 month"
ExpiresByType image/gif                                 "access plus 1 month"
ExpiresByType image/png                                 "access plus 1 month"
ExpiresByType application/font-woff                     "access plus 1 month"
ExpiresByType application/x-font-woff                   "access plus 1 month"
ExpiresByType application/font-ttf                      "access plus 1 month"
ExpiresByType application/x-shockwave-flash             "access plus 1 month"
ExpiresByType application/pdf                           "access plus 7 days"
ExpiresByType application/javascript                    "access plus 7 days"
ExpiresByType text/css                                  "access plus 7 days"
ExpiresByType application/atom+xml                      "access plus 1 hour"
ExpiresByType application/rdf+xml                       "access plus 1 hour"
ExpiresByType application/rss+xml                       "access plus 1 hour"
ExpiresByType application/json                          "access plus 0 seconds"
ExpiresByType application/ld+json                       "access plus 0 seconds"
ExpiresByType application/schema+json                   "access plus 0 seconds"
ExpiresByType application/vnd.geo+json                  "access plus 0 seconds"
ExpiresByType application/xml                           "access plus 0 seconds"
ExpiresDefault "access plus 7 days"
#ExpiresByType text/html "access plus 0 seconds"
#ExpiresByType text/plain "access plus 0 seconds"
#ExpiresByType application/octet-stream "access plus 0 seconds"
</IfModule>

As you are a developer you can then bring me interesting feedback. I would like to know if those expiration times are a problem for html and php. Let me explain: When you modify a file, do you still get the old page from the cache or the updated page. If you have this kind of issue let me know. If you have any cache problem, uncomment the last lines from the code.

Then, if you can see the header of one php page you get

HTTP/1.1 200 OK
Date: Sat, 10 Oct 2015 16:20:14 GMT
Server: Apache/2
X-Powered-By: PHP/5.6.13
Vary: Cookie,User-Agent
Cache-Control: max-age=604800
Expires: Sat, 17 Oct 2015 16:20:14 GMT 
Content-Type: text/html; charset=UTF-8

17 Oct. minus 10 oct = 7 days (default rule) and 604800 seconds = 7 days

Then, if you get the header of a jpg url:

HTTP/1.1 200 OK
Date: Sat, 10 Oct 2015 16:25:03 GMT
Server: Apache/2
Last-Modified: Fri, 04 Sep 2015 16:49:12 GMT
ETag: "a6d-51eeeadece009"
Accept-Ranges: bytes
Content-Length: 2669
Cache-Control: max-age=2592000
Expires: Mon, 09 Nov 2015 16:25:03 GMT
Content-Type: image/jpeg

09 Nov minus 10 oct. = 2592000 seconds = 30 days = 1 generic month