0

试图修复我网站的 CLS。我通过 CLS 调试器对其进行了调试，发现这些 HTML 元素对页面的累积布局移位贡献最大：

CLS分数 HTML 元素
0.3972 导航#site-nav
0.3972 div#content>section.cs-section.no-padding.parallax.cs-section-cover-bg.rocket-lazyload>div.container-fluid>div.row>div.col-md-12>section.cs-部分
0.3972 div#content>section.cs-section.sm-padding
0.3972 div#content>section.cs-section.no-padding.parallax.rocket-lazyload
0.3972 div#content>section.cs-section.custom-padding.cs-text-white

既然我知道这些因素导致了问题，那么最好的行动方案是什么，以使它们不会转移？我应该单独针对其中的每一个并指定宽度/高度吗？如何定位 cs.sections？

4

1 回答 1

1

解决 CLS 问题的关键通常在于为这些元素内联CSS。

所以你会有类似的东西

<html>
<head>
  <title>title text</title>
  <style>
    nav#site-nav{
      /* All your CSS for this element here */
    }
    /* The styles for the other elements causing a layout shift */
  </style>


</head>
<body></body>
</html>

您对出现在首屏上方的所有项目执行此操作（无需滚动即可看到）。

这样，一旦 HTML 加载完毕，浏览器就拥有了呈现页面初始视图所需的一切，并且它知道将所有内容放在哪里。

这还有一个额外的好处，即您的初始 Paint 将非常快，因此您不会获得 CLS，并且可以通过此操作获得更快的渲染。

图片

如果有任何图像导致布局偏移，那么您需要将width和添加height到这些元素，以便浏览器可以在它们加载之前为它们分配空间。

于 2021-12-01T13:50:18.883 回答