Icon fonts have been around for a bit now, so most people are aware of the convenience benefits of being able to scale and style icons with a few lines of css. However not much has been said of their impact on website performance.
Now, I know from using tools like curl and apache bench that our homepage serves at around the 200-300ms mark, so I was surprised to learn from Joyce, our resident google analytics guru, that some users had experienced page load speeds of up to 4 seconds. Not so surprising when you remember that the speed at which html is returned is only part of the story. External images, css and scripts need to load, render and execute before a page is done loading, and it doesn’t take much of those to turn a page fired from even the speediest server into a bloated bandwidth hog.
Updating pictonic with an icon font took a couple of hours, but its impact was pretty spectacular. It enabled us to replace several images (including a 650kb sprite) with a 11kb font which was retina ready, pixel perfect at every scale and styleable with css. Shortly after, our yslow score jumped from 82 from 88, our google page speed score went from 90 to 96 and our total page size is less than half of what it was.
Impact of using an icon font on pictonic.co
How can this be?!
For those of you who don’t know about vector formats, they basically allow you to express graphics in terms of scale independent things like paths and shapes. For example, take the problem of describing a triangle so that it can be rendered on screen. One strategy is to provide a square full of pixel data with some coloured differently to mark out the shape.
How images store data
This is generally how images are stored and communicated. The problem with this is that the number of pixels that need to be stored and communicated quadruples as the canvas size increases.
Number of pixels increasing quadratically as canvas size increases
In contrast, all that’s required to express a triangle in vector form is three points to be filled http://codepen.io/alanclarke/pen/fhdCc. Aside from being more concise, vectors scale effortlessly since the concept of a triangle is the same whether it’s 6px wide or 600px wide. So unlike a normal image file, a vector’s file size remains constant even as the size of the shapes it describes increase.
A triangle expressed in vector form
This goes some way towards explaining how a 11kb font can replace a 650kb image sprite. But we know you folks like data so here’s a quick breakdown:
A typical icon pack downloaded from pictonic might contain around 25 icons. For the sake of argument lets assume that you only need them in black. 64px x 64px is a good versatile size. You’ll probably also want a double resolution version for retina display media queries. That will take you to about 134kb, which is about 42% of the size of an average webpage (320kb).
A .ttf font containing the same icons takes up just 9kb!
er… what?!!! Yes, i’ll say it again. JUST 9kb!
To give you an idea of how that might be impacting your website speed, consider the following. As previously stated, the average size of a webpage is 320kb. Also, according to the resident geeks at google analytics, the average page load is about 7 seconds (for mobile it’s even lower). This means that on average, clients load pages at roughly 45kb per second.
So… does this mean that your image sprite could be costing you an extra 2.3 seconds in page loading speed!? Well its probably not that much, averages are always dragged down by extremities and in practice people would keep their normal res and retina images separate, but even with just the normal res images (55kb in total) your total filesize will be reduced by a factor of 5 by using a font, saving about a second in loading time according to my quick and dirty calculation with google’s metrics. On our site, we saved loads more than this (about 639kb) as we are an icon heavy site and have them in different colors and sizes.
Now before the fury of the internet is unleashed on me for making such a sensational statement, let me just say that I’m fully aware that these are pretty rough guesstimates. But hopefully you’ll at least agree that there’s enough here to add another dimension to the conversation about icon fonts.
What has been your experience with icon font performance
Generate icon fonts from probably the largest premium vector icon set on the web, with over 2000 beautiful vector icons and over 130 free icons. Try now at https://pictonic.co!