Web Performance – Font optimization

Font Format optimization

Size from large to small: TTF, EOT (IE8), WOFF, Woff2 (performance from poor to good)

Introduction to font compression:

  1. Woff2 and WOFF formats are internally compressed and do not require compression
    • The biggest priority of Woff2 fonts is the small volume transfer, borrowed from Google Chrome official words:
      • The new WOFF 2.0 Web font compression format is on average 30% or more smaller than WOFF 1.0 (up to 50%+ in some cases)
    • Basically, there is no need for TTF fonts in Web applications.
  2. TTF and EOT font formats are not compressed and can be compressed by the server
    • For smaller resources, compression works
    • But for larger resources (such as TTF and EOT fonts), compression can take longer, resulting in longer TTFB. Be sure to test which conditions lead to shorter load times. For smaller files, the compression time is almost negligible.

A compatibility diagram for woff2 is included :(it has almost become standard for custom icon fonts, so the compatibility of browsers is quite good 🙂

Compatible with writing

Some older browsers do not support Woff2 and need to be compatible further down the line

@font-face declaration writing (@font-face cascading)

@font-face{
	font-family: "Open Sans Regular";
	font-weight: 400;
	font-style: normal;
	src: 	 
              local("Open Sans Regular"), // Check whether there is a local("OpenSans-Regular"), // then make compatible with the url("open-sans/OpenSans-Regular-BasicLatin.woff2") format("woff2"), 
		 url("open-sans/OpenSans-Regular-BasicLatin.woff") format("woff"),
		 url("open-sans/OpenSans-Regular-BasicLatin.eot") format("embedded-opentype"),
		 url("open-sans/OpenSans-Regular-BasicLatin.ttf") format("truetype");
}

// If you need to configure other thickness:
@font-face{
	font-family: "Open Sans Light";
	font-weight: 300;
	// Same as above
}

@font-face{
	font-family: "Open Sans Bold";
	font-weight: 700;
	// Same as above
}
Copy the code

After the @font-face declaration is written, you need to modify the font-family property on the body selector to refer to this font as the default font in the document

body{...font-family: "Open Sans Regular";
}
Copy the code
  • If the font Open Sans Regular is too large to load, you can load the local font first
    • font-family: "Open Sans Regular", Helvetica, Arial, sans-serif;

Font volume optimization

  1. Tree shaking: Cut out the fonts you don’t use

    • Generating font subsets with word spiders github.com/allanguys/f…
    • Font font font font font font font font font font font font font font font

  2. Load the language pack as needed (for example, when you switch to Russian for internationalization, you need to load the Russian language pack)

    You can use Unicode-range (character set) to load language packs on demand

    @font-face {
  font-family: 'e-yu';
  src: url('fonts/e-yu-Light.ttf');
  unicode-range: U+4E00-9FCB; / * put here is the Chinese character set, and other languages to find address: https://jrgraphix.net/research/unicode_blocks.php * /
} 
Copy the code

Make sure the text is still visible when the font is not loaded

Background questions:

  • Fonts are usually large files that take a while to load. Some browsers hide text before the font loads, resulting in a flash of invisible text (FOIT).

Solution:

  • The easiest way to avoid displaying invisible text when a custom font loads is to display the system font temporarily.

  • You can avoid FOIT in most modern browsers by including font-display: swap in the @font-face style (there is no difference between writing and not writing, probably because of older browsers) :

    @font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  font-display: swap;
}
Copy the code

    Font display: compatible with swap: caniuse.com/?search=fon…

Code word is not easy, praise encouragement!

Part reference: Web Performance in Action by Jeremy Wagner

Performance optimization set quick entry:

  • How to determine the best caching strategy for front-end resources?
    • Starting point for browser Cache- > cache-control
    • Browser caching mechanism (combined with response headers)
  • The relationship between <link> and <script> and DOM parsing rendering
    • Introduction to browser multi-process architecture
  • Understand Web performance concepts and common analysis tools
    • Using the Web performance analysis tools PageSpeed Insights and Lighthouse Tutorial
  • Web Performance – White screen time details and optimization
    • Web Performance -HTML and CSS optimization
    • Web Performance – Image optimization
    • Web Performance – Font optimization
    • Web Performance – JS optimization
    • Web Performance – Optimizing DOM operations (rearrange and redraw)
    • The basic principle of TCP transmission and optimization
    • Web Performance -CDN architecture introduction and optimization
      • Configure the CDN of the third-party library in the Webpack project and perform CDN fault tolerance
  • Front-end performance monitoring for real users