Google PageSpeed - 消除由 Google 字体引起的折叠上方的渲染阻止资源

Question

我正在尝试优化这个网站：electronicsportsitalia-it，当我尝试在 Google PageSpeed 上对其进行分析时，平台说有一种 Google 字体阻止了页面呈现：

https://fonts.googleapis.com/css?family=Lato:300,400,700

字体首先是通过 php 加载的，但后来我将它直接插入到 html 代码中，试图用以下代码加载它：<link rel=stylesheet id=avia-google-webfont href='//fonts.googleapis.com/css?family=Lato:300,400,700' type='text/css' media=all lazyload>- 也放在</body>标签之前- 但它没有用。

所以我尝试使用Web Font Loader加载它，实际上该网站正在运行这个脚本：`

</script>
<script>
  WebFont.load({
    google: {
      families: ['Lato']
    }
  });
</script>`

但在 PageSpeed 上总是同样的问题。

有人能帮我吗？

Answer 1

您可以预加载任何样式（包括谷歌字体）

<link
    rel="preload"
    href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
    as="style"
    onload="this.onload=null;this.rel='stylesheet'"
/>
<noscript>
    <link
        href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
        rel="stylesheet"
        type="text/css"
    />
</noscript>

您可以在web.dev上阅读更多信息

更新

基于我还添加的Lucas Vazquez评论&display=swap（它解决了这个问题“确保文本在 webfont 加载期间保持可见”）

Answer 2

你的问题归结为如何异步包含不太关键的CSS。我建议阅读这篇文章。

它与 Claudiu 的答案类似，但是，建议在文章中不要使用preload，因为：

首先，浏览器对预加载的支持仍然不是很好，因此如果您想依赖它来跨浏览器获取和应用样式表，则需要使用polyfill（例如loadCSS提供的）。但更重要的是，预加载很早就以最高优先级获取文件，可能会降低其他重要下载的优先级，并且这可能比非关键 CSS 实际需要的优先级更高

这是替代方案：

<link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
    media="print"
    onload="this.media='all'"
/>
<noscript>
    <link
        href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
        rel="stylesheet"
        type="text/css"
    />
</noscript>

这就是它的工作原理。属性media=print将跳过页面渲染时的 css。页面加载后，它将加载打印 css。onload JS 事件将媒体更改为全部，现在将加载字体并更改页面渲染。最重要的是，该字体将不再渲染阻塞您的页面。

对于边缘情况，即用户禁用了 js，“noscript”标签将直接加载字体。

Answer 3

就我而言，我将使用字体生成器工具生成字体，该工具更易于使用且麻烦更少，但是当我使用谷歌字体时，这就是我所做的。style您可以在 的末尾body、结束标记之前使用element </body>：

<style>
@import "//fonts.googleapis.com/css?family=Lato:300,400,700"
</style>

或者您可以参考如何防止 CSS 渲染阻止我的网站？