Question

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

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> -put也在</body>标记之前 - 但它没有工作

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

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

但在PageSpeed上始终存在同样的问题。

有人可以帮助我吗？

Answer 1

您可以预加载任何样式（包括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（可解决此问题"Ensure text remains visible during webfont load"）

Answer 2

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

它类似于克劳迪乌的answer，但是文章中建议不要使用<Route exact path="/" component={Login}/>，因为：

<块引用>

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

这是替代方案：

preload

这就是它的工作原理。属性 <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> 将在页面呈现时跳过 css。页面加载后，它将加载打印 css。 onload JS 事件将媒体更改为全部，现在将加载字体并更改页面渲染。最重要的是，字体将不再阻塞您的页面。

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

Answer 3

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

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

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

Answer 4

必须在此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

Answer 5

您可以像这样利用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。

Answer 6

我注意到Laravel最近将此标签添加到了它的html head输出中：

<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">

这个简单的标签将我的移动Pagespeed得分从80提升到95，但是我不能完全确定实际上是我要为得分的提高而感谢的标签-PageSpeed是不可预测的。我不确定是Chrome还是新标准。

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

6 个答案: