1节导致大量CLS

问题描述

编辑：我意识到这可能是位置相关的问题。但不确定如何编辑它，更改为粘性、绝对、固定伤害多于帮助。 edit2：页面是首页，https://credence.co.uk

我一直在为 Lighthouse 优化一个网站，总体来说情况还不错，但 CLS 很糟糕，而且几乎完全是由审核的一部分造成的：

灯塔报告：CLS 重点

我不确定是什么原因造成的。我看到它首先加载，但它上面的画廊图像随后加载，这似乎导致它重新加载，从而导致 CLS？这可能是延迟加载的问题吗？还是因为“从上而下”？

以下是相关部分的完整 HTML 代码：

<section id="" class="appseo-service-section position-relative">
  <div class="container">
    <div class="appseo-service-content">
      <div class="row justify-content-center">
        <div class="col-lg-4 wow fadeFromUp cefd3ad" data-wow-delay="00ms" data-wow-duration="1500ms">
          <div class="appseo-service-box position-relative">
            <div class="appseo-service-icon-text position-relative">
              <a href="https://credence.co.uk/background-screening-checks/">
                <div class="appseo-service-icon position-relative text-center"><i aria-hidden="true" class="fas fa-dice-d20 "></i></div>
              </a>
              <div class="appseo-service-text appseo-headline pera-content text-center">
                <h3><a href="https://credence.co.uk/background-screening-checks/">Background Screening Checks</a></h3>
                <p><a href="https://credence.co.uk/background-screening-checks/">UK & International Checks</a></p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-4 wow fadeFromUp 679b377" data-wow-delay="00ms" data-wow-duration="1500ms">
          <div class="appseo-service-box position-relative">
            <div class="appseo-service-icon-text position-relative">
              <a href="https://credence.co.uk/industry-specific-checks/">
                <div class="appseo-service-icon position-relative text-center"><i aria-hidden="true" class="appilo appilo-icon-paper-plane"></i></div>
              </a>
              <div class="appseo-service-text appseo-headline pera-content text-center">
                <h3><a href="https://credence.co.uk/industry-specific-checks/">Industry Specific Checks</a></h3>
                <p><a href="https://credence.co.uk/industry-specific-checks/">Airside,FCA,BS7858 & BPSS</a></p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-4 wow fadeFromUp 3a81a52" data-wow-delay="00ms" data-wow-duration="1500ms">
          <div class="appseo-service-box position-relative">
            <div class="appseo-service-icon-text position-relative">
              <a href="https://credence.co.uk/hr-services-solutions/">
                <div class="appseo-service-icon position-relative text-center"><i aria-hidden="true" class="fab fa-searchengin"></i></div>
              </a>
              <div class="appseo-service-text appseo-headline pera-content text-center">
                <h3><a href="https://credence.co.uk/hr-services-solutions/">HR Services & Solutions</a></h3>
                <p><a href="https://credence.co.uk/hr-services-solutions/">JobValidate & Exit Interviews</a></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="appseo-service-vector" data-parallax='{"y" : 100,"rotateY":500}'>
    <img src="" alt>
  </div>
</section>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）