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

nc1teljy  于 2023-03-14  发布在  Go
关注(0)|答案(6)|浏览(427)

我正在尝试优化这个网站:electronicsportsitalia-it,当我试图分析它在谷歌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>-我也在</body>标签前面放了-但是没有用。
所以我试着用Web Font Loader加载它,实际上,网站正在运行这个脚本:'

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

但在PageSpeed上总是同样的问题。
有人能帮帮我吗?

qnakjoqk

qnakjoqk1#

你可以预加载任何样式(包括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>

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

更新

基于Lucas Vazquez注解,我还添加了&display=swap(它修复了"Ensure text remains visible during webfont load"的这个问题)

vdzxcuhz

vdzxcuhz2#

你的问题归结为如何异步地包含不太重要的CSS。我推荐阅读这篇article
它类似于Claudiu的answer,但是,本文建议不要使用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事件将media更改为all,现在字体将被加载并更改页面渲染。最重要的是,字体将不再阻止页面渲染。
对于用户禁用js的极端情况,“noscript”标记将直接加载字体。

9lowa7mx

9lowa7mx3#

你可以像这样利用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'" 
/>

首先将media属性设置为print,但在触发下载回调时将其更改为all

pcrecxhr

pcrecxhr4#

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

这个简单的标签让我的移动的页面速度得分从80上升到95,但我不能完全确定这是不是我得分上升的原因--页面速度是不可预测的。我不确定这是Chrome的东西还是一个新标准。

w51jfk4q

w51jfk4q5#

在我的例子中,我会使用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?

zy1mlcev

zy1mlcev6#

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

相关问题