WebFont Performance Review
December 10th, 2013
After reading Ilya Grigorik’s post on improving webfont latency in the Chromium project, I was inspired to measure it myself. I wanted to compare the top 10 Web Fonts on Google’s CDN and see how performance varied. Would there be a noticeable impact from choosing one over the other?
Let’s find out. First, I got the 10 most popular Google Web fonts:
- Open Sans
- Droid Sans
- Open Sans Condensed
- PT Sans
- Droid Serif
- Roboto Condensed
Using WebPageTest, I ran tests with the following settings:
- Test Location: Los Angeles
- Browser: Chrome
- Connection: DSL (1.5 MBps)
- Number of Tests: 9
- View: First View Only
Here’s the top 10 fonts and their Page Load Time (PLT):
|Name||PLT (Seconds)||ms delay compared to Open Sans|
|Open Sans Condensed||0.558||16|
In general, every page load was around 550-650 ms — pretty zippy. However, the slowest font added a ~100ms delay compared to the fastest entry (Open Sans), and was about 20% slower overall. For e-commerce and mobile sites, 100ms can make a large difference in responsiveness. (When measuring, there are likely to be network jitter issues; averaging 9 runs helps smooth this out and show a general ordering).
Here at MaxCDN, we’re heavy users of Open Sans, and it’s nice to see it performed the best.
We tried a few more comparisons for fun:
- Regular vs. Condensed Fonts: Don’t let the name fool you — condensed refers to the font style, not its transmission format. The regular fonts had an edge against the condensed variants, from 20-50ms.
- Droid Sans vs. Droid Serif: There wasn’t a giant difference here, only 15 ms.
- Fastest loading Sans: For fonts with matching Sans and Serif versions, the speediest were Open Sans, PT Sans, then Droid Sans.
If you’ve made it this far, you might be wondering what the big deal is. After all, the average page load time was only 580ms!
It’s true that a single font probably won’t slow down your site. But the more you add, the longer the page takes to load. And most critically, fonts determine how the text content (80% of your page) will look!
100ms here, 50ms there, and suddenly you have a noticeable gap in load time. You need to ask “Do I really need that webfont?” before including it. If a font is only used once in a logo, for example, it may be faster to use a quick-loading image instead.
Google has a really smart experience – when picking a font, it gauges the impact on your site load time:
Mercury Insurance, for example, had 5 variations of Open Sans:
I hopped over to the font builder to see the impact on page load:
Google’s page impact went from 15 to 75 as the new variations were added. Check to make sure every variation is truly necessary (i.e., are semi-bold and bold different enough to justify the extra performance cost?).
Webfonts are awesome, and give designers great style choices beyond the OS and Browser defaults. But when choosing a webfont and tweaking your look & feel, keep performance in mind. It’s hard to top the beauty of a fast loading site.