Just the other day I found out about the font-display: swap; css directive. It basically allows you to configure the browser to load the webpage first and then add the correct fonts when they are loaded.
Note that you can only add
font-display: swap; on
@font-face. That is an issue
because we are using Google fonts. So I downloaded the CSS file from Google fonts
and stored it locally. Then I added
font-display: swap; on all
I also did the same for our Material Icons.
The result is actually shocking. Here is a video illustrating the differences. I have throttled the network to “regular 3G”. I reload the page as soon as the video starts. The non-blocking version shows the content almost instantly. This is a way better user experience.