[Support request] CLS Issue

[Brett]

I am having a CLS issue that I am having trouble diagnosing. When I run a Pagespeed Insights report on single blog pages, I get a CLS error that appears to stem from <div class="content-area" id="primary"> on the page.

I cannot figure out what the error is. It seems like the content area within the post and the sidebar are not sizing properly or something. I have the container width set to 1,200px, but it is almost like it is not sizing properly, but then shifting to try.

As a note, I have two separate page templates. One does not have the CLS issue, but the other does. I have included both in the Private Information box below.

Would you mind taking a look for me please and letting me know if there is something that I am missing?

[Ying]

Hi Brett,

Just ran a lighthouse test, and it doesn’t seem like having a CLS issue.
https://www.screencast.com/t/TukrOrktGa

Both pages had a very good score in terms of performance.

[Brett]

Can you please try putting this page into Pagespeed Insights? https://gigworker.com/uber-fare-calculator/

I am still getting the error on this page. This is a page that Google has indicated in Search Console that is failing.

See here: https://www.screencast.com/t/CeuZ4J3HC

Here is a video of the website doing it: https://www.loom.com/share/25e6336c4397447f99c7c90d8388039a.

Additionally, I have the same issue on another site I own that uses the same template: https://www.loom.com/share/d4664d0b31844446b429c3a40bc968ff.

[Ying]

You are using this CSS which swaps the content area with the sidebar, this might worth looking into.

.single.Header2 .site-content {
    flex-direction: row-reverse;
}

It seems that you are using a left sidebar as the body class indicates, but the sidebar has a right-sidebar id, I’m quite confused about how that happens, are you using any specific template or functions?

[Brett]

Thank you for the help. I will have the developer that built this theme look into the issues that you pointed out. I appreciate the help!

[Ying]

Keep us updated 🙂

[Author]

Posts