But, from October 2020 (Chrome v86), google has enabled Cache Partitioning feature. That was giving good performance when we load any popular web font. While using Chrome browser before October 2020, if user visits Website A having font from Google Fonts and then if user visits Website B, which uses the same font from Google Fonts, then Chrome browser was pulling the font from the browser cache instead of downloading it again from the google server.Instead it feels safer to update font manually and test our application before pushing the changes to production. If google updates the font on its server, our web page layout may get impacted some way, about which we may not get aware instantly.When we host the font on our server, which has http/2 support, the font loads speedily as well and it provides extra stability to our website due to non-dependency on third party website. Though google CDNs are very fast and stable, in case of any issue with those CDNs, our site can get impacted directly.To preload web fonts, we need to self host them. We cannot preload google fonts for quicker font loading because font urls given by google fonts are not stable and it can get removed or updated frequently as mentioned in this talk from Google.Well, I prefer to use Google Font for quick prototypes or small side projects but for any serious web application, I prefer to self host the fonts due to below reasons: Now, you may be wondering if Google Font is doing so many web font loading optimizations, then why should we self host the font. It supports font-display to allow author of the web page to control behavior of FOIT and FOUT.It implements subsetting of font and so it delivers font with only charsets used on web page.It automatically delivers variable font to the supported OS and browser, which reduces overall font payload for the web page when multiple font styles are used on that page.It provides font from fast Google CDNs.It automatically loads best supported font for the user's Operating System and Browser.Google Fonts is doing below optimizations by default when we load font from it: Let's first understand about what optimizations are done by Google Font service so that we can self host web fonts by accommodating most of those optimizations and avoid disadvantages of using Google Font service. In this article we will use Google Fonts service only to compare it with self hosted font solution. Out of these services, Google Fonts provides free service to load open source fonts and so it is very popular among all other services. Load from online font services such as Google Fonts, Adobe Fonts, etc. There are mainly two ways to load web fonts in our web page. Self host the web fonts Link to this heading Font Loading Optimization Strategies Link to this heading 1. Now, let's start exploring about various font loading optimization strategies to minimize effect of above challenges. To use web font, we need to keep the effect of FOIT and FOUT to minimum, so that the score of important web vitals FCP, LCP and CLS remain in acceptable range. To have lesser impact, we need to keep web font payload as minimum as possible. Due to that it may increase the time for Largest Contentful Paint (LCP). Delayed LCP Link to this headingÄownloading of web font shares bandwidth with other resources of the web page. This also creates bad impact on SEO score. As whole layout can get impacted due to FOUT, it creates bad UX and it increases value of another important web vital called as Cumulative Layout Shift(CLS).
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |