Preload Important Fonts Asynchronously – 10 pts.

10-point Speed Boost Mobile

Overview

Font preloading and asynchronous loading techniques to improve performance, specifically focusing on reducing the “flash of unstyled text” (FOUT) and optimizing page speed scores.

---

Step-by-Step Guide to Optimizing Font Loading

1. Preloading Critical Fonts

• Purpose: Preloading allows the browser to prioritize downloading fonts before they are used, ensuring that critical fonts are loaded as soon as possible.
• How It Works: By using the <link rel="preload"> tag, you instruct the browser to load fonts early in the page load process, before they’re needed by the stylesheets. This reduces the delay in rendering text and avoids layout shifts.

Example for preloading fonts:

<!-- Preload important fonts -->
<link rel="preload" href="https://fonts.googleapis.com/css?family=Barlow:400,400i,500i,600|Oswald|Roboto&display=optional" as="style">

<link rel="preload" href="https://tntwebsites.com/tnticons/css/fontello.css" as="style">

• Explanation:
  • The href attribute points to the font URL.
  • The as="style" tells the browser the resource type is a stylesheet.
  • rel="preload" ensures these fonts are fetched as soon as possible.

2. Loading Fonts Asynchronously

• Purpose: Once preloaded, loading the fonts asynchronously ensures that font styles don’t block rendering of the page. This allows the page’s content to display faster, with fonts loading in the background.
• How It Works: Using the <link rel="stylesheet"> tag, you load fonts without blocking the critical rendering path.

Example for loading fonts:

<!-- Load fonts -->
<link href="https://fonts.googleapis.com/css?family=Barlow:400,400i,500i,600|Oswald|Roboto&display=optional" rel="stylesheet">

<link href="https://tntwebsites.com/tnticons/css/fontello.css" rel="stylesheet">

• Explanation:
  • The rel="stylesheet" tells the browser to load and apply the fonts to the document.
  • The display=optional parameter in Google Fonts makes font loading non-blocking, allowing text to be shown in a fallback font while the custom font loads in the background.

Why This Technique Improves Performanc

1. Reduces Render-Blocking Resources: Preloading fonts avoids blocking page rendering while still prioritizing font download.
2. Prevents Flash of Invisible Text (FOIT): Preloading and asynchronous loading ensure that fallback fonts are displayed while custom fonts load, preventing text from being invisible during the initial render.
3. Improves Mobile Speed: Mobile devices benefit from this technique because it reduces the total load time by fetching resources in parallel and only applying them once they’re available.

Template View

<!-- Preload important fonts -->
<link rel="preload" href="https://fonts.googleapis.com/css?family=Barlow:400,400i,500i,600|Oswald|Roboto&display=optional" as="style">
<link rel="preload" href="https://tntwebsites.com/tnticons/css/fontello.css" as="style">

<!-- Load fonts -->
<link href="https://fonts.googleapis.com/css?family=Barlow:400,400i,500i,600|Oswald|Roboto&display=optional" rel="stylesheet">
<link href="https://tntwebsites.com/tnticons/css/fontello.css" rel="stylesheet">