Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Resolved] Right side bar loads late and created CLS

Home Forums Support [Resolved] Right side bar loads late and created CLS

Home Forums Support Right side bar loads late and created CLS

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1965033
    Onur

    Hi to all GP Team,

    On this page: https://www.swtestacademy.com/java-9-functional-programming-features/

    When I run the google page speed test I am getting CLS errors.
    Page Speed Test

    When I debug the problem on chrome dev tools, I saw that the right sidebar is loading later than the left sidebar and content.

    First content, then left sidebar, and then right sidebar is loading.

    When I used the below CSS and turn-off (remove unused CSS of WP Rocket), the problem was gone.

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

    But I wanted to use remove unused CSS features by excluding some CSSs to have better speed results. Do you have any suggestions on which CSS cause this problem, which one should I exclude? Currently I am excluding the below ones:

    /wp-content/plugins/enlighter/cache/enlighterjs.min.css
    /wp-content/plugins/metronet-profile-picture/dist/blocks.style.build.css
    /wp-content/plugins/gp-premium/blog/functions/css/style.min.css
    /wp-content/themes/generatepress/assets/css/main.min.css
    /wp-content/plugins/lightweight-social-icon/css/style-min.css
    /wp-includes/css/dist/block-library/style.min.css
    /wp-content/plugins/subscribe-to-comments-reloaded/includes/css/font-awesome.min.css
    /wp-content/plugins/prismatic/css/styles-blocks.css
    /wp-content/themes/generatepress/assets/css/components/comments.min.css.both-sidebars
    .enlighter-t-wpcustom
    .enlighter

    Thanks,
    Onur

    #1965035
    Onur

    I excluded below ones but no luck.

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

    #1965183
    David
    Staff
    Customer Support

    Hi there,

    where did you add the CSS to your site ?

    #1965793
    Onur

    Additional CSS part in customization.

    #1965876
    David
    Staff
    Customer Support

    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

    #1965894
    Onur

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

    #1965908
    Onur

    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

    #1965910
    David
    Staff
    Customer Support

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

    #1965911
    Onur

    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

    #1965919
    David
    Staff
    Customer Support

    Are you using any conditional loading of menu items ?

    #1965921
    Onur

    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.

    #1965929
    David
    Staff
    Customer Support

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

    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.

    #1965943
    Onur

    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

    #1966022
    David
    Staff
    Customer Support

    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.

    #1966458
    Onur

    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.

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.