Google PageSpeed - 消除因Google Fonts导致的阻止渲染以上折叠部分的资源。

Question

Google PageSpeed - 消除因Google Fonts导致的阻止渲染以上折叠部分的资源。

48

我正在尝试优化这个网站：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

6个回答

15

你的问题是如何异步地包含 less critical CSS。我建议阅读这篇文章。

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

首先，preload的浏览器支持仍然不够完善，因此如果您想依靠它在各种浏览器上获取和应用样式表，则需要使用polyfill（例如loadCSS提供的polyfill）。更重要的是，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

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。

- Sagar Jain

2

我注意到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">

这个简单的标签让我的移动页面速度得分从80提升到了95，但我无法确定是不是仅仅因为这个标签才导致了分数的提高 - PageSpeed是不可预测的。我不确定这只是Chrome的事情还是一个新的标准。

- Stuart Cusack

1

在我的情况下，我会使用一个字体生成工具来生成我的字体，这样更容易使用且不那么麻烦，但当我使用谷歌字体时，我会这样做。你可以在body结束前，在关闭的</body>标签之前使用style元素：

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

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

- the_lorem_ipsum_guy

0

在加载此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

- Misunderstood

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Claudiu · Accepted Answer

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

<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（修复此问题：“确保在 Web 字体加载期间文本仍然可见”）。