CODEWITHSUNDEEP
fontsgoogle-pagespeedwebfont-loader
Philipp S.
Philipp S.

Reputation: 981

Passing google pagespeed using google fonts

is it possible to pass google pagespeed while using google fonts? I've found this peace of code (https://github.com/typekit/webfontloader) which is also recommended by google. But even if I load this script, I can not pass google pagespeed.

Upvotes: 1

Views: 565

Answers (2)

Jordan Cauley
Jordan Cauley

Reputation: 353

The stunning truth is that you will do better in PSI if you localize your fonts rather than serve them from Google.

It sounds crazy but we tried 5 different implementations and localizing the fonts rather than serving off of Google URLs scores the beat

Upvotes: 0

Grégoire
Grégoire

Reputation: 26

WebfontLoader is not compatible with display swap. Not sure that this is the good solution.

Be sure to use the last url from Google Font with display=swap

<!--old code-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!--new code-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

The other problem with Google font is that this is using 2 domains. https://fonts.googleapis.com and https://fonts.gstatic.com/

You should use dns prefetch and preconnect in the header:

<link rel="dns-prefetch" href="//fonts.googleapis.com">

and 

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

Perhaps, the best solution is to download the font in your server.

Here is an article in french about optimising font for PageSpeed : Optimiser les fonts pour accélérer son site

Upvotes: 1

Related Questions