caching images and css files

SergeAluker

Hi folks,
I created a rather large-scale database-driven web app that uses custom session control. Every single page of the app has the same cascading style sheet in a seperate file (3.7kb) and an image file (42kb). Since all the pages are dynamic, these two files are downloaded in every page of the app. These 46kb of extra data that are transmitted are quite a hinderance to 56kbs users.

My question is: Is there a way for these two files to be cached on the client side so they only have to be downloaded once?

(The actual php file sent is almost always under 3kb, so if the two files could be cached, the average page would load 17x faster for slow users).

THANKS

jpmoriarty

i think you'll find that most users have some sort of caching going on anyway - certainly IE cache's a lot of it's stuff, particularly images. If the image link stays the same on each page (ie to www.domain.com/image.jpg) then it will be cached the first time it's loaded - the browser just interprets the HTML, so it doesnt know that the link to the image is generated dynamically, and therefore will cache the image regardless. So after one visit, most users will have the image in their cache and it wont be requested from your site again.

I dont think there's a way to "force it" if it's not set though - most users still like the option of changing the way their systems set up, without being told to have it done a certain way by the server 🙂

SergeAluker

The problem is that the automatic browser caching does not work with any of the objects in my scripts... (js/css/jpg). When I point my browser to the image itself, and then re-enter the URL, the image is read from the cache. However, when I visit the dynamically-generated site, and then enter the URL again, all of the objects are downloaded again. Is there a way to work around this? I have noticed this problem on all browsers I have tried it on, and all platforms. Every time I load a page with the EXACT same objects (same jpg/css/js fiels), all objects are downloaded. Any ideas?

step

Originally posted by SergeAluker
The problem is that the automatic browser caching does not work with any of the objects in my scripts... (js/css/jpg). When I point my browser to the image itself, and then re-enter the URL, the image is read from the cache. However, when I visit the dynamically-generated site, and then enter the URL again, all of the objects are downloaded again. Is there a way to work around this? I have noticed this problem on all browsers I have tried it on, and all platforms. Every time I load a page with the EXACT same objects (same jpg/css/js fiels), all objects are downloaded. Any ideas?

Maybe a needless question - but did you specify the full path to that image? Depending on your script that might make a difference. (but as I said..probably you already tried this)

SergeAluker

I actually had not tried it, but I did, and no luck! Any other ideas?

zalath

Having struggled (and still struggling to some extent) with the same issues, I can give a few pointers:

first, visit http://www.web-caching.com/ they have a lot of useful info.

second, make sure the link to the files remains the same throughout the pages, as it's the only way to ensure the browser will know it's the same file.

Hope that helps.

jayc

I am fairly sure that IE caches CSS. Go to your site, make a color change that will appear, and continue browsing. It probably won't change until you hit "refresh".

SergeAluker

jayc, that is a negative. I tried the css trick, and even though I pressed the back button, none of the assets were cached (2 js files, 2 css files, and an image). The paths are the same every time. Is this because it is a dynamic page? All content is pulled from a MySQL database.

zalath, I have been to that site and have explored it in depth. No luck. Have I run into some new and unexplored problem? I severely doubt it.

Anyone have any other ideas? Can I control the caching of the assets somehow by putting them in php containers with unlimited expiration headers? (like putting the css in a php file with a text/css header)... I doubt it will work, but has anyone experimented with this?

netzkind

SergeAluker:

I've seen the same behaviour on our apache 1.3.idontknow server and it nearly drove me crazy (nearly?!).

Well, anyways, changing all those headers didn't do it for me.
And then i took a glance at our mod_gzip (latest version, if someone cares) and this dirty little bastard was the cause for all of this.
I did have access to my httpd.conf and so i added the following:

mod_gzip_item_exclude mime ^image/
mod_gzip_item_exclude file \.css$

And now, IE is happily caching all the files needed and it makes me happy and smile and whatever 😉

You could try doing the same, if you have access to you httpd.conf
If you don't, you would have to put these lines into an .htaccess residing in the same or an upper directory as/than the images you don't want to be cached. For me, this didn't work and apache kept complaining about "mod_gzip_item_exclude not allowed in xx/.htaccess"

I don't know if this works for. Heck, i even don't know whether your server uses mod_gzip. A way to figure this out is:
telnet yourserver at port 80
type in "GET / HTTP/1.1[return]"
type in "Host: YOURHOSTNAME[return][return]"

Most commonly, your server will respond with its full version string. If this contains "mod_gzip", you might have found the cause. There might be better ways to figure this out, but here it's 2 o'clock in the morning and i quite frankly am a little tired 😉