0

edit: I realise it's probably an issue with position-relative. But not sure how to edit it, changing to sticky, absolute, fixed hurt more than helped. edit2: The page is the homepage, https://credence.co.uk

I have been optimising a website for Lighthouse and things are generally good but the CLS is awful, and almost entirely caused by one part of the audit:

Lighthouse Report: CLS focus

I'm not sure what's causing this. I see it load in first, but the gallery image above it loads after, which seems to cause it to reload and thus the CLS? Could this be a problem with lazyloading? Or could it be due to the "fade from up"?

Here is the full HTML code for the section in question:

<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>
  • Do you want to share a link to the page, just seeing the HTML is not very useful I am afraid as it is more to do with the CSS applied. – GrahamTheDev Jun 23 '21 at 13:26
  • Thanks for the reply, I was worried that might be the case. The site is https://credence.co.uk – Thomas Dawe Jun 23 '21 at 13:42

0 Answers0