Do you want the information material with graphic supports and the reports of my research?
Download the slides
Use JavaScript libraries
Some developers have chosen to use JavaScript to monitor and intervene surgically (even in case of incompatibility between different browsers) for different purposes:
Check when a font has been loaded (Font Face Observer)
Load CSS asynchronously (Load CSS)
Control the loading of a Web Font (Web Font Loader)
Enter Link Preload and DNS Prefetch
DNS Prefetch is a very interesting trick to improve thperformance ofsenegal phone numbers your website. To solve delay problems, you can establish a connection with the origin server, using the following codes:
With DNS Prefetch you can speed up DNS resolution , saving between 0.5 and 1 second of loading time.
Using Preload allows the browser to set the priority of resources . This allows web developers to optimize the delivery of certain resources using this code:
Want to know how Shopify improved their time by 50% using Preload ? Go to page 16 of my presentation.
Evaluate over time how compatible “preload”, “preconnect” and “prefetch” are in major browsers and decide on your strategy.
Use the Font-display: swap CSS rule
What does font-display mean? With the font-display declaration in your CSS you can customize your rendering strategy and work around webfont loading issues without using JavaScript.
Lighthouse found in December 2018 that, thanks to «font-display», 61.1% of pages avoid the flash of invisible text (FOIT) when loading fonts.
Watch how the value of Font Display evolves on HTTP Archive .
The CSS Font-display property works with values such as:
auto: This is the initial value of font-display and tells the browser to display the font following the browser's default path.
block: with this keyword, while waiting for the web font, a short block period is set. If the set time is exceeded, if the font is not yet available, it is rendered with the fallback font
swap: there is not even a blocking period here, because the browser directly renders the text with the fallback font. The rendering path with the original font starts only when it is completely downloaded.
fallback: with this keyword you set a short blocking period, if the web font is not downloaded within this period, for the entire visit of the site, the user will see an alternative font.
optional: this is an additional precaution compared to the previous one. If the font is not downloaded within the blocking period, for the entire duration of the visit to the site, the browser will report the substitute character, but will download the web font in the background, to make it immediately available in case of future visits to the site.
Make sure text remains visible while web fonts load
Using font-display:swap is one of the 15 website performance tips revealed at Google I/O '19.
This way you can ensure that your text is visible to users when web fonts load and PageSpeed Insights won't flag any errors.
But you should remember to optimize the font format for each browser, in fact each font should be provided in WOFF2, WOFF, EOT and TTF since they are the formats most supported in the most used browsers.
Fonts and speed
But what if we had to choose a font to improve the performance of our website among the various fonts available online? Here are the best fonts for websites .
If performance is your priority, here's how to choose fonts for your website.
Below I report the ranking of the 10 fastest Google Fonts , thanks to the data collected in a Case Study created by KeyCDN.
Source: KeyCDN
Conclusions
Web Fonts or System Fonts ? You need to find the right compromise between website customization and performance. Therefore, I suggest you use Web Fonts for titles and System Fonts for text (or vice versa).
This way you will reduce the chances of encountering unwanted flashes. Also, using dns-prefetch or preload will reduce font loading times by up to 1 second.
The last tip is to load the entire web page without any render-blocking resources (like CSS or JavaScript files). Sometimes optimizing only the fonts can increase the page load time.
