Use A Web Font Loader

published on: February 15th 2020

Use A Web Font Loader

The emphasis on performance for mobile can't be made more clear. We practically scream it at the top of our lungs daily. What a lot of folks forget, when dealing with site load times, are those seemingly harmless Google font grabs. The issue is easily solved. Use a Web Font Loader.

Here, we optimize everything. We Consistently knock down 100s on LightHouse audits, with a slowed down 4g as our benchmark, for mobile. Our secret weapon is the JAMstack and serving static whenever and wherever possible. In short we utilize Gatsby. Smart right? Well, yes. There are still times where we find ourselves stuck around 95-97 with the site finished, images optimized, dead CSS removed, etc... What never occurred to us was to use a web font loader. Yeah! I know...real professional. Seriously, don't laugh. When we started auditing other agency's sites (We do this to make sure we are still smoking them) we saw the same issue. Most of these agencies are slow - in the mid 80s at best, but could easily jump into the 90s for score with a web font loader.

For every website and every page where we got bogged down in the upper 90's, just the simple web font loader addition put us at 100. So, we estimate that the gain was 2-3 points on average. That's nuts. We never thought fonts mattered. Crazy.

When doing our audits we kept seeing a mark down for fonts. We tried everything one would typically do to with fonts in our Layout CSS file to correct this. We even tried a bit of JS magic to async them, maybe our JS game isn't what we think it is, but it barely made a dent. Then we stumbled upon the Gatsby web-font-loader plugin and that was that. I have not had the chance to look over the plugin's code to see exactly how this genius did this - or why we were so inept- but I will. We don't mind using other's work and plugins, but we prefer to build our own.

So, if you find yourself needing to squeeze out a couple of points to hit your goal...make sure to take a look at fonts. Gatsby has a great plugin that worked. So, take a look at the JS behind the plugin and reverse engineer it if you can't find another web font loader that fits your tech. See typekit, google web font, and a few third party ones that are sure to do the trick.