• Resolved aleebee

    (@aleebee)


    Hey there,

    I got a big problem with CLS (Cumulative Layout Shift) for desktop sites.

    First the main content will pop up in the center and after that the sidebar – which shifts the main content to one side and thereby creating the layout shift.

    Is there a possibly easy solution to that? This would help me a lot with speed and page performance (Core Web Vitals)!

    I also have a problem with the mobile versions CLS – and I don’t know why :/

    Thank you very much ??

    • This topic was modified 2 years, 11 months ago by aleebee.
    • This topic was modified 2 years, 11 months ago by aleebee.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Hi @aleebee!

    Thanks for choosing Neve!

    You can check out our guide that details the possible causes of issues regarding the performance of a site and a few ways to optimize it.

    I hope this helps!

    Have a nice day!

    Thread Starter aleebee

    (@aleebee)

    Hi there,

    thank you for your reply!

    But this is not helping me, because your guide doesn’t tell anything about CLS.

    My problem is that the mobile version of my page does not pass the core web vitals test from google. And that there is CLS with the desktop page, too. Which results in poor page experience, too.

    Could you have a second look at this and maybe resolve it with future NEVE releases?

    Thank you so much! I know you are there and I am so happy ??

    Mat

    (@mateithemeisle)

    Hello @aleebee,

    Thank you for using Neve and for reaching out!

    I took the liberty to perform a lighthouse report for both desktop and mobile versions of your website and the CLS is 0 for both instances.(screenshot desktop, screenshot mobile)

    Are you still encountering issues?

    Thank you and have an amazing day!

    Thread Starter aleebee

    (@aleebee)

    Hello Mat,

    thank you for checking the performance. It is true lighthouse is not showing a CLS problem.

    Anyway, if you check with PageSpeed Insights there is CLS not only for the desktop but also for the mobile version.

    The problem with the mobile version is too big to pass the Core Web Vitals-Test. And I would like to be able to change that asap. I hope you understand me.

    Thank you very much for your help!

    Mat

    (@mateithemeisle)

    Hello @aleebee ,

    Thank you for your reply!

    I do understand your point of view but at the same time, there is not much we can do from our end. There are multiple ways of improving CLS and I found this article that can help you too if you follow the steps written there.

    Please keep in mind that this article is suggesting some changes at the code level, thus using a child theme would be better.

    Thank you for understanding and have an amazing day!

    Thread Starter aleebee

    (@aleebee)

    Hello Mat,

    I am grateful for your reply. I see that you cannot do much solving my problem with the mobile page since I could not yet figure out what is causing the CLS there.

    Anyway the CLS with the desktop version is caused by the way NEVE presents the content: it first loads the main content in the center and after that the sidebar which will shift the main content to the side.

    Maybe you could change that?

    Thank you so much for your presence!

    Alex

    Mat

    (@mateithemeisle)

    Hello @aleebee ,

    Thank you for your reply!

    If the sidebar content is the one affecting your CLS then you could try and remove the sidebar content but I think that is not an option for you.

    You could also use an effective caching policy plugin like WP Cloudflare Super Page cache or WP Rocket which should serve the pages already loaded, in turn resulting in a decrease in your CLS.

    Another option is to try and see in the Google report exactly what elements are influencing the CLS and adjust them as instructed. Usually, CLS could be improved by defining the width and height of images or preventing ceratin elements from having the width set to auto. These adjustments can be done through custom CSS added in the Additional CSS tab in the Customizer.

    Thank you and have an amazing day!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘CLS Problem Neve’ is closed to new replies.