Forum Moderators: phranque
We've. been looking at Steve Soulders' excellent book, "High Performance Web Sites", and have been working through many of the examples. However, I've come across an issue that I've not seen described elsewhere, and I'm hoping someone here may have an answer
The behaviour seems to occur primarily in IE, namely IE6 and IE7.
The .htaccess file is set to the following:
<FilesMatch "\.(gif¦jpg¦png¦ico¦js¦css)$">
ExpiresActive On
ExpiresDefault "access plus 10 years"
</FilesMatch>
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript application/javascript
Header set Vary "Accept-Encoding"
Header append Vary "User-Agent"
Header append Cache-Control "private"
The first issue is that, despite the fact that I've set the far future expires header, IE still insists on sending a 304 check every page to see if my .png sprite file has changed. This behaviour does not occur in Firefox.
The request header is:
GET /template/bwsprite.png HTTP/1.1
Accept: */*
Referer: http://www.mydomain.com
Accept-Language: en-gb
UA-CPU: x86
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; InfoPath.2)
Connection: Keep-Alive
Host: www.mydomain.com
The headers sent back to IE for this particular file (on first load) are as follows:
HTTP/1.1 200 OK
Date: Mon, 26 Jan 2009 11:02:25 GMT
Server: Apache/2.2.8 (Unix)
Vary: Accept-Encoding,User-Agent
Last-Modified: Thu, 22 Jan 2009 15:11:50 GMT
ETag: "a007e-72b8-46113b1141980"
Accept-Ranges: bytes
Content-Length: 29368
Cache-Control: max-age=315360000, private
Expires: Thu, 24 Jan 2019 11:02:25 GMT
Connection: close
Content-Type: image/png
I cannot see any particular reason why IE should ignore the headers for this file (especially since the same caching mechanism is being used for JavaScript, CSS, gif, and other png files).
The second bit of weirdness is that, whenever I turn ETags off (using the "FileETag none" directive in the htaccess file) as recommended by the book (and elsewhere), it causes IE to reload every single image, and completely ignores any Caching at all.
The initial request header for an image file is:
GET /template/bwsprite.png HTTP/1.1
Accept: */*
Referer: http://www.mydomain.com/
Accept-Language: en-gb
UA-CPU: x86
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; InfoPath.2)
Connection: Keep-Alive
Host: www.mydomain.com
An example header sent back for the same file when ETags is turned off is as follows:
HTTP/1.1 200 OK
Date: Mon, 26 Jan 2009 11:07:53 GMT
Server: Apache/2.2.8 (Unix)
Vary: Accept-Encoding,User-Agent
Last-Modified: Thu, 22 Jan 2009 15:11:50 GMT
Accept-Ranges: bytes
Content-Length: 29368
Cache-Control: max-age=315360000, private
Expires: Thu, 24 Jan 2019 11:07:53 GMT
Connection: close
Content-Type: image/png
I've been using Fiddler to monitor the HTTP requests, files and headers, and as far as Fiddler is concerned, it's telling me that all the image files have not been cached: "This URL is not present in the WinINET cache."
Any help appreciated.
The issue relies in the fact that IE does not handle the Vary header correctly.
Removing the Vary header for IE in the htaccess file with
BrowserMatch "MSIE" force-no-varySince Cache-Control private will disable all proxy caching, removing the Vary header shouldn't cause content issues (in terms of serving gzipped content to browsers that can't handle gzipped content).
High Performance Web Sites
[...]
.htaccess file
Just curious... does the book really recommend the use of .htaccess files for "High Performance Web Sites"?
The core areas the book focuses on are things like caching, reducing HTTP requests to the server ... you can get an overview here: [developer.yahoo.com...]
