QUESTIONS?

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):

NamePLT (Seconds)ms delay compared to Open Sans
Open Sans0.542 -
Oswald0.561 19
Roboto0.559 17
Droid Sans0.587 45
Lato0.543 1
Open Sans Condensed0.558 16
PT Sans0.556 14
Droid Serif0.605 63
Roboto Condensed0.624 82
Ubuntu0.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. ;)

Increase Your Website Speed

If You Use Under 15TB/month MaxCDN is for You. It Has:

  • High Performance
  • Easy to Use Control Panel
  • Easy to Setup
  • Low Monthly Fee
LEARN MORE

Recent Posts

  • Behind The Scenes: tools.maxcdn.com
  • MaxCDN Update on CVE-2014-0160 aka Heartbleed
  • Now Shipping: tools.maxcdn.com
  • Now Shipping: Recipes for EdgeRules
  • Custom Charts from the MaxCDN API

Compare the speed of two websites in 5 seconds.

100% Free

Start Testing
TRUSTED BY