I’ve used fonts from Cloud.typography for about two years now. I love Hoefler & Co.’s family of typefaces—this site uses Whitney. But the problem has always been the performance hog these fonts are to serve.
Table of Contents
On most days, it doesn’t bother me much because of my high internet speed. That’s a very privileged way of thinking, so it was time to fix things. I don’t run any analytics here, so I’m not sure how many people visit this site on a slow connection. Really, it doesn’t matter. Any one of us can have a slow connection at a moments notice.
async attribute. Also, they don’t seem to let you truly self-host unless you have a crazy amount of pageviews.
After some digging, I found loadCSS, a polyfill from Filament Group to asynchronously load CSS. Perfect! That’s exactly what I needed to do.
How to Implement
We’ll do the following:
- Include loadCSS in our project.
- Include the Cloud.typography stylesheet in the recommended way
Adding the Polyfill to Our Project
First, you need loadCSS. There a few different ways of including it, but I personally added it to the asset pipeline.
//= require ./vendor/loadCSS.min //= require ./vendor/cssrelpreload.min
Include the Cloud.typography Stylesheet
Next we’ll use the markup that the loadCSS README suggests. Unfortunately, we need this polyfill because
rel="preload" doesn’t have the greatest browser support yet.
<link as="style" href="https://cloud.typography.com/[…]/[…]/css/fonts.css" onload="this.rel='stylesheet'" rel="preload" />
Now for a Fallback
<noscript> <link href="https://cloud.typography.com/[…]/[…]/css/fonts.css" media="screen" rel="stylesheet" type="text/css" /> </noscript>
Show Me Some Stats!
Not a ton of work, right? Now let’s take a look at the numbers to see if this helped.
|Home (Before)||3G Slow||9.35s||9.35s|
|Home (After)||3G Slow||2.50s||5.29s|
|Article (Before)||3G Slow||9.01s||9.01s|
|Article (After)||3G Slow||2.30s||4.92s|
Just as suspected, the performance improvements are astonishing. This is a huge gain, and I think the difference between someone staying on the site, or leaving.
I know there are even more optimizations I can make. I think a ServiceWorker might help. But I don’t know enough about it to tinker just yet.
For now, I’m kinda
:shrug: about the FOUT because there still doesn’t seem to be a great way of handling it. Overall however, it’s a better experience with faster speeds without sacrificing beautiful type.
Update on 11/01/2017 at 9:31am CDT: Shout out to James Dinsdale who gave me a heads up that I needed to add the
rel="preload" polyfill script too.