Web Performance Tip: Make Sure You Have a FavIcon
Last Updated -
Everyone is looking for easy ways to improve their site's load times.
There is a simple way you can upgrade your load times while reducing your server load before you go home today.
And in today's post (and video) I am going to show you what this simple tip is. Its so simple you are going to slap your forehead if you have missed it.
A few years ago I was reviewing a case study with some co-workers about Instagram's start and how they learned to scale. You would think a super successful company like Instagram would have a perfect startup story.
You would be wrong.
They got 25,000 new members the first day! Who wouldn't want that?
There servers simply crumbled. And the problem was so simple, but not obvious.
25,000 in a day sounds overwhelming, but honestly it's not. The bottle neck would not be the server, but enough bandwidth. But they had a server problem.
Not so much a server problem, but a site issue.
You see they were not engineers, they really had no idea what they were doing. They forgot something simple, the favicon.
What is a FavIcon?
A favicon is the little icon file browsers automatically request each time a user opens your site.
Most content management systems, like Wordpress include a default favicon. As I review sites around the Internet I see default favicons everywhere.
Not only is the favicon important for your site's performance it is an opportunity to spread your brand.
The favicon is an image, either 16x16 or 32x32. It can be an icon file (.ico), PNG or Gif. It was originally introduced in 1999 when Microsoft released Internet Explorer 5.
It was created as a way to allow websites to extend their brand visibility in the browser address bar.
Since then all browsers have adopted the favicon as a standard. In fact it is an official HTML5 standard.
You reference the favicon in your page's HEAD using a LINK element.
<link href="favicon.ico" rel="shortcut icon">The link element's href should point to your favicon file and use the rel="shortcut icon" value.
The best idea is to create an image with your brand's logo of 32x32 pixels. You can also use larger images. You may even want it to part of your progressive web application home screen icon array.
But how can this small image bring your web server to its knees?
Why a Forgotten FavIcon Can Ruin Your Site's Page Load Time
The lesson of the missing favicon is one about missing files.
Every time you include a reference to a non-existent resource, image, css, JavaScript, etc, you are causing the server to return a 404. This means it has to process the request by checking to see if the file is exists. If the file is not present a 404 status is returned.
The problem is the server must hit the hard disk to find the file. Each time this happens the server load increases more than if the file is found.
Wouldn't the load on the server be more if the file was found?
No...
When a file is found on the hard drive a properly configured server will cache the file in memory. This means the next time the file is requested it comes out of memory.
Disk access or I/O is a very expensive process. A server can have hundreds of files being requested at the same time, creating many I/O processes.
The favicon is requested everytime a page is requested. If the file is cached the disk is not needed.
Files can be cached in the server's memory, which eliminates the need to hit the server's hard drive. You should also add a Cache-Control header with a long time to live so the browser's cache will retain a local copy of the file. This means your web server will not recieve the request.
When Instagram launched without a favicon the requests brought their server to its needs. Their hard drive could not handle the load.
All the requests caused the drive to enter a state we call 'thrashing'. It was simply overloaded by the favicon requests all other requests were not able to be processed.
The moral of the story is more than make sure you have a favicon. Make sure you have testing in place to ensure your site deployments include an automated test to ensure everything is properly deployed.
I like the way Mike Krieger put it:
most of your initial scaling problems won't be glamorous
Summary
Make sure you have a favicon, but also make sure you have no not found resources on your site. Have an automated tool to make sure your site is properly deployed.