Improving font load performance

This post is a result of an article I came across recently. This is a nice post which in detail about improving the performance of a website when loading fonts from Google.

There is a lot of interesting items going on to make the web page load faster.

  1. font-display: swap
    Instructs the browser to use the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT
  2. preload
    The preload value of the <link> element’s rel attribute lets you declare fetch requests in the HTML’s <head>, specifying resources that your page will need very soon.
  3. preconnect
    The preconnect value of the <link> informs the browser that your page intends to establish a connection to another origin, and that you’d like the process to start as soon as possible.

Of course, I wanted to see if this can help our home page load faster. The sample page to try this was the products page of hackerrank ( To benchmark my results, I used from Dulles, NA using Chrome with DSL internet speed.

These are the four different versions that were considered for this experiment.

GoogleFont-V0The base version which is the exact HTML copy of the HackerRank’s current webpage.
GoogleFont-V1Removed an extra font-tag, which loads the same font OpenSans font again.
GoogleFont-V2Added preload, print media swap, and merged the Open Sans and Source Code Pro in a single HTML tag at the head of the page.
GoogleFont-V4Added preload, print media swap, and merged the Open Sans and Source Code Pro in a single HTML tag at the bottom of the page.

After all the experiment and measuring the web pages, the output was disappointing 🙂

Neither was there any change in the visual progress and overall timings.

Like I mentioned earlier, I’m a little disappointed with the final result. I was hoping the font optimization will help a little bit. Running the same tests from the Singapore region resulted in the same results. The four different versions of the code we used for testing are available at

There is still a lot of scope for improvement. I see the first 4.5 seconds nothing really happening in the webpage and that’s something I plan to work on soon. The goal is to cut down the time to load by at least 1 second.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.