http headers for faster image loading? - http

I need to load almost 100's of images in a single page on my website. ( product image, lots of them ). Whenever image change for product, url for that image also changes. i.e. for one url corresponding iamge never changes. Now I want to make sure that for a same person browsing through website, the image must not load again.
Is expire header is good enough ? ( sometime the browser still try to load it when refreshed manually )
on server side my python script always return 304 when if modified since header available without checking its value as each image has unique url. It normally works good but sometime when images are partially loaded and user move to another page, user see half downloaded images next time he land on the same page as server return 304. so how reliable if modified since header is ? and what are other alternative ?
Thanks.
edit 2:
what should be the content length for 304 response ? should it be the original content or actual content ( i.e. 0 ) ??

When you reload manually, most browsers disregard the caching headers, so this is normal and expected behavior.
The Expire header should be sufficient for this purpose.
As for the partial load, it can happen that the TCP connection gets broken while the image is loading; if you didn't specify Content-Length when sending the image, some browsers may assume that the connection was closed because all the data were sent. If Content-Length (a.k.a. image size in bytes) is specified, the browser should note when it doesn't have the complete image and will re-download it unconditionally the next time.
When sending the 304 Not Modified, it's not necessary to send Content-Length.

Related

ASP.NET - Serving dynamic images from a single URL

I am trying to use different background images from session to session. So if users open my website in a different session(e.g. Close and reopen the browser or wait for half an hour), they will see a different background image.
Following is what I am currently doing.
I created a HttpHandler class that handles background.axd.
First it checks whether there is an entry called BackgroundIndex in the HttpContext.Current.Session, if not, it randomly chooses a image from the ones that I have, than stores its index into the Session object.
Then it compares the index with the value of the If-None-Match header, if they match, simply return a response with 304 Not Modified.
If not match, or there isn't a 'If-None-Match' header in the request, it writes the content of the image file to the response and return it with ETag header set to the index of the image.
At last, I set the background image of my website to background.axd in my CSS file.
The problem is, it works correctly, but not efficiently.
The image file for current session can be loaded from cache. But if the session changes, the browser will have to download the image from my server even if it has been downloaded before.
Also, the browser has to make additional request to check if the image in cache has been out of date.
Is there a better solution for this?
Sorry for my bad English.

Cross Tab Browser Caching, Forcing Refresh

I have a JSON resource, let's call it /game/1, which is being publicly cached with a long duration. Based on some client-side logic, I want to occasionally want to refresh this resource (for instance, when I know something should be happening server-side - a game ending, in my case).
Once refreshed, I would like all downstream caches to update with the new content, so any requests to /game/1 will fetch the refreshed content. Appending a querystring with a random parameter won't work in this case.
I have tried adding the following headers on the request, which seems to work in a temperamental fashion in browsers other than IE:
headers['Cache-Control'] = 'max-age=0, no-cache';
headers['Pragma'] = 'no-cache';
Using these headers, Chrome seems to sometimes refresh the content, presumably based on some internal heuristics.
Does anyone have any better ideeas for what I'm trying to achieve?
Try setting meta http-equiv="expires" content to zero.
Setting the 'expires' metatag to zero should force the browser to reload everything on each page visit. Forcing constant cache deletion will obviously slow down page loading (if all browsers obey it!) but maybe that's an acceptable trade-off. This won't help with downstream caches however, so it's far from a complete solution.

Send no content, HTTP header

Is there a HTTP header that makes sure that no content will be displayed?
Even if there is some content in the body?
edit:
I take the answers as a "no", and accept the fact that headers have no control over the content.
Send the status code 204 No Content.
Is there a HTTP header that makes sure that no content will be displayed?
The best way to make sure no content is displayed is not sending any content - you can never trust the client 100% to do what you want. That said, there is a status code that specifies exactly what you want:
10.2.5 204 No Content
The server has fulfilled the request but does not need to return an entity-body, and might want to return updated metainformation. The response MAY include new or updated metainformation in the form of entity-headers, which if present SHOULD be associated with the requested variant.
If the client is a user agent, it SHOULD NOT change its document view from that which caused the request to be sent. This response is primarily intended to allow input for actions to take place without causing a change to the user agent's active document view, although any new or updated metainformation SHOULD be applied to the document currently in the user agent's active view.
The 204 response MUST NOT include a message-body, and thus is always terminated by the first empty line after the header fields.

http cookies and embedded images

I'm setting a cookie during http GET request of the .html pages with embedded images. I'm expecting the browser to return the cookies when getting all the embedded images, but apparently it does not happen for the first embedded image.
Is this how it's supposed to work or am I missing something ?
Make sure the domain name matches your domain and that you've set a valid expiration date/time for it. These are the 2 most common mistakes.
It would help if we knew how you were setting the cookies. Note that NRNR's response is a bit misleading - he/she's right about the domain, but there's no requirement to set an expiration. However you will get varying results unless you explicitly set a path too - even if it's just '/'.
Browsers do vary a lot in how they handle all sorts of things, including cookies - so I wouldn't be too surprised if there are browsers out there which start retrieving additional content before the response headers for the referencing html page are processed. This is not how its supposed to work though.
C.

How to control CSS cache?

I asked a question on what is style.css?ver=1 tag?. I learned that developers use style.css?ver=1 to let browsers read updated css, but W.Craig Trader pointed out that is is not good.
My question is, what is the best way to force a browser to read updated css without style.css?Ver=1 format?
Your server should take care of it. It will tell the browser when the file was last modified, and if the browser's cache is out of date, it will download the new version.
More in depth, each time the page loads, the browser does a head request on each item in the page (stylesheets, images..), which the webserver responds to by only sending the HTTP headers without the body, there is a header that specifies when the file was last modified (and possibly more about cache control), and if the browser's cache has a version of the file older than what the webserver says it has, it reloads that content.
An option is to version the filename, like style-1.1.css.

Resources