Right side bar loads late and created CLS

I excluded below ones but no luck.

/wp-content/plugins/gp-premium/(.*).css
/wp-content/themes/generatepress/(.*).css

Hi there,

where did you add the CSS to your site ?

Additional CSS part in customization.

Not sure, the Additional CSS is output as inline style like so: <style id="wp-custom-css">
You could try adding the #wp-custom-css ID to the exclude rules.

If that don't work you would need to check with WP Rocket

Thanks, David, I will try and let you know.

Hi David,

I did extensive tests and found the issue by comparing the whole page source.

Below is the screenshot of the comparison result

CLS problem's reason

When I disabled the below plugin, I started to get 0 CLS results. I think the other way to resolve this is to exclude its JS from delay the JS list but it will also cause other penalties.

https://wordpress.org/plugins/metronet-profile-picture/

Is there any way to show the profile pictures without any plugin?

Thanks for your help.
Onur

Whose profile image is it displaying?
Is this your users ( ie. logged ) ?

I found a way to upload profile pictures. I will now do it for all users on my blog.

I am getting only a CLS which is zero that's why I am neglecting it for just now. But if you have any suggestions, I will apply to remove this one as well. :)

CLS zero but layout shift warning

Thanks David,
Onur

Are you using any conditional loading of menu items ?

As I know, I do not using anything for menu items. I do not have specific CSS or other things but let me check one more time my custom CSSs and get back to you.

On initial load, only some of the menu items load, then later the rest of them do - see here:

https://www.screencast.com/t/cpKMQMn4

This is not a CSS issue, as the HTML starts loading then stops as the browser does something else and then goes back to complete loading the HTML for the menu. This is similar to whats happening with your sidebars loading later. Never seen this before something definitely odd the way your site loads its content.

Its not going to cause any CLS issues as the movement is only horizontal, and the menu changing size doesn't cause the Layout to shift.

This time my other page has been broken. I opened a ticket to WP Rocket to have a feature that we can use this feature for only mobile because for desktop it is really not stable. I think also this feature is a BETA feature and maybe the best is we should wait a bit to see some progress and fixes at their side. I really got tired of debugging and fix the problems. At least, I will have zero CLS when I am not activating the remove unused CSS feature. I may do some more tests in the future and update here with my outcomes.

Thanks,
Onur

The link you provided scores 97 on mobile, so i am not sure what the issue is.
I don't personally think eliminating unused CSS is going to make a big deal of difference even if it worked correctly.

One option you may want to look at is the Google Font that Enighter ( syntax highlighter ) is loading. Not sure if it has an option to change the font, but using the monospace system font in place of a google font would eliminate the need to load a google font.

Hi David,

I have just found a chance to read the last two messages.

Those problems are going away, whenever I am disabling the remove unused CSS feature of WP rocket. I am not sure what kind of algorithm is happening behind the scene. Thus, I cannot say what is the real root cause of these CLS problems.

The link you provided scores 97 on mobile, so I am not sure what the issue is.
Onur: Yes it is a good score and thanks to the GeneratePress theme first. The thing is when I used the remove unused CSS feature I am getting 99 and 100. That's why If I have a chance to use that function, why should not I?

I will check the font-related tweaks. Even I will disable enlighten to see the results.

Thanks for your replies.