Dec 11, 2020 08:00:00

Pointed out that Google fonts become a page load bottleneck in Chrome update

Google Fonts is a service that provides fonts for websites for free, and it is used on more than 46 million sites because many fonts are easy to use. Engineer Simon Wiki warns that Google Fonts can become a page load bottleneck if not used properly.

Time to Say Goodbye to Google Fonts
https://wicki.io/posts/2020-11-goodbye-google-fonts/

There are two ways to use Google Fonts: the CDN method, which asks the user to fetch font data from Google's server, and the self-hosted method, which uploads the font data to their own server and provides it. The former method of using a CDN can be set up by simply embedding the code in the page, and it is so easy that it has been used on many sites. However, since the method using CDN requires loading the CSS of the font and the font itself separately, it is necessary to connect to many servers to load the page, and the loading will be delayed by that amount. ..

The figure below shows a comparison between a CDN and a self-host . The left end represents the 'server to connect to', and the graph on the right shows what was happening each time after connecting. The color coding of the graph shows the time taken for ' name resolution (dark blue)', ' TCP handshake (orange)', and ' SSL handshake (purple)', which are the procedures required to connect to the server. The request (green) is finally sent after going through three steps. In the upper CDN, although the font loading time is shortened to some extent by setting the handshake in advance called preconnect, the lower self-host still does not require an additional handshake. You can see that it can be displayed 1 second earlier.

On the other hand, when loading fonts from a CDN, it is possible that the user has a cache because the fonts used are covered by other sites. In that case, it has been said that the font can be displayed faster than the self-host because it is not necessary to reload the font.

However, since Google Chrome 86 released in October 2020, the browser cache will be separated for each site to protect privacy , and even if the same resource is loaded, it will need to be loaded again if the site is different. I did. Since similar functions will be added to other major browsers, the advantages of CDN will disappear.

When using Google Fonts, Wiki says he chooses how to host it on his site to improve performance.