Performant Cloud.typography Fonts

Typography can look great and load at warp speed, Mr. Sulu

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.

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.

The Solution

I’d done some searching, but I couldn’t seem to find an article on how to improve the load time of these fonts. Cloud.typography doesn’t load fonts via JavaScript, so it’s not as easy as adding the 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:

  1. Include loadCSS in our project.
  2. Include the Cloud.typography stylesheet in the recommended way
  3. Build in a fallback for users that don’t use JavaScript

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

Some may not have JavaScript enabled in their browser, so we’ll add a fallback just in case.

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

Page Internet Speed DOMContentLoaded Load
Home (Before) 110mb/s 1.10s 1.10s
Home (After) 110mb/s 331ms 1.03s
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.

The Future

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.

Sexual Misconduct Claims, Suggests Accusers Motivated by ‘Peer Pressure’ | The Verge

Adi Robertson writing for The Verge:

Scoble, who apparently published this post against the advice of his lawyer, claims he did not have enough power over his accusers to sexually harass them. “If I were guilty of all the things said about me I would still not be in a position to have sexually harassed anyone,” he writes.

…his latest defense puts forward an absurd definition of sexual harassment and effectively accuses women of reporting it to fit in with the cool crowd, while claiming he’s writing in “a spirit of healing.”

Robert Scoble is not only an idiot, he’s scum. This dude thinks it’s ok to suggest that peer pressure is what motivated his accusers to come forward. Oh, and lest we forget, that wasn’t the worst part. After explaining how his multiple infidelities were “consensual,” he goes on to plug his new business. Despicable.

Saying Goodbye to Firebug | Mozilla Hacks

Jan Honza Odvarko:

Firebug has been a phenomenal success. Over its 12-year lifespan, the open source tool developed a near cult following among web developers. When it came out in 2005, Firebug was the first tool to let programmers inspect, edit, and debug code right in the Firefox browser.

So it’s sad that Firebug is now reaching end-of-life in the Firefox browser, with the release of Firefox Quantum (version 57) next month. The good news is that all the capabilities of Firebug are now present in current Firefox Developer Tools.

I was a bit late to the Firebug game. If I recall correctly, I started using it in 2007—two years after its release. Still, Firebug is a huge reason I’m a frontend developer today. Every site I’d visit would get inspected. In addition to CSS-Tricks, inspecting sites in Firebug taught me how to build websites.

While it’s sad to see the name Firebug retire, Mozilla still does an amazing job with their developer tools in Firefox. And in my opinion, still has the best CSS Grid inspector.

Transpiled for-of Loops Are Bad for the Client by Dave Rupert

Dave Rupert:

This story is just a personal reminder for me to repeatedly question what our tools spit out. I don’t want to be the neophobe in the room but I sometimes wonder if we’re living in a collective delusion that the current toolchain is great when it’s really just morbidly complex.

I am responsible for the code that goes into the machine, I do not want to shirk the responsibility of what comes out.

While the specifics of this example don’t apply to me, the lesson sure does. We’re responsible for what we put on the web and what that means for the people using it.

Apple’s iPhone Upgrade Program Gets More and More Convenient | Six Colors

Dan Moren on Six Colors:

Yesterday, Apple rolled out the ability to go through the pre-approval process for your loan in the Apple Store app, making it simpler for customers to choose the model they want and get all the upgrade program paperwork squared away ahead of time. That way we can blearily wake up in the middle of the night on Friday and stab at our phone to order a new one like everybody else.

The process of upgrading your iPhone has been a painful one. Even Apple didn’t get it right at first, and from Dan’s article, it’s not perfect yet.

There are still some limitations: for example, you can’t currently get pre-approved for a brand new loan. If you want to start the iPhone Upgrade Program this year with an iPhone X, you can do it, but you’re going to have to select the upgrade program as a payment option when you go to check out

I’m with T-Mobile and while they’ve been doing the yearly upgrade program for a couple years, I’ve had countless problems with it. They’ve accidentally created phone lines, added me to unwanted plans, and the worst was when I had to send back the new phone I’d been given because it was the wrong one for the plan I was on.

