read

In Google PageSpeed, one of the “opportunity” to making webpages to load faster is to load web fonts asynchronously.

Read more under Eliminate render-blocking resources.

The way to optimize is to “preload” webfonts.

Instead of a simple link tag, change it to as such.

<link rel="preload" href="https://fonts.googleapis.com/css?family=Montserrat:300,500&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'" />
<noscript>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,500&display=swap" rel="stylesheet" type="text/css" />
</noscript>

The noscript is the fallback.

Avoid showing invisible text

Another related improvement is to use system font, while the font is loading.

The way to achieving that is by adding font-display: swap.

For Google Fonts, add the &display=swap.


Image

@samwize

¯\_(ツ)_/¯

Back to Home