Home › Forums › WoodMart support forum › CLS more than 0.25 (mobile) issue

CLS more than 0.25 (mobile) issue

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • December 8, 2021 at 4:00 pm #337833

    ToriTori38
    Participant

    Hi there,

    We have hundreds of URLs being flagged as having a Content Layout Shift issue in GSC. I am 99% sure this is down to the header banner. The header banner we use quite often, and it obviously causes a CLS as it loads and drops down. As CLS will be used as a ranking factor in the future by Google, I would really like a fix.

    Would it help by setting a min-height for the header banner with CSS? Of course we could eliminate the animation (drop down effect) but that would be sad as that helps draw attention to the header banner.

    Can you offer any solution so we can avoid this CLS issue.
    Thanks

    December 9, 2021 at 7:54 am #337996

    Artem Temos
    Keymaster

    Hello,

    By adding fixed height to the header banner you will eliminate this animation effect. So you need to make it static if you want to avoid CLS.

    Kind Regards

    December 9, 2021 at 8:00 am #337997

    ToriTori38
    Participant

    Hi Artem,

    As the header banner causes a Content Layout Shift, which I heard will at some point be a factor in ranking pages, do you not think this is something you need to look at in a next theme update?

    Making the header static is not very aesthetic or modern, but I suppose you could allow for the header to overlay the content which most GDPR consent bars do nowadays. That would avoid the CLS issues. Just some thoughts…

    December 9, 2021 at 8:03 am #337999

    Artem Temos
    Keymaster

    Sorry, but we don’t quite understand how exactly you would like to change the banner to keep the animation and avoid this shift? Actually, the animation is exactly the shift.

    December 9, 2021 at 9:00 am #338017

    ToriTori38
    Participant

    Hi Artem,

    Your header banner animation pushes the whole page content down. That is the Content Layout Shift. However if your header banner dropped down over the pagecontent (did not push the page content down but overlayed the page content) there would be no Content Layout Shift, right? Would that not be also an option?

    December 9, 2021 at 9:38 am #338032

    Artem Temos
    Keymaster

    You can achieve this with custom CSS code. But note that animation comes from the wrapper top shift. The banner itself doesn’t move

    body.header-banner-display .website-wrapper {
  margin-top:0;
}

.header-banner {
    height: 150px;
    z-index: 1000;
}
    December 10, 2021 at 7:13 am #338373

    ToriTori38
    Participant

    Helo Artem,

    I have looked at Google PageSpeed and see that the CLS issue is coming from I think something else. Please look at the screenshot attached. You will see I highlighted in red two CLS issues which account for the biggest cotent shifts. If we can fix those, already that will help.

    I have given you the URL in Page SpeedInsights to check. Scroll down after you get the search results and you will see these CLS issues. Can you help me to remove these 2 CLS issues?

    Attachments:
    You must be logged in to view attached files.
    December 10, 2021 at 9:39 am #338424

    Artem Temos
    Keymaster

    As we can see, the code is not added to your page and the CLS problem is still the same.

    December 10, 2021 at 9:41 am #338425

    ToriTori38
    Participant

    Thanks Artem. Yes but can you help me resolve this CLS issue? If you check that link I sent you in the private area, you can see there are 2 quite big CLS issues caused by page layout. Can you help me resolve that?

    December 10, 2021 at 9:47 am #338428

    Artem Temos
    Keymaster

    Please, add the custom CSS I sent you earlier so we can check again.

    December 16, 2021 at 8:27 am #339903

    ToriTori38
    Participant

    Hello Artem,

    Sorry it took me some time to reply. I decided to disable the header so we can investigate the CLS issue a bit more. Firstly removing the header banner has helped the CSS score. It still needs improving but I will try and work on this a it more until I ask for your help.

    December 16, 2021 at 8:57 am #339920

    Artem Temos
    Keymaster

    OK, let us know if you have any extra questions.

    December 20, 2021 at 8:28 am #340606

    ToriTori38
    Participant

    Hello Artem,

    On your next release could you please do the following, to help avoid CLS issues with the header banner and poor Google Page Speed scores:

    – Have an option for the drop-down header banner to overlay the page content (rather than causing a content shift by pushing page content down, which it does at the moment).

    Just a simple tick field in the settings to allow or disallow the header to overlay content would sort this issue.

    December 20, 2021 at 2:39 pm #340704

    Artem Temos
    Keymaster

    Hello,

    Thank you for your suggestion. We will consider this for our future updates.

    Kind Regards

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘CLS more than 0.25 (mobile) issue’ is closed to new replies.