Archived topic
CLS Issue
5 replies · Started by Brett on April 7, 2023
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?
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.
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.
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?
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!
Keep us updated :)
