[Support request] Google PSi reports “Avoid large layout shifts 5 elements found”

[Onur]

Hi GP Team,

I did really everything I can such as:

Created a new blank same post from https://www.swtestacademy.com/xpath-selenium/ but the newly created page also has main content shift problem.

I tried all solutions from: https://generatepress.com/forums/topic/cls-issue-on-desktop-2/page/3/ but no success at all.

I checked the code section and I did not see any clue for this problem.

I did a performance test in chrome dev tools and the main content area loading first, then after side-bars, it is moving to fit its original position.

There is maybe a solution, to tell the sidebars (#left-sidebar, #right-sidebar) and the .content-area to position themselves as expected while page (posts) loading.

By the way, the ratio of left-sidebar is %15, the right one %25.

And, I am using below custom CSS at least reduce the CLS as much as I can.

@media only screen and (min-width: 1025px) {
.content-area {
margin-top: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
}
}

Thanks for all feedback.

[Onur]

Even this link creates more CLS: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.swtestacademy.com%2Frest-assured-tutorial-api-testing%2F&tab=desktop

I spent more than 10 hours solving this problem. Watched youtube videos, did a lot of google search, but no luck. I also asked for help from two front-end developer friends and waiting for their replies as well. This is an insane problem which I did not know what to do.

Even, I deleted all content and tried to test but still the problem persisted.

I really don’t know what will work, flex, grid, margin, etc… I gave up producing content for my blog and focused to solve this problem.

Anyone in this forum has any feedback, I will be much appreciated it.

[Onur]

I tried almost everything which is explained here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[David]

Can you temporarily disable WP Rocket Optimized CSS Delivery ( aka Critical CSS ) – so we can take a closer look.

[Onur]

Hi David, I did it but it did not change the results. I can create an admin user for you and share it privately if you want to check the problem as a WordPress admin.

[Onur]

Hi David,

I did countless tests and debugging for the last 4 days. I devoted myself to finding the root cause of this problem, and finally, I believe I found it.

So, what did I do at last?

I created a new blank post, copied the problematic post’s content to the newly created post, and tested it, and everything worked fine. There was no CLS issue for the newly created post.

Copied Post: https://www.swtestacademy.com/rest-assured-tutorial-api-testing/

After using a move WordPress comments plug-in, I moved all comments (84 comments) to the newly created and working fine post.

After this step, I re-tested that post and Voila! The problem also started to appear on the newly created working post.

So, finally, I understood that a page with many comments (I am not sure the exact number of comments) has a CLS issue.

I highly believe that it is a bug, and I am kindly requesting a resolution or workaround for this problem.

Some of the problematic posts which has many comments and has CLS issues:

https://www.swtestacademy.com/rest-assured-tutorial-api-testing/. 84 comments

https://www.swtestacademy.com/xpath-selenium/ 45 comments

Some Pages with fewer comments and has not had any CLS issues:

https://www.swtestacademy.com/java-streams-intermediate-operations/ 0 comments

https://www.swtestacademy.com/standalone-wiremock-stub-server-creation/ 4 comments

Finally, the problem’s root cause is identified, and I am very excited to look forward to a resolution from the GeneratePress side.

Kind Regards,
Onur

[Onur]

I did also extra debugging on production and I will keep that post online until we fixed the issue.

I created below dummy post.

https://www.swtestacademy.com/lorem-ipsum-dolor-sit-amet/

and I started to add as many comments as possible and after some certain point, the CLS problem started to appear.

I think it may be a comment or site content or content area maximum height problem but when the page is getting longer or have many comments, this CLS problem is happening. I mean the content area is moving. It is very visible with eyes when you refresh the browser on Chrome.

[Tom]

Hi there,

Out of curosity, does this make any difference?:

.both-sidebars .site-content {
    justify-content: center;
}

Let us know 🙂

[Onur]

Hi Tom,

First of all, it is nice to see you. 🙂

I tried what you suggested as a Custom CSS but it did not work.

What I did is I cloned my production server and create a new cloned server and created an admin user for you guys to check this problem in a real test environment.

I am sharing the admin link, username, and password for the cloned server. Would you please check this problem deeper by using the below credentials and test environment?

link: https://wordpress-665884-2179165.cloudwaysapps.com/wp-admin/
user: testclsproblem@gmail.com
pass: RQbke)EgQXje)izVDgRw8k*P

Note: You can do any kind of tests, trials, and modifications on this server.

Looking forward to hearing from you.

Thanks,
Onur

[David]

The CSS that Tom provided does work… but the issue is you have different width sidebars, for the CSS to work correctly the left and right sidebar would need to be the same width.

I had a closer look at the site as well and i cannot see what would be causing such a great delay in loading the sidebars.

