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 上总是同样的问题。

有人能帮我吗？

原文由 user6505190 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您的问题归结为如何异步包含不太重要的 CSS。我推荐阅读这篇 文章。

它类似于克劳迪乌的 回答，但是，建议不要在文章中使用 preload ，因为：

首先，浏览器对预加载的支持仍然不是很好，所以如果你想依赖它来跨浏览器获取和应用样式表，则需要一个 polyfill（例如 loadCSS 提供的那个）。更重要的是，preload 很早就以最高优先级获取文件，可能会降低其他重要下载的优先级，这可能比非关键 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”标签将直接加载字体。

原文由 Adam 发布，翻译遵循 CC BY-SA 4.0 许可协议