Menu
Light House audit is suggesting that I preload key requests, specifically the two google fonts that I'm using in my React app. A Light House member suggested using: <link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
I know it's making the request because I see it in the waterfall and I get this console warning:
"The resource https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally."
Unfortunately the two font do not display in my app anymore. Do I need to define these in my CSS with @font-face or something like that?
332
Preloading Google Fonts also reduces the loading time by around 100ms. The reason for this is DNS, TCP, and TLS load in parallel with the Google Fonts CSS file. Preloading requires you to pre-connect and use a preload link in the stylesheet.
In summary, without font preloading, you might run into a situation where a browser is ready to load your site's text, but it can't because the font isn't available yet. That is, it needs to download the font before it can paint the text.
Step 1: Select a font. Select your character sets and styles (weight and style). A sometimes overlooked but easy way to make your sites load and render faster is to user fewer fonts. This applies to both different typefaces and styles (weight and italicized, etc.).
The correct way to preload a font would be by adding both a preload link and a stylesheet. A simplified example, based on MDN is as follows:
<head> <meta charset="utf-8"> <title>Preloading fonts</title> <link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto&display=swap" as="style"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap"> </head> <body> </body> In the above example, the preload link will send a request to fetch the font regardless of it being installed or not on the client and then use the stylesheet link to properly load and use it.
preload is more of a way to tell the browser that a resource will probably be needed, so that it will be requested regardless and then, if you need it or decide to use it, you can.
137
It is recommended that you preconnect, then preload, and then finally load as follows:
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin> <link rel='preload' as='style' href='https://fonts.googleapis.com/css2?family=Open+Sans|Roboto:wght@300&display=swap'> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Open+Sans|Roboto:wght@700&display=swap'> You cannot just preconnect and/or preload, you still need to load as usual. Then you just specify any font weight that is not the default for that given font by using :wght@700, for example. Between successive fonts you put the pipe | sign.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
