Apache Vhost Directives Optimized for Pagespeed

Question

I currently use this setup in my vhost:

<Location />
  SetOutputFilter DEFLATE
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
  SetEnvIfNoCase Request_URI \
  \.(?:gif|jpe?g|png)$ no-gzip dont-vary
  Header append Vary User-Agent env=!dont-vary
</Location>
<Directory />
  ExpiresActive On
  ExpiresByType text/html "access plus 5 minutes"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/x-javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType image/gif "access plus 1 month"
  ExpiresByType image/png "access plus 1 month"
  ExpiresByType image/jpg "access plus 1 month"
  ExpiresByType image/jpeg "access plus 1 month"
  ExpiresByType image/x-icon "access plus 1 month"
  ExpiresDefault "access plus 1 day"

  <FilesMatch "\.(ico|jpeg|pdf|flv|jpg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=2592000, public"
    Header unset Last-Modified
    Header unset ETag
    FileETag None
  </FilesMatch>
  <FilesMatch "\.(html|php)$">
    Header set Cache-Control "max-age=900, public, must-revalidate"
  </FilesMatch>
</Directory>

While it works great for speeding up the thing, sometimes users dont see the changes they themselfs made on content (mainly while using FireFox) :( any suggestions / optimization hints?

score 1 · Answer 1 · answered Dec 16 '10 at 09:25

Instead of forcing the browser to cache, you should send a must-revalidate header and control the caching from within your programming language (for example, PHP) by sending an Expires and Last-Modified header. The browser will then ask your site for the latest version on each request, but make sure to answer with an empty page if nothing has changed.

This may take some time to implement, but it definitely works.

score 0 · Answer 2 · answered Dec 11 '10 at 11:35

The problem here is browser caches your javascript,css and images and hence won't know if you have modified anything in the server unless the cache expires.

For example, consider you have a JS file named script.js. According to the following rules you have in your htaccess file,

ExpiresByType application/x-javascript "access plus 1 month"  
ExpiresByType application/javascript "access plus 1 month"

the javascript files are cached for a month and hence no new requests will be asked for the JS files for 1 month unless the cache is manually cleared.

How to solve this problem.

Assuming your file name is script.js, in HTML file, you should include is as

<script src="includes/script.100.js" type="text/javascript"></script>

or

<link rel="stylesheet" type="text/css" href="includes/style.100.css" />

100 could be any number. I usually increase if from 1, 2, 3.. and so on (version number to be precise).

Now, in my htaccess, I have something like

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^includes/style\.[\d]+\.css$ /includes/style.css [L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^includes/script\.[\d]+\.js$ /includes/script.js [L]

The above two conditions ensures that the actual file is used, no matter what number is used between the filename and the filetype.

This ensures that everytime you make a change, once you change the version number, all your old cache expires and all the users see the latest code.

sorry, but that is NOT the problem, all images contain a timestamp when they are created / changed / created in a new format, also do CSS and JS files due to there compression and renaming in the release process, the Problem I'm facing is what i described, a User changes content (the content stored in the db shown in a html page generated via php) after he made the changes / is redirected from the backend to the page on the frontend he doesn't see the changes unless he makes hard refresh of the page (and no, its not a Server Cache [memcached/apc] issue) — Hannes, Dec 13 '10 at 08:50

score 0 · Answer 3 · answered Dec 13 '10 at 14:20

Posting this comment after the reply from Hannes that the issue is based on content and not in js/css files..

I had this issue once, but couldn't nail down to understand what's the issue. I assumed that the reason could be that the HTML page is cached somewhere in the proxy server in between me and the browser.

So, what I did was generated urls with a query parameter called hash, which had something like md5(time("U"));

For example, the url which had the same problem was something like

http://test.com/controller/functionname/

After this issue, I changed so that all the urls the user clicks is something like

http://test.com/controller/functionname/?hash={something}.

I hope that works out for you. Also to be double sure, you could add in your web page.

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">

Apache Vhost Directives Optimized for Pagespeed

3 Answers3