While a change in phone is not in my plans this year, I might end up switching to the Apple iPhone Upgrade Program next year. It would seem to be the best of the not-so-great options.

The Best Music Streaming Service | The Sweet Setup

Tyler Hayes on The Sweet Setup:

Apple Music is currently the best option available for an on-demand streaming music service. This service has continued to build a rich feature set, attract a healthy amount of users, and continually has an extensive catalog of music that has a history of including exclusives not available anywhere else.

I’ve been using Apple Music since 2015 and I’ve been very happy. I think the Apple-curated playlists are really great and constantly help me find great new music.

I have only two major gripes with the service:

  1. iTunes is clunky.
    I agree with Tyler. iTunes needs a redesign that makes using Apple Music on the Mac easier. I’d love a stand-alone app, but I don’t see that happening. I do see the benefits of having all media in one place, but the UI needs to be clearer.

  2. No Easy Way to Filter out Explicit Music
    I don’t like music with swear words. Apple Music doesn’t make this easy. Even if I do the Apple recommended way, suggested playlists and algorithm-created playlists still have explicit music. I just want a flag I can select that tells Apple Music to always play me the clean version, and don’t play at all if there isn’t one.

All things considered, after using both Spotify and Apple Music, I agree with the pick.

Passenger Shot as Cars Approach Frogtown Stoplight, St. Paul Police Say | Pioneer Press

Mara H. Gottfried for the Pioneer Press:

A 19-year-old female passenger in a vehicle was seriously injured in a Sunday afternoon shooting in St. Paul, police said.

The shooting occurred in Frogtown, the neighborhood where two people were killed in separate shootings early Saturday and Sunday. Police said the homicides appear unrelated, as does the shooting that injured the woman on Sunday about 2:30 p.m.

I was about 300 feet away from this shooting. First time I witness a gun shot quite as close. Scary stuff.

LaVar Ball Fires Back at Patrick Beverley After Los Angeles Lakers’ Season Opener | NBA.com

From NBA.com

Los Angeles Lakers rookie guard Lonzo Ball had a quiet statistical start to his NBA career last night, finishing with three points (on 1-for-6 shooting), nine rebounds, four assists, a steal, a block and two turnovers in a 108-92 home loss to the LA Clippers. A good portion of Ball’s struggles could be attributed to the job Clippers point guard Patrick Beverley, a noted defensive stalwart, did in guarding him.

The sports media went crazy saying that Lonzo wasn’t worth the hype after his first game in the league. One game. If that’s not ridiculous, I don’t know what is. What’s funny is the very next night Lonzo had 29 points, 11 rebounds and 9 assists in a win against the Suns.

But let’s be real here. This isn’t about Lonzo Ball. This is about LaVar Ball. LaVar is a moron who cowardly talks trash on behalf of his son. Many players are now gunning for Lonzo because of the idiotic comments of his father. Why would a father do this to his son? Why would he write checks that Lonzo shouldn’t be expected to cash?

Yes, LaVar Ball undoubtedly created a lot of hype around his son and they got what they wanted—being picked by the Lakers—but now it’s time to shut up and let the kid play. He’s a great player and is only going to get better. Let the numbers speak for themselves, and if anyone’s going to talk trash, let it be Lonzo.

Rebuilding Slack.com | Several People Are Coding

Mina Markham on Several People Are Coding:

In August, we released a major redesign of slack.com, and we want to give you a peek behind-the-scenes. Rebuilding our marketing website was a massive project that took careful coordination across a variety of teams, departments, and agencies.

We implemented a redesign while overhauling all the under-the-hood code. Our aim was to address a few goals at the same time: deliver a consistent rebranded experience while tackling critical improvements to site architecture, code modularity, and overall performance and accessibility.

This is one of those amazing posts that reminds me how much I still need to learn. You can tell that alongside Mina, there are many smart people working on Slack.com.

There’s lots of awesome stuff to glean from this post, but my favorite being that as I’ve said before, CSS Grid is ready for primetime.