累计布局偏移 HTML 个元素

Question

正在尝试修复我网站的 CLS。我将其放入 CLS 调试器，它发现这些 HTML 元素对页面的累积布局偏移贡献最大：

CLS SCORE	HTML ELEMENT
0.3972	nav#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-section
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

既然我知道是这些因素导致了问题，那么最好的行动方案是什么才能避免它们转移？我应该分别针对其中的每一个并指定 width/height 吗？我如何定位 cs.sections?

Answer 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，以便浏览器可以在它们加载之前为它们分配 space .

累计布局偏移 HTML 个元素

Cumulative Layout Shifts HTML Elements

html

css

pagespeed-insights

cumulative-layout-shift

图片