MaxCDN Blog

Updates & Insights on all Things CDN

WebFont Performance Review

web-font-perf-review It'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:
  1. Open Sans
  2. Oswald
  3. Roboto
  4. Droid Sans
  5. Lato
  6. Open Sans Condensed
  7. PT Sans
  8. Droid Serif
  9. Roboto Condensed
  10. Ubuntu
For testing, I created static HTML files with 1 Heading and 5 Paragraphs, which included the font as a resource. This barebones scenario lets us isolate the impact of the webfont alone, without overhead from server-side generation, images, javascript, and so on. 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

The Results

Here's the top 10 fonts and their Page Load Time (PLT):
Name PLT (Seconds) ms delay compared to Open Sans
Open Sans 0.542  -
Oswald 0.561  19
Roboto 0.559  17
Droid Sans 0.587  45
Lato 0.543  1
Open Sans Condensed 0.558  16
PT Sans 0.556  14
Droid Serif 0.605  63
Roboto Condensed 0.624  82
Ubuntu 0.641  99

maxcdn-webfont-performance

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. webfont-condensed-vs-reg
  • Droid Sans vs. Droid Serif: There wasn't a giant difference here, only 15 ms. droid-sans-serif
  • Fastest loading Sans: For fonts with matching Sans and Serif versions, the speediest were Open Sans, PT Sans, then Droid Sans. webfont-perf-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:

Google_Fonts-2

Real-World Examples

Using Meanpath, a code search tool, I searched for pages using a Google font ("https://fonts.googleapis.com/css?family=Open*").

Mercury Insurance, for example, had 5 variations of Open Sans:

meanpath_-_The_source_code_search_engine-4

I hopped over to the font builder to see the impact on page load:

Google_Fonts-2 2

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?).

Conclusion

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.

  • http://stackoverflow.com/users/425275/ime-vidas Šime Vidas

    Could you explain the “Extra ms” column? How did you measure it?

    • http://blog.justindorfman.com jdorfman

      @simevidas:disqus yes that was my fault for putting “0” ms, I have replaced it with a “-“. If it is still not clear, the measurement was taking the fastest loading font (Open Sans) and adding the ms delay after 0.542ms.

      • http://stackoverflow.com/users/425275/ime-vidas Šime Vidas

        I see. I assume this delays are in correlation with the font’s sizes, i.e. larger font files delay page load time more. Either that or Google provides better CDN service for more popular fonts, which would surprise me.

  • http://www.photoproseo.com/ PhotoProSEO.com

    I LOVE Font Awesome! That is all LOL

  • http://colunga.mx Julio Colunga

    Muy útil e interesante artículo.
    Regularmente uso Open Sans o Lato.

    • http://blog.justindorfman.com jdorfman

      Gracias. Sí a la mejor interpretación ‘Open Sans’ o ‘Lato’ es su mejor apuesta.

  • Sourav Kundu

    I always prefer using images rather than including a whole new (insanely heavy) font. But then you always have to deal responsive images. ;)

Categories

Brand New MaxCDN Tools

Compare the first and last byte speed of 2 websites in 5 seconds and more:

Start Testing