WebFont Performance ReviewIt's no secret that Web Fonts have become extremely popular. Sure, I may be biased because I'm responsible for hosting Font Awesome on Bootstrap CDN -- but Web Fonts are here to stay. 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
- Test Location: Los Angeles
- Browser: Chrome
- Connection: DSL (1.5 MBps)
- Number of Tests: 9
- View: First View Only
The ResultsHere'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.
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.