Image Prefetch Test
In the excellent performance article Front-end performance for web designers and front-end developers, Harry Roberts touches on image prefetching. He also mentions it may or may not work; citing the two opposing articles.
Out of curiosity, I threw together a quick test to see if I could prefetch an image using the following method:
<link rel="prefetch" href="image-name.jpg">It’s typically a bad practice to specify background-image on :hover without a sprite. However, in this case it’s perfect for testing whether an image was prefetch’d or not.
At the time of this writing, using the prefetch technique above, the image was not pre-loaded in Firefox 18.0, Chrome 24.0 or Internet Explorer 10.0.
Update: Firefox is the only browser I tested which did pre-load the image. I believe I was hovering the boxes too close to page load on my initial test. After seeing the waterfall posted below I tried again, clearing cache in all the browsers, loading the page and waiting a bit longer before hovering. Regardless, this method probably isn’t ready for the masses until there is better browser support.
Andy Davies
The crucial statement from the Performance Advent post is this:
“In many cases, though, the site developer knows when an image will be needed that won’t be detected early by the browser, such as an image loaded from an ajax request or other user action on the page”
If the resource is referenced on the page or in CSS, then the look ahead pre-parser will pick it up pretty quickly and schedule it for download.
Some browsers prioritise certain resource types over others e.g. try to download css and js first regardless of where they are referenced on the page, Chrome already does something similar to this and there’s a patch around for Firefox too.
The theory behind this is that css and js are likely to have the biggest impact on when rendering will start so it makes more sense to download them before images.
Here’s a waterfall that shows the test above with the image being pre-fetched – http://www.webpagetest.org/result/130123_24_de659baab5bd3fbfde642abec7dd9bf0/1/details/
As rel=”prefetch” is just a hint (so browsers are free to prioritise how they want) it doesn’t surprise me the images it references aren’t fetched until the page is idle.
I can understand why there’s confusion when rel=”prefetch” for DNS is prioritised thou!
Jeremy Church
Very interesting. Based on that waterfall, it looks like the image was loaded, though it certainly doesn’t feel that way in the browser.
Agreed, there seems to be confusion around what image prefetch does or doesn’t do.
From a front-end dev perspective, I think it’s safe to say prefetch does not accomplish the desired effect of pre-loading an image.
Christoph
(https://developers.google.com/chrome/whitepapers/prerender) Shouldn’t you try “prefetch” for Firefox and “prerender” for Chrome?
Jeremy Church
Thanks for pointing this out; first I’ve heard of it. I won’t hold my breath, but hopefully there’s one standardized tag at some point.
Eric Hynds
I opened up Charles to see if I could see my sprite being downloaded earlier using prefetching, and noticed that Chrome actually causes it to be downloaded twice. Firefox doesn’t have this issue.