Responsive Images and cookies
Jason Grigsby wrote a great post summarizing different approaches to responsive images and what sucks about them. Among other things, he discussed the problem of getting the first page load right. After a short discussion with him on Twitter, I decided to take a deeper look into the Filament group's cookie based method.
TestsTesting their demo site using Firefox showed that the first browse brings in the smaller "mobile" image. The same test on Chrome downloaded the larger image. I became intrigued.
From their source code, I saw that they are using an external script that modifies the page's domain cookies. From sniffing on my traffic to the demo site, I saw that on Firefox, the image's request was sent without cookies before the external script finished downloading.
ConclusionsAfter a short research and some asking-around I came up with:
- Chrome's preloader blocks image download until all <head> scripts and stylesheets were downloaded for performance reasons.
- Firefox's preloader does not block for external scripts by design. It does block for inlined scripts though.
- Running this test in IE9 shows that its preloader does not block for neither external nor inlined scripts.
It seems that preloader behavior of each browser is focused on performance rather than sending cookies that may have been set using scripts. Inlined scripts currently block preloading in both Firefox and Chrome, but not on IE9.
Different browsers act differently with regard to which resources they download before/after the <head> scripts are done loading and running. Furthermore, that behavior is not defined in any spec, and may change with every new release. We cannot and should not count on it.