Web Development

Better Google Fonts Rewrite

I built Better Google Fonts about a 1.5 years ago to allow quick and easy browsing of Google Fonts with at least two variants, on the theory that there would be fewer fonts of dubious quality once the one-offs were filtered out. Right now that means showing 165 of the 613 available fonts, or about 1/4 of them. Not bad.

I’ve also wanted to add some filtering (need a font with a 300 weight? A minimum of 6 variants?) for some time, but the page was written as typical jQuery spaghetti. But, after signing up for Code School this past week and working through their excellent Anatomy of Backbone.js course, I knew that I had just the project to tackle: I would rewrite BGF with Backbone.js.

That’s been done, laying the foundation for future filtering. But one other thing that had bugged me was performance: as the quantity of Google Fonts grows, the page was taking forever to download: it currently loads 555 fonts, which translated to a whopping 15.53 MB payload on the page.

Then I remembered that Google had introduced a text subset option for their fonts, meaning that I could make a request for only the the few characters rendered for each font. This dropped the payload to 2.96 MB, or an 81% payload decrease. Not bad! This translated into total rendering time decrease from 21.68s to 7.29s, a 66% decrease (taken from a mean of 7 page loads, dropping the max and min).

Old New
1 25.76 s 10.23 s
2 31.56 s 9.26 s
3 19.23 s 6.95 s
4 24.25 s 6.46 s
5 22.51 s 6.79 s
6 12.72 s 6.37 s
7 16.65 s 6.83 s
Mean 21.68 s 7.29 s
Payload 15.53 MB 2.96 MB

More important, though, is that the page feels way snappier. The page would previously lock up while it was rendering all those fonts, but now only lags slightly as it starts to render.

I look forward to working with Backbone more on this project and elsewhere in the future!

Standard

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s