Forum Moderators: phranque

Message Too Old, No Replies

Caching images,css and js using htaccess - Help plz

I did this still it is not working well

         

AjiNIMC

10:41 am on May 27, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi,

I did following

<FilesMatch "\.(ico¦pdf¦flv¦jpg¦jpeg¦png¦gif¦js¦css¦swf)$">
Header unset Last-Modified
Header unset Pragma
FileETag None
Header unset ETag
Header set Cache-Control "public,max-age=290304000"
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>

I was expecting that the 304 will also go away and the files will be cached directly with quering the server next time but this is the response I got.


HTTP/1.x 304 Not Modified
Date: Tue, 27 May 2008 10:25:50 GMT
Server: Apache/1.3.41 (Unix) mod_fastcgi/2.4.2 PHP/4.4.8 mod_log_bytes/1.2 mod_bwlimited/1.4 mod_auth_passthrough/1.8 FrontPage/5.0.2.2635 mod_ssl/2.8.31 OpenSSL/0.9.7a
Connection: close
Cache-Control: public,max-age=290304000

jdMorgan

1:13 pm on May 27, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



This isn't clear. Are you trying to make these image and css files un-cacheable or fully-cacheable?

Be aware that settings in the browser can "force" items to be reloaded from the server every time, so you cannot eliminate all reloads, just many of them. It's always good to bear in mind that on the Web, it is the client (customer, patron, boss) who makes requests, and the server (waiter, servant, worker) who provides what is requested. So it is the client that controls the connection, not the server. Using the customer/waiter analogy, the waiter can recommend that I try a dish in the restaurant, but that does not mean that I will order that dish...

Jim

AjiNIMC

1:35 pm on May 27, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi Jim,

Good to see you around. I want to make it fully cacheable. I want to try the max to make the images, css and js fully cacheable.

Thanks,
Aji

jdMorgan

3:24 pm on May 27, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



If you want cacheability, don't disable the Etag and Last-Modified Headers!

I'd suggest:


# Enable mod_expires
ExpiresActive on
# For media, css, pdf, and external Jscript files
<FilesMatch "\.(ico¦pdf¦flv¦jpe?g¦png¦gif¦js¦css¦swf)$">
# set 30-day cacheable (longer is almost useless)
ExpiresDefault A2592000
# Don't set any caching restrictions
Header unset Cache-Control
</FilesMatch>

One thing you can do when trying to figure out caching is to use a server headers checker to compare your server's response to that of 'big' sites where you can be sure what they're trying to do.

For example, look at the server response headers on the logo on Google's search page (they want it to be cached as long as possible). Then go to a site that uses a "tracking beacon" image (like a news site or a big e-commerce site), and look at the server response header on the tracking beacon (which you can be sure they want fetched from their server on every page load).

Jim

AjiNIMC

4:03 pm on May 27, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



No success :(

GET /crm/include/javascript/sugar_grp1.js?s=5.0.0e&c= HTTP/1.1
Accept: */*
Referer: http://***/crm/index.php?action=Login&module=Users
Accept-Language: en-us
Accept-Encoding: gzip, deflate
If-Modified-Since: Wed, 14 May 2008 10:06:24 GMT
If-None-Match: "f30a14-1c804-482ab9a0"
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
Host: **
Connection: Keep-Alive
Cookie: PHPSESSID=a31de6b6189462a6ae9a347fde14dbc3

Response

HTTP/1.1 304 Not Modified
Date: Tue, 27 May 2008 16:01:23 GMT
Server: Apache/1.3.41 (Unix) mod_fastcgi/2.4.2 PHP/4.4.8 mod_log_bytes/1.2 mod_bwlimited/1.4 mod_auth_passthrough/1.8 FrontPage/5.0.2.2635 mod_ssl/2.8.31 OpenSSL/0.9.7a
Connection: close
ETag: "f30a14-1c804-482ab9a0"
Expires: Thu, 26 Jun 2008 16:01:23 GMT
Cache-Control: max-age=2592000

[edited by: AjiNIMC at 4:05 pm (utc) on May 27, 2008]

jdMorgan

7:29 pm on May 27, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Did you flush your browser cache before testing? If not, the old cached images (and their headers) are still cached, and will control the transaction.

Also check your browser cache-control settings, and put them at default -- as most users will not have changed them.

Jim

AjiNIMC

2:48 am on May 28, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The pngs are getting cached but gifs are not. I did cleanup everything. I will give a check with other websites again with httpwatch.

Thanks,
Aji

AjiNIMC

2:55 am on May 28, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Yahoo's image that is getting cached:

Request

GET /a/i/ww/sp/arrow.gif HTTP/1.1
Accept: */*
Accept-Language: en-us
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
Host: l.yimg.com
Connection: Keep-Alive

Response
HTTP/1.1 200 OK
Date: Sat, 27 Oct 2007 15:29:33 GMT
Cache-Control: max-age=315360000
Expires: Tue, 24 Oct 2017 15:29:33 GMT
Last-Modified: Tue, 25 Sep 2007 01:23:50 GMT
Accept-Ranges: bytes
Content-Length: 67
Content-Type: image/gif
Age: 18444004
Connection: keep-alive
Server: YTS/1.16.0

My server
Request

GET /crm/include/images/sugar_md.png HTTP/1.1
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, application/x-shockwave-flash, */*
Accept-Language: en-us
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
Host: dal.example.com
Connection: Keep-Alive

Response

HTTP/1.1 200 OK
Date: Wed, 28 May 2008 02:50:45 GMT
Server: Apache/1.3.41 (Unix) mod_fastcgi/2.4.2 PHP/4.4.8 mod_log_bytes/1.2 mod_bwlimited/1.4 mod_auth_passthrough/1.8 FrontPage/5.0.2.2635 mod_ssl/2.8.31 OpenSSL/0.9.7a
Cache-Control: max-age=2592000
Expires: Fri, 27 Jun 2008 02:50:45 GMT
Last-Modified: Wed, 14 May 2008 10:02:15 GMT
ETag: "f3057f-879-482ab8a7"
Accept-Ranges: bytes
Content-Length: 2169
Connection: close
Content-Type: image/png

Yahoo's this image is cached but mine is not.

Aji

[edited by: AjiNIMC at 2:57 am (utc) on May 28, 2008]

[edited by: jdMorgan at 12:32 pm (utc) on May 28, 2008]
[edit reason] example.com [/edit]

jdMorgan

12:46 pm on May 28, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Did you use the same browser? -- I note that the "Accept" header is different between the two requests, and that the time is also quite different.

Disregarding all the server response headers that are comparable (and shouldn't affect the results), we get:

Yahoo Response
Content-Type: image/gif
Connection: keep-alive
Age: 18444004

Your Response
Content-Type: image/png
Connection: close
ETag: "f3057f-879-482ab8a7"

However, none of these should make any difference. That leads me to think that this may be a client-side behavior. You might try testing using a GIF instead of a PNG file on your own server, just to eliminate that difference.

Jim

AjiNIMC

12:52 pm on Jun 6, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



hi Jim,

Sorry, I just got busy with some more work, thanks for your help. As always, you rock.

I see that it is caching it but I need to debug it further.

Regards,
Aji