Preload key requests

Light House is suggesting that I preload key requests, specifically the two google fonts that I’m using in my React app. Currently I’m just importing them like this: @import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700') I’ve been looking for an example of how to do this but, everything I’ve tried doesn’t seem to work. Any suggestions would be much appreciated.

[wildpow]

Well I got it to work with this bit of code:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700" rel="stylesheet" crossorigin>

Without adding the crossorgin property to the second link tag I get a render blocking stylesheet warning from LightHouse but, this whole endeavor to preload font fonts per Light House’s suggestion as upped my first meaningful paint to 3620ms from 2650ms and lower my lighthouse score from 88 to 79. Not sure if the preload suggestion is general and doesn’t work with the way Google serves their fonts or if I’m still doing something wrong. Just frustrating to follow these optimization guide-lines and end up with a slower product.

[patrickhulce]

Sorry I missed this reply @wildpow thanks for sending over the reports!

This is a very interesting case, the successful preloading improves First Contentful Paint as expected, but First Meaningful Paint gets worse because of a quirk in its implementation (the same quirks that were the rationale for decreasing its priority/weight in v3 and promotion of FCP in its place). The regression in the other metrics seems to be unrelated to the preload change and looks like natural variance. If we had been tracking FCP in v2, the incremental improvement from preloading would have been reflected there.

Thanks for bringing this up and sorry for the confusion! Hopefully these cases are addressed in v3 with the new prioritization/metrics 😃