Travis ChaseTL;DR: We tried to make our Free Kits insanely fast. But browsers changed, and we ended up making them slow. Here’s what happened and how we fixed it. This fix affected our Free Web Font Kits only.
In late 2018 we started with a question: what if we could make Font Awesome Free faster for the whole internet? With over 200 million websites using Font Awesome, that was a robust challenge indeed. New web technologies were available, which gave us the belief that this obstacle could be conquered. HTTP/2’s multiplexing of requests over a TCP connection and the browser’s local cache presented a solution.
HTTP/2 multiplexing
What We Tried
- We chunked up Font Awesome into smaller web font files containing only the icons created or updated in that version: fa-solid-900-free-5.0.0.woff2, fa-solid-900-free-5.0.1.woff2, etc.
- When a browser loaded a Kit, it would request all the web font file chunks using HTTP/2, sending multiple requests over one connection.
- The browser would then store all those chunks in its local cache for later use.
- The next time the Kit was loaded, even a completely different website; the browser would use the files in its storage, never needing to load them over the web.
Petabytes of bandwidth saved. The internet of Font Awesome accelerated!
What We Discovered
Snag one: browsers were changing the way their local caching worked. Browser developers discovered possible leaks in how they were caching items. They have decided that they are going to partition the cache using the top frame origin. What this means is that files from a CDN used on website A can no longer be used from the local cache on website B, even though it uses the same CDN files. Users will now have to load Font Awesome from our servers for every website they visit if they are not already in the local cache for that website.
Snag two: not all browsers loaded our web font files the same with HTTP/2. Some browsers would make a synchronous request over a new connection for every chunked file, downloading it into local cache, and then checking to see if it contained the needed icon. The others behaved as expected and pulled the files down asynchronously, sharing a connection.
These two complications combined negatively to affect the Kit’s performance. It wasn’t what we set out to create and not what our users expected. Things had to change.
What We Did
With the release of Font Awesome 5.12.1 we have changed the way our free web font Kits work. If you have a web font Kit with the version set to “5.12.1” or “Latest”, we will load one file that contains all the icons for the requested version. Going forward this is how our free web font Kits will operate. This change will bring our free web font Kit performance inline with our free CDN. To take advantage you only need to upgrade your Kit to the newest version.
We continue to learn at Font Awesome while we endeavor to push the boundaries of the services we offer. Try out the fix today and let us know if you have any issues.
