{"id":1157,"date":"2020-05-30T22:51:22","date_gmt":"2020-05-30T22:51:22","guid":{"rendered":"http:\/\/sp2hari.com\/?p=1157"},"modified":"2020-05-30T23:18:13","modified_gmt":"2020-05-30T23:18:13","slug":"improving-font-load-performance","status":"publish","type":"post","link":"https:\/\/sp2hari.com\/index.php\/2020\/05\/30\/improving-font-load-performance\/","title":{"rendered":"Improving font load performance"},"content":{"rendered":"\n

This post is a result of an article I came across recently. https:\/\/csswizardry.com\/2020\/05\/the-fastest-google-fonts\/<\/a>. This is a nice post which in detail about improving the performance of a website when loading fonts from Google. <\/p>\n\n\n\n

There is a lot of interesting items going on to make the web page load faster. <\/p>\n\n\n\n

  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 \u201cflash of unstyled text\u201d or FOUT<\/li>
  2. preload
    The preload value of the <link><\/em> element’s rel<\/em> attribute lets you declare fetch requests in the HTML’s <head><\/em>, specifying resources that your page will need very soon.<\/li>
  3. preconnect
    The preconnect value of the <link><\/em> 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.<\/li><\/ol>\n\n\n\n

    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 (https:\/\/www.hackerrank.com\/products\/<\/a>). To benchmark my results, I used https:\/\/www.webpagetest.org\/<\/a> from Dulles, NA using Chrome with DSL internet speed. <\/p>\n\n\n\n

    These are the four different versions that were considered for this experiment. <\/p>\n\n\n\n

    Name<\/th>Details<\/th><\/tr><\/thead>
    GoogleFont-V0<\/td>The base version which is the exact HTML copy of the HackerRank’s current webpage.<\/td><\/tr>
    GoogleFont-V1<\/td>Removed an extra font-tag, which loads the same font OpenSans font again. <\/td><\/tr>
    GoogleFont-V2<\/td>Added preload, print media swap, and merged the Open Sans and Source Code Pro in a single HTML tag at the head of the page. <\/td><\/tr>
    GoogleFont-V4<\/td>Added preload, print media swap, and merged the Open Sans and Source Code Pro in a single HTML tag at the bottom of the page.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    After all the experiment and measuring the web pages, the output was disappointing \ud83d\ude42<\/p>\n\n\n\n

    \n