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

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

Home Forums Support Google PSi reports “Avoid large layout shifts 5 elements found”

Viewing 15 posts - 46 through 60 (of 83 total)
  • Author
    Posts
  • #1824942
    Onur

    Hi @David,

    .site-content .content-area {
    margin:auto;
    }

    This CSS has implications. It is not making the pages mobile-friendly. I have just figured out this and again removed this CSS and my desktop CLS has been increased.

    Trying to figure out how to solve this problem. Any kind of feedback and suggestions will be most welcome from GP team.

    Kind Regards,
    Onur

    #1825216
    Onur

    Hi @David,

    I applied the below CSS only desktop. Now, this is the kind of best solution for me but I am open to improvements. 🙂


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

    #1826292
    David
    Staff
    Customer Support

    That solution looks fine to me!

    #1938266
    Onur

    Hi Team,

    I really did not understand a problem which I faced recently. My recently created posts have almost 0 CLS but the old ones have CLS issues.

    Examples:

    Old Post (Has CLS issue): https://www.swtestacademy.com/xpath-selenium/
    Page Speed Insights: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.swtestacademy.com%2Fxpath-selenium%2F&tab=desktop

    New Post (No CLS issue): https://www.swtestacademy.com/lambda-functions-in-java/
    Page Speed Insights: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.swtestacademy.com%2Flambda-functions-in-java%2F&tab=desktop

    Both posts belong to the same theme and created in the same way but I did not understand what is the difference that causes this CLS issue.

    You can run even a google page speed insight tests see the results.

    If you find any clue, please let me know. It will be very much appreciated.

    Thanks,
    Onur

    #1938421
    Longinos

    Hi
    I take a fast look of pages…
    The page with CLS 1st display the menu and the content, both centered, then it display both sidebars and the content is displaced to the left. The page w/o CLS 1st display menu, content and both sidebars.
    Looking at the <head> both pages are diferent, page with CLS have a bunch of <meta http-equiv="origin-trial".... maybe these labels make the diff.

    Some others things:
    You have 2 link preconnect (for font.googleapis.com and gstatic) between <style> labels

    <style>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    </style>

    You have images lazyloaded (like java logo) but these images appears in the viewport, so you need to exclude these images from lazyload.

    hope this can help.

    #1938699
    Onur

    Hi Longinos,

    Thanks for your reply.

    The page with CLS 1st display the menu and the content, both centered, then it display both sidebars and the content is displaced to the left. The page w/o CLS 1st display menu, content and both sidebars.

    Why is this happening? I could not figure out the reason for the different loading behavior. Both pages are posts and have the same settings. Do you have any clue about this different loading behavior?

    Lazy loading and fonts are the same for both pages. I think the main problem is different loading behavior. Btw, in order to reduce the CLS, I am using the below custom CSS:


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

    without this, the CLS problem was worse. Maybe we can find better solution to make this CLS numbers almost 0.

    #1938862
    Longinos

    Hi
    I don´t know from where come the origin trial meta, but in the page whit CLS there have near of 20 of such labels, like:
    <meta http-equiv="origin-trial" content="A9RQ+LxFazAousxUwSCzaihJjHLO1UyjQp0teZKHl7WdbVjPDfHSKMd6D/ZI5MTjqClFycbl70EFd7cBJWXqKQEAAACBeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXRhZ3NlcnZpY2VzLmNvbTo0NDMiLCJmZWF0dXJlIjoiVHJ1c3RUb2tlbnMiLCJleHBpcnkiOjE2MzQwODMxOTksImlzU3ViZG9tYWluIjp0cnVlLCJpc1RoaXJkUGFydHkiOnRydWV9">
    The page w/o CLS don´t have it, so pages are not the same html code.
    As a personal experience big amount of data in the <head> html section may produce strange behaviours.
    Can you try to disable these meta labels?

    #1938961
    David
    Staff
    Customer Support

    Thanks Longinos!

    Hi Onur.

    advisable to check some of the things that Longinos raised.
    CLS can increase if there is a delay in loading content, so long pages or delays in resources loading can lead to greater CLS. Try resolving the issues mentioned first and if need be we can revisit.

    #1938987
    Onur

    Thanks to you all. I am trying to figure out where this http-equiv=”origin-trial” coming from and how can I disable it. Any feedback will be much appreciated.

    https://blog.stephaniestimac.com/posts/2020/10/what-the-heck-origin-trials/

    #1939382
    David
    Staff
    Customer Support

    Not sure where they are coming from – they are strictly used for developers to trial new features, i haven’t seen them in a live site before.

    You may want to temporarily disable plugins to see if one of them is adding them.

    #1939443
    Onur

    Thanks David, I am planning to try that when the site load is not high.

    #1940146
    David
    Staff
    Customer Support
    #1940219
    Onur

    I saw some custom fields which came from an old theme. I removed them but the results did not change. Also, I enabled and disabled all plugins rather than GeneratePress plugins. The weird thing is, if I create a new post, this problem is not happening but the old posts created previously in the old theme are problematic. There is something which causes this problem but I am still not sure what. I will investigate more and update you here if I find any clue.

    #1940229
    Longinos

    Hi Onur
    It maybe a no-brainer,but… can you take a look in the post code?
    I will say, edit the post with the code editor rather than with the visual one.
    Maybe these meta tags hare harcoded in the post and stored in the database.

    #1940235
    Onur

    Sure Longinos, I will do it and get back to here again. Thanks for the suggestion.

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