Favicons and Performance Issues

March 31, 2015Category: WebTags: , ,

As part of my quest for speed, I check my website every couple days with WebPageTest or Pingdom. My focus over the past few days, now that I’m up to a 99/100 on Google’s PageSpeed test, is to reduce the number of small requests. As such, I’ve been paying special attention to the page load waterfall, which shows breaks down the way your webpage loads in a graphic chart.

This is the WebPageTest waterfall for my website’s homepage at http://www.andymercer.net/, as of today, March 31st, 2015:

favicons1

Source

I’ve circled in red something which jumped out at me. The test browser, Firefox, is downloading six different versions of my favicon. Obviously I don’t want to waste bandwidth, so I started testing in other browsers to see if the problem is universal.

I checked the waterfalls from the built-in developer tools in Chrome and Firefox. Much to my surprise, they both show the same thing, which is nothing. According to both browsers, no favicon files at all are being downloaded.

favicons2 favicons3

This is naturally confusing to me. So I went to my other typical test site, Pingdom, and looked there. It ends up matching the browser tools, showing no favicon files being downloaded. However, both Chrome and Firefox displayed the correct favicon in the tab title. This means that one of two things is happening. Either the dev tools are hiding the favicon downloads, or WebSiteTest.org is just really screwed up. Unfortunately, I’m not sure which is happening.


If we assume that the files really are being downloaded, then we have a problem. That is six different requests, for what ends up being the same thing. Only one of them gets used. But according to the experts, we can’t just use one. We need all of the different variants. At this point, I’m inclined to just let it be. I might ask about it on StackOverflow, but given my last three questions are so far unanswered, I’ve somewhat lost faith in that mode of help.