The new theme has been built, which may allow more time. When sorting out the template to optimize performance, the diagnosis results of Google PageSpeed Insights often have an item: ensure that the text remains visible during the loading of the page font, which means using the CSS function of font display, Make sure that text is always visible to users during page font loading. Before introducing font display, let's understand what is Web Fonts.
Web Fonts
Previously, when using CSS to specify fonts, only the existing fonts on the user's computer can be used. Since the fonts on each user's computer may be different, the fonts that can be used are basically some fonts built into the operating system, such as Microsoft Yahei, Song typeface, Apple Apple, which are also called Web Safe Fonts. In order to make the font display normal, we usually specify multiple fonts at the same time through the font family attribute. If the first font is not found in the operating system, the next fallback font will be used, and so on.
Later, CSS began to support @ font face, which can load custom font files. At this time, fonts can be published with the website. When users browse the website, they will download the font specified in @ font face.
Introduction to font display
To be exact, "font display" is not a CSS attribute, but a descriptor dedicated to the @ font face instruction. It can take the following values:
auto 。 This is the default value of font display. The loading process of fonts is determined by the browser itself, but it is basically the same as the processing method when the value is block.
block 。 Before the font is loaded, the standby font will be used for rendering, but the display will be blank, making it always in the blocking period. When the font is loaded, it will enter the exchange period, and the downloaded font will be used for text rendering. However, some browsers will not be in the blocking period indefinitely, and there will be a timeout limit. Generally, three seconds later, if the font is still not loaded during the blocking period, the browser will directly enter the exchange period, display the backup font (instead of blank), and replace it after the font download is completed.
swap 。 Basically, there is no blocking period. You can directly enter the exchange period, use the backup font to render the text, and replace the backup font after the used font is loaded.
fallback 。 The blocking period is very short (about 100 milliseconds), that is, there will be about 100 milliseconds of blank backup fonts, and then the exchange period also has a time limit (about 3 seconds). During this period, if the font is loaded successfully, it will be replaced with the font. If the font is not loaded successfully, the text will be rendered using the backup font in the future.
optional 。 The blocking period of fallback is the same as that of fallback, but there is no exchange period. If the font is loaded within 100 milliseconds of the blocking period, the font will be used. Otherwise, the backup font will be used directly. This means that the specified network font is optional. If it is loaded quickly, it can be displayed. If it is loaded slowly, it will not be displayed. It is suitable for poor network conditions, such as mobile networks.
After learning about font display, it should not be difficult to see that its value should be set to swap for most cases, so that during the loading of network fonts, backup fonts are used for rendering, and after loading, the specified network fonts are replaced.
Optimization code:
Before optimization:
@font-face { font-family: "icon"; }
After optimization:
@font-face { font-family: "icon"; font-display: swap; }
The "font family" can be set according to the actual situation, such as Orson or Ali icons or some special effects. In addition, "font display" is an API used to specify font display policy, while "swap" tells the browser that text using this font should be displayed immediately using the system font. When the custom font is ready, the system font will be replaced. If the browser does not support font display, the browser will continue to follow its default behavior of loading fonts.
Browser support
As can be seen from the website, the support level of this attribute in all browsers is (minimum version):
Now we know how to optimize the Google PageSpeed Insights performance detection tool. Of course, this is not the case. In the later stage, we will record our interest. At present, the optimization on the PC side has reached 90+, so we are short of the optimization on the mobile side. Come on, continue to work hard, and we will be satisfied if both the PC and the mobile side are 90+. By the way, the template optimization is complete, Excluding independently purchased plug-in unit It may still cause some performance points to be deducted. There is no way to do this. You should pay more attention to the specific situation. After all, you can't stop using it for 90 points or sacrifice the real experience of the user center to get it. Well, leave a message if you have a problem.