[Onur]

Yes, David in order to have a proper design on my blog posts, I set the left sidebar 15%, and the right one 25%. I really do not know what the sidebar lengths cause this problem and how we overcome this problem. It is really annoying problem and I hope we can solve it. If I will have any solution, I will definitely share it here. If you have also any workarounds, I will happy to apply them.

By the way, the blog page as I see has this problem a bit and it has only a sidebar.

This page shares a lot of insightful info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[Onur]

If I do the below ones, the CLS reduces significantly but I am having this time other penalties because I cannot load CSS files asynchronously.

1) I disable optimize CSS Delivery option of WP rocket. (It brings Eliminate render-blocking resources penalty)

2) Added the Tom’s CSS -> Flex Box justfiy-contents=center for .site-content and .both-sidebars

3) I made both left and right sidebars 20% (It brings google Adsense ads shape penalties.)

For the longer posts which have very big content-height value, Is there any way to load the sidebars and content like the posts which have short content-height?

I was thinking comments pagination but it may have SEO penalties and also not a perfect solution because the post itself also may be big and long.

This may be a complex problem. If you put this item in your backlogs, as a customer of GP, I will be really happy.

Rather than a support request, this may be treated like a fix, enhancement, bug, etc.

Thanks for your help till now. I am really happy about your support and your efforts. I am also doing my best to find a solution and share with you whatever I have.

One last question is, am I the only one who faces this problem?

[Tom]

Hi there,

Basically the issue is this:

Your content area loads first in the HTML – this is good for SEO, as the content is more important than the sidebars.

If your sidebars have a lot of content/are slow to load, the content area will sit on the page waiting for the sidebars to come along.

Once your sidebars are loaded, they will take their place on the page which will push the content area into its correct place.

If both sidebars are the same width, we can center the content so it sits in the right place right off the bat.

If they aren’t, there isn’t much we can do to fix the issue.

As I see it, the only potential solutions are to:

a) Load the left sidebar HTML before the content. However, this will have other drawbacks (and your content will take longer to load).
b) Figure out why your sidebars are taking so long to load. With good hosting and well-optimized sidebar content this issue shouldn’t even exist (which is why it’s rare that it comes up).

[Onur]

Hi Tom,

Thanks a lot for the comprehensive answer.

I understood the complications and the details of the problem.

I have some questions which made me curious. I am listing them below:

– Why this problem is not happening when the content length is not long enough? Only happening some of the posts are quite long. Any idea about it?

– After making the sidebars equal and then activating optimize CSS Delivery option with generating critical CSS still I am having a CLS issue. (I created a ticket for this to WP Rocket. This should be answered by them as I believe.) That’s why I disabled the CSS delivery option for some posts which has this problem and makes the CLS almost zero.

– What are the ways to load the left-sidebar first then the content?

– For the sidebar loading problem, I will do research. The left side bar contains the categories and the right sidebar is for AdSense and it is being loaded lazily by WP Rocket whenever a user has interacted with the site.

Thank you so much for your help and support.

Kind Regards,
Onur

[Onur]

Hi again,

I did the below things to make the CLS zero with some render-blocking penalties (because of synchronous CSS loading).

– I set both sidebars at 20%. Their widths are now equal.

– I applied the below CSS to justify content at the center.

.both-sidebars .site-content {
    justify-content: center;
}

– I applied the below CSS for social icons CLS problems. I believe that their display type should not be “block”.

.lsi-social-icons{
	  min-height: 50px;
}

.lsi-social-icons.icon-set-lsi_widget-2{
	  display: flex !important;
	  justify-content: center;
}

.lsi-social-icons.icon-set-lsi_widget-3{
	  display: flex !important;
	  justify-content: center;
}

.lsi-social-icons.icon-set-lsi_widget-4{
		display: flex !important;
	  justify-content: center;
}

//Note: I was thinking to apply the below rule rather than the above three rules but maybe it has more performance penalties.

ul[class*='si-social-icons'] {
    display: flex !important;
	  justify-content: center;
}

.widget.inner-padding .lsi-social-icons li{
	margin: 0 8px 4px 0;
}

.lsi-social-icons li a {
	transition: none !important;
}

– I disabled the “Optimize CSS Delivery” option of WPRocket for problematic (long) posts.

After these settings, the CLS of the problematic pages became zero.

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.swtestacademy.com%2Frest-assured-tutorial-api-testing%2F

I would be happy to solve this problem with Optimize CSS Delivery function to eliminate the render-blocking problem but I believe that it is not GeneratePress’s job to do. That’s why I have opened a ticket to the WP Rocket support team.

If I will have extra information, I will share it here.

Many thanks and Kind Regards,
Onur

[Author]

Posts