6

INTRO

I have a task to fix existing site's problem that nothing is being cached (except for browser session). When closing session and opening browser again, page loads a lot of images, JS and CSS again. As I have ~60 items every time, there is a big load problem.

PROBLEM

Looking at Chrome console, Audit shows The following resources are missing a cache expiration... Audit

And in Network item in "Response Headers" doesn't even show "cache-control" line. Response Head

TRIED SOLUTIONS

I have set info in .htaccess file and made sure mod_expires is active:

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access 1 year"
    ExpiresByType image/jpeg "access 1 year"
    ExpiresByType image/gif "access 1 year"
    ExpiresByType image/png "access 1 year"
    ExpiresByType text/css "access 1 month"
    ExpiresByType text/html "access 1 month"
    ExpiresByType application/pdf "access 1 month"
    ExpiresByType text/x-javascript "access 1 month"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresByType image/x-icon "access 1 year"
    ExpiresDefault "access 1 month"
</IfModule>

I added Cache-control meta-tag in html head that is also showing in page's code source so it is compiled.

<meta http-equiv="Cache-control" content="public" content="max-age=604800">

And I'd like to add that it most likely isn't a server issue as production page's host has set it to a usual default. (And I don't have access to that server anyways)
I'd be super delighted, if someone could give me some pointers of what I am missing or haven't checked or simply don't understand.

Added main.css headers enter image description here

Thanks!

Mike B
  • 2,756
  • 2
  • 16
  • 28
  • This might be interesting: http://stackoverflow.com/questions/3401049/chrome-doesnt-cache-images-js-css – eol Feb 03 '17 at 11:17
  • @eol I had set Cache-control header in html meta tag with max-age already. – Mike B Feb 03 '17 at 11:58
  • In no particular order... 1) ETag should do exactly that, make assets get cached. 2) HTML meta tags will by no means affect any other resources 3) `` means: "if the module is not available, just ignore my code and don't tell me about it" 4) PHP doesn't play any role in asset deliveries (unless it does, in which case you should explain how) – Álvaro González Feb 06 '17 at 09:11
  • @MikelisBaltruks: For reference you can check this http://stackoverflow.com/questions/49547/how-to-control-web-page-caching-across-all-browsers – vijay Feb 06 '17 at 10:01

2 Answers2

1

You can set the headers through php since this is a php site.

<?php
  header("Cache-Control: max-age=2592000"); //30days (60sec * 60min * 24hours * 30days)
?>

Also you can use the FilesMatch like this in your .htaccess

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=31536000, public"
</FilesMatch>
xhulio
  • 1,093
  • 1
  • 13
  • 32
  • activated mod_headers in apache server, added both `FilesMatch` and php `header()` and still nothing. Default header is `no-cache` and `max-age:0` – Mike B Feb 06 '17 at 09:34
  • can you send a screenshot of `main.css` headers ? – xhulio Feb 06 '17 at 09:48
  • Added to the question (last image) – Mike B Feb 06 '17 at 09:52
  • as i noticed, there is no cache-control header in the `main.css`. This means that somehow the `.htaccess` file is not doing what it should. try adding the FilesMatch directive to the apache config file for the website, and restart apache. – xhulio Feb 06 '17 at 09:56
  • @MikelisBaltruksHow you activated the mode_headers? – Vaibhav Kumar Feb 09 '17 at 10:22
  • Thanks for the help - upvote for trying. Read my answer if You are interested in super-smart solution. xD – Mike B Feb 10 '17 at 09:02
1

Well, although stupid (as I expected), but I didn't read about it anywhere and just forget about the need of it.

Solution

It turned out all those things changed (as I said everything was activated on server, access files etc). And the problem was that I didn't clear the cache after changing caching info. Now after three days I started working on some CSS, needed to reset the cache and boom - all the new headers are active for all the items.

halfer
  • 19,824
  • 17
  • 99
  • 186
Mike B
  • 2,756
  • 2
  • 16
  • 28