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

【问题标题】：Google PageSpeed - Eliminate Render-Blocking Resources Above the Fold caused from Google FontsGoogle PageSpeed - 消除由 Google 字体引起的折叠上方的渲染阻塞资源
【发布时间】：2018-02-09 12:27:23
【问题描述】：

我正在尝试优化这个网站：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 上总是出现同样的问题。

有人可以帮我吗？

【问题讨论】：

标签： css optimization pagespeed

【解决方案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（修复了这个问题"Ensure text remains visible during webfont load"）

【讨论】：

这就像找金子
我只是问问而已。 Google 字体 API 提供交换显示类型。应该是受影响吧？使用最新的 API，当您使用 google 字体加载字体时，它会返回关注 https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap。您认为继续使用您上面提到的模式是否合适？
这是一项很棒的技术，我将它用于非关键 CSS。我现在的问题是：字体应该被认为是关键的吗？
不适用于 Firefox、Edge（铬之前）和 IE
好吧，由于控制台警告，我不得不将 rel 预加载更改为 prefecth：The resource … was preloaded using link preload but not used within a few seconds from the window's load event”?

【解决方案2】：

您的问题归结为如何异步包含不太重要的 CSS。我建议阅读此article。

它类似于克劳迪的answer，但是在文章中建议不要使用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”标签将直接加载字体。

【讨论】：

【解决方案3】：

您可以像这样利用 onload 属性 -

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

首先将媒体属性设置为print，但在下载回调触发时将其更改为all。

【讨论】：

【解决方案4】：

我注意到 Laravel 最近在它的 html 头输出中添加了这个标签：

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

我复制它并在我的字体请求之前添加它，即：

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" id="google-fonts-css">

这个简单的标签将我的 Mobile Pagespeed 分数从 80 分提高到了 95 分，但我不能完全确定这实际上是我必须感谢这个标签才能提高分数 - PageSpeed 是不可预测的。我不确定这只是 Chrome 的东西还是新标准。

【讨论】：

【解决方案5】：

在我的例子中，我将使用font-face generator tool 生成我的字体，这更容易使用且更少麻烦，但是当我使用谷歌字体时，这就是我所做的。您可以在body 的末尾使用style 元素，就在结束</body> 标签之前：

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

或者你可以参考How to keep CSS from render-blocking my website?

【讨论】：

【解决方案6】：

在此JS文件之前必须加载以下字体文件：
https://electronicsportsitalia.it/wp-content/plugins/google-analytics-for-wordpress/assets/js/frontend.min.js

https://fonts.gstatic.com/s/lato/v14/EsvMC5un3kjyUhB9ZEPPwg.woff2
https://fonts.gstatic.com/s/opensans/v15/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2   
https://fonts.googleapis.com/css?family=Lato
https://fonts.gstatic.com/s/roboto/v18/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2
https://fonts.gstatic.com/s/lato/v14/EsvMC5un3kjyUhB9ZEPPwg.woff2

【讨论】：