1

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:

2
  • You need to create a blank file named .htaccess you then stick the code from webmasters.stackexchange.com/questions/84521/… in that file. Upload that file to the root folder of where your site is hosted. Oct 10, 2015 at 11:06
  • Thanks that helped! I should mention one of the problems was that the settings on cPanel was to NOT show hidden files, so I wasn't even aware that this file was already on server (though it was empty).
    – Yar
    Oct 10, 2015 at 11:32

1 Answer 1

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

2
  • Sorry i'm not a developer I just know some limited web coding. I did add the .htaccess file with a similar syntax to yours (i used only seconds measurement) and the google pagespeed alert was gone. Hope that helps.
    – Yar
    Oct 12, 2015 at 16:11
  • Even if you are designer, it may impact your job sometimes, you may try to reload a html or css and see an old version of your work and require to reload again. That's why, i have left commented line for you if it happens. Uncomment the last ones if you have any problems. But doing so, may make the google pageload appear again. Oct 12, 2015 at 20:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.