Preloaders, cookies and race conditions
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.
Tests
Testing 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.
Conclusions
After 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.
Bottom line
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.
9 comments
Jason Grigsby, ☁4 — Wed, 28 Sep 2011 22:19:28 GMT
Scott can verify this, but I don’t think any of the existing demos or branches on GitHub have the right combination of what they are using on the Boston Globe.
The demo you point to is cookie-based, but uses url parameters. From what I understand from Scott, the Boston Globe is using cookies and data attributes. Scott had hoped to clean up the repository sometime soon so it was clearer which of the many experimentations they’ve done is the most promising direction.
Also, Scott had filed a bug against Firefox about cookies only to retract it later and say he had a bug in his code. Not sure of the state of what is on the site.
My plan for Part 2 of the blog series was to take a close look at what the Boston Globe site was doing as the best of the different experiments. I’m also trying to publish this week before Scott heads out of the country so I can validate what I find with what they’ve seen.
Robert Tobys — Wed, 28 Sep 2011 22:26:41 GMT
Thanks for taking the time to look into this further. It'll will be interesting to see how this issue pans out.
James Pearce — Thu, 29 Sep 2011 17:36:38 GMT
Keep it simple. Get the image automatically (or explicitly) resized before it even reaches the device. e.g. http://www.sencha.com/learn...
Jitendra Vyas — Fri, 11 Nov 2011 03:39:18 GMT
What do you think about this technique http://adaptive-images.com/