Cumulative Layout Shift pagespeed lighthouse first

Question

我遵循了一篇关于 消除谷歌字体渲染阻塞 的建议，这是 https://pagespeed.web.dev/ 及其好友 Lighthouse 的结果。

我在字体中添加了以下内容：

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

1. “First Contentful Paint”从 3.1 秒提高到 .9 秒

2. “Cumulative Layout Shift”使饼干从 0.006 秒移动到 0.933 秒

3. “Largest Contentful Paint”从 3.3 秒到 3.4 秒变化不大

但是 Total Lighthouse (for Mobile) 分数从 86 下降到 68。

关于恢复“Cumulative Layout Shift”有什么想法吗？

注意

display=swap

在那里进行第一次测试。

更新

在进一步测试中发现它加载的 materialize.css 破坏了累积布局偏移。以类似的方式，以下破坏了 CLS。

<link
  href="https://mysite/materialize.css"
  type="text/css"
  rel="stylesheet"
  media="screen,projection"
  charset="utf-8"       
  onload="this.media='screen,projection'"/>

以更广泛的方式改进 FCP 并保持体面的 CLS。我想把 materialize.css 分解成 lil 位。！