But how much speed, exactly? In this age of quantify-everything, we have the tools available to get at least a decent approximation of what kind of impact third party scripts have on page load times. So read on to see how we can employ some real user monitoring (RUM) to tell us how long Typekit is taking to load for real users.
Implementing Typekit is as simple as any third party script, but there are two major concerns with how it loads Web fonts.
In this case, the blocking is very much intentional: It ensures that your fonts are downloaded and ready before any text on the page appears.
You actually can load the Typekit script in an asynchronous manner, but that will introduce the problem of FOUT. Dealing with FOUT is beyond the scope of this article, though Typekit provides some ways to deal with it.
The actual font files Typekit needs can also be a large download. Depending on the character sets you want to support and the font variants you’ll need — regular, bold, italic — you can easily end up with a font package adding up to 200k or more.
In some browsers, Typekit halts your page load while the entire download completes. Depending on your On a 3G connection, 200k might take 3-4 seconds to download, during which a user will see nothing but a blank page. And this will be on top of any other assets you’re already loading and/or executing.
So really, the overall concern is blocking time, i.e. how long users are looking at a blank page before something loads. How do we measure this? By tapping in to Typekit’s font events, and recording timings with Google Analytics.
The Typekit script itself: Measure the initial script load and execution time.
Typekit’s font events (loading, active, inactive): Measure how long it takes for Typekit to load the actual fonts.
The inactive callback fires when Typekit takes longer than five seconds to load. We especially want to record a timing for this, and give it a custom label so that we can easily segment this data in Analytics.
The inactive callback is a little misleading. Its use is intended for cases when you want to run some code when your Typekit fonts don’t load after five seconds. Under slow network conditions, however, some interesting things happen.
The font package will continue to download.
In Chrome, Safari and IE, the page load will block until the fonts package is completely downloaded. The Typekit fonts will still be loaded.
In Firefox, the page will stop blocking after five seconds, but you will get FOUT when Typekit fonts finally download. Typkekit fonts will still be loaded.
So inactive is not much of a guarantee of anything, other than it took longer than five seconds to load your fonts.
At its core, the timer code is very simple. I’ve applied some of my own style in this example, so it’s a little fatter than it could be.
// Try to use the performance API if the browser supports it.
// an optional label argument for use in Analytics.
startTiming simply records a start time in milliseconds. endTiming does some math and then uses the handy _userTiming in Google Analytics to record the time taken for the given load event. Let the data collection begin.
Great, so now we’re collecting timing data in Google Analytics. The last step is to make some sense of it. Look for the Typekit timings under Content > Site Speed > User Timings.
Cool. So now we have the data we need to make some informed decisions about our Web fonts. Here we have the average timing for the script load as well as the fonts. Clearly, the load time is significantly higher while the Typekit font package is downloading.
Breaking down our data by operating system gives us some interesting info.
There are many other ways to use this data in Analytics that I’ll leave to you to explore.
The best application of this code might be as part of a multivariate test or similar scenario, where you’re evaluating the impact of Typekit Web fonts on your site or application in a limited fashion.
So now you can get started with measuring Typekit’s impact on the user experience! And hey, why stop there? You can easily extrapolate this method to add user timings to just about any script on your page.