Google Pagespeed Insights: "Ensure text remains visible during webfont load"

Question

I ran my website on Google's PageSpeed Insight and one of the following errors that I got was:

Ensure text remains visible during webfont load

When I expanded this, in one fo the lines below this line was:

<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

And beside this line is written in the Potential savings: 30 ms.

Can somebody tell me what is the above line of code, and should I keep this in the HTML file of my website?

Answer 1

The stylesheet loads Font Awesome.

Font Awesome is a font and icon toolkit based on CSS and Less.

https://en.m.wikipedia.org/wiki/Font_Awesome

If you don’t use these icons, don’t waste time and resources loading the stylesheet.

Pagespeed Insights is telling you that the text (in this case icons) are not visible on your site until the stylesheet (containing the web font of icons) is loaded. This may or may not be acceptable depending on your reliance on Font Awesome icons.

Pagespeed Insights doesn’t know that this font is actually for icons and shows a warning as if the font is for normal text. The latter is more of an issue as without any fallback font the text will not display until the font is loaded.

Answer 2

If you use those icons and need to keep that line, your next question might be "how to ensure my font is visible during load?"

The answer is prioritize font loading:

• Preload font files, e.g., <link rel="preload" href="/content/myfont.woff2" as="font" type="font/woff2" importance="high" crossorigin>. Preloads should be early in the head after meta name="viewport" and Preconnects. More
• Place @font-face rules as inline styles after preloads. This reduces the critical request chain (see link above).
• Optionally, you can go a step further and use font-display to exercise more control over how browsers should handle fonts before they become available.

If you have title text or H1 on the page, and if perhaps it is the LCP element, these changes will also reduce your LCP time. You may also benefit from reducing Layout Shifts as custom fonts load and replace system fonts.