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
.