Gatsby - 如何修复“消除渲染阻塞资源”（谷歌字体）答案

【问题标题】：Gatsby - how to fix "eliminate render-blocking resources" (google fonts)Gatsby - 如何修复“消除渲染阻塞资源”（谷歌字体）
【发布时间】：2021-07-26 05:21:33
【问题描述】：

我正在使用 React (Gatsby) 开发我的第一个应用程序，Pagespeed Insights 向我显示以下错误： screenshot

我使用插件 gatsby-plugin-google-fonts

添加了 Google 字体

resolve: `gatsby-plugin-google-fonts`,
      options: {
        fonts: [
          `roboto mono\:400,700` // you can also specify font weights and styles
        ],
        display: 'swap'
      }

有什么办法可以解决吗？

您可以在此处查看此应用： https://cssgenerator.pl/

Github：https://github.com/marekfoltanski/cssgenerator

【问题讨论】：

标签： javascript reactjs gatsby pagespeed google-fonts

【解决方案1】：

来自https://cssgenerator.pl 我可以看到它已经生成了这个

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700&amp;display=swap" 
rel="stylesheet"/>

不提供font-display: swap;

链接应该是

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700&display=swap" 
rel="stylesheet"/>

这将提供font-display: swap;

有什么办法可以解决吗？

确保在标题中应用正确的链接。

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700&display=swap" 
rel="stylesheet"/>

我不熟悉gatsby-plugin-google-fonts API。

【讨论】：

【解决方案2】：

我建议您使用v2 API 和gatsby-plugin-google-fonts-v2。在您的情况下，生成的链接似乎没有正确加载字体。像这样的东西应该可以工作：

{
  resolve: `gatsby-plugin-google-fonts-v2`,
  options: {
    fonts: [
      {
        family: `Roboto Mono:wght@400;700`,
      }
    ]
  }
},

默认为display= swap。

在这两种情况下（你的和我的，v1 和 v2），检查 HTML 输出头部中生成的链接，复制链接并将其粘贴到浏览器中以查看获取的内容和方式。

【讨论】：