How to optimise loading of fonts?

Support
#1

Hi,

I’ve managed to increase my page load speed by minifying dependencies but the one chain critical request area that’s pulling my score down is the loading of fonts. Here’s my GTMetric results:

Initial Navigation

https://followtheboat.com/ftbmates 335B, 2.7s

    https://followtheboat.com/ftbmates/ 26.6KB, 3.0s

        https://followtheboat.com/wp-content/plugins/cornerstone/assets/dist/fonts/fa-regular-400.woff2 170KB, 407ms

        https://followtheboat.com/wp-content/plugins/cornerstone/assets/dist/fonts/fa-solid-900.woff2 138KB, 331ms

        https://followtheboat.com/wp-content/plugins/cornerstone/assets/dist/fonts/fa-light-300.woff2 185KB, 481ms

        https://followtheboat.com/wp-content/plugins/cornerstone/assets/dist/fonts/fa-brands-400.woff2 76.8KB, 410ms

Meanwhile Pingdom is claiming that these fonts are causing the highest amount of content size:

Font	59.64%	901.3 KB
Script	28.27%	427.2 KB
CSS	7.56%	114.2 KB
Image	2.47%	37.4 KB
HTML	1.83%	27.7 KB

What is the best way of handling these fonts so that they don’t slow down my site or cause this critical chain issue?

Thanks!

#2

Hello @demonboy,

Thanks for writing in!

Please go to X > Theme Options > Miscellaneous > Font Awesome and only enable the icon fonts that you are using on your site. Upon checking your site, you are not using brand icons, you can safely disable the brand and light icons.
Screen Shot 2021-06-03 at 11.47.14 AM

Hope this helps.

#3

Thanks for the reply, @ruenel, however these fonts are still taking up a huge amount of resources. 36% of all page requests are to the remaining three fonts, which is coming in at 612KB. My page is taking over 7 seconds to load. How can these be better optimised?
Thanks.

#4

Hi @demonboy,

Use proper caching or CDN, since fonts are static resources that aren’t frequently updated, they can be cached locally in the browser, saving users having to download your fonts again the next time they access your site. This way, the amount of data the user’s browser has to download, as well as the number of HTTP requests, are reduced.

Thanks,

#5

I use a CDN and W3 Total cache already. I wonder why is this not catching X theme fonts?

#6

Would it not make sense to load these fonts on my server and call them up in my CSS?'s what it should be doing anyway, no? Can you explain why these are not forced into browser cache?

#7

Hey @demonboy,

Please check out this article:

Hope this helps.

#8

Who’d have ever spotted that?! Thank you, @ruenel, that tip saves a lot of heartache (although I have since stopped using the CDN feature in W3 Total Cache).

#9

Glad we could help,

Cheers!

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.