How a favicon could slow your web page down

When looking for things that delay a web page’s render start time, there are a number of usual suspects. Blocking scripts. Oversized CSS files. Possibly a big base64 encoded image at the top of the page.

We don’t normally think of favicons.

This may be because popular browsers such as Chrome give favicons the lowest possible priority, so they’re very often the last thing to load.

However, Firefox can load them early. And sometimes this can have an impact on render start time.

The connection view waterfall below shows an example. Here, the favicon ties up a connection ahead of a CSS file. The result? A later loading CSS file, which (potentially) means a later displaying web page.

faviconconnwfallextr

It turns out that this is nothing new. The bug has been raised – and indeed fixed – before. But it now appears to have resurfaced.

Fortunately, solving the problem should be relatively simple: just avoid serving the favicon from the same domain as the CSS. This way you can guarantee that the favicon won’t tie up the connection for the CSS file.

On many websites and for most visitors, this is unlikely to be a major issue. However, it could be if your favicon is poorly optimised (we’ve seen some astonishingly large file sizes).

For most people this won’t be the main bottleneck when it comes to performance. However, it is at least an interesting web performance gotcha to look out for.

Leave a Reply

Your email address will not be published. Required fields are marked *