Performance Boost with font preloading? Works for me, but might not for you.

I was doing an audit some time back for my website and this is what I found.

Earlier the @font-face was defined in a CSS file and this is how the waterfall from WPT looked like. You can see the report here.

Performance%20Boost%20with%20font%20preloading%20Works%20for%20m%201af4a0aec47d4cf3bba20fbde3846416/Screenshot_2021-06-08_at_11.22.07_AM.png

You can see that the request for the font was initiated only after the CSS was fetched and parsed. You could also see that when it was first discovered that font was required and when it actually started loading there is a gap that might probably be attributed to high Browser Main Thread activity during that time visible at the bottom of the waterfall.

So there were too issues, late request for font and some bottlenecks in downloading it when required. We can also see that Main Thread is quite free before that so what if we can load the font during that time, it would solve both the problems.

Performance%20Boost%20with%20font%20preloading%20Works%20for%20m%201af4a0aec47d4cf3bba20fbde3846416/Screenshot_2021-06-11_at_5.51.23_PM.png

So this is what I did, I moved the @font-face definition to the main document HTML itself and then I fired up the WPT again but to my surprise, it was still not being requested early on. I quickly searched and found out that the reason is that browser is not discovering the @font-face src till the render tree is built which is only after both DOM and CSSOM have been constructed which requires blocking JavaScript to be executed.

The solution for that would be to preload the font using link <link rel=preload. After that this I saw the change I expected to see. But what was unexpected was that it improved LCP by a huge margin that made the score jump from 86 to 99. I am sure some of it can be attributed to variance but font preloading sure helped. Such a small change and huge benefit.

Performance%20Boost%20with%20font%20preloading%20Works%20for%20m%201af4a0aec47d4cf3bba20fbde3846416/Screenshot_2021-06-08_at_11.50.14_AM.png

Though preloading should be used very carefully after measuring the performance as when some resource is loading early some other resource might be impacted. Andy Davis does a great writeup on a similar case of font preloading. It is a must-read.

Cost of Preloading is also a must read where Google Engineers explains the nuances of preloading. Quote from the doc.

Preloading fonts is squarely power user territory,