[Support request] CLS High On Default Templates (Product Pages)?

Home Forums Support [Support request] CLS High On Default Templates (Product Pages)?

Home Forums Support CLS High On Default Templates (Product Pages)?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1644915
    Milos

    Hi there,

    I just got GeneratePress Premium, and my goal when is to just make my new website by default be a fast website conforming to Google’s Core Web Vitals. While I know Insight scores are not necessarily a good indicator, my understanding is that CLS measurement is reliable, and a pretty critical part of what Google will look at for starting in May.

    I installed the Emerald theme, just to test things out before doing any customizations. The CLS on the home page is far below 0.1 on both mobile and desktop – so far so good. But when I go to a product page, CLS is 0.36, which is far above what Google recommends.

    http://epusdev.xxqjcxr49e-gok67yzrl652.p.runcloud.link/index.php/product/product-b/

    From loading the page myself, the issue is that the image is loaded after the text, and pushes the title and the content down.

    I can’t really check if I did something myself, because GeneratePress template demos aren’t on their own “site”, they are in some kind of preview wrapper, so they can’t be directly tested in Insights. I’ve disabled WP Rocket just to be sure it’s not something I’ve done, as I did see in other CLS conversations that some of the WP Rocket CSS settings are the culprit. Nothing has changed.

    So my question is, is there a way to get this down well below the 0.1 threshold? I would have just assumed the default templates would not have this issue to begin with, and the plan was going to be that I very slowly and carefully make changes and test that I didn’t screw up the optimized template. Is there a default GeneratePress Theme I should start from that would have close to 0 CLS for content and product pages?

    #1645489
    David
    Staff
    Customer Support

    Hi there,

    we have a fix for this coming in the next GPP Premium update (1.13). The alpha release for this is scheduled in the next few days.

    #1646131
    Milos

    Hi David, thanks for your response, that’s awesome to hear!

    Just so I have a rough timeline, what’s a typical time window between alpha and full release. I’m I know I can’t hold you to this for actuals, but just want to get a general idea.

    Thanks!

    #1646636
    David
    Staff
    Customer Support

    it varies but generally 3-4 weeks.
    In the meantime try adding the CSS i provide here:

    https://generatepress.com/forums/topic/cls-issues-woocommerce-product-gallery/#post-1493002

    It should resolve the CLS – let me know.

    #1648405
    Milos

    Hi David, that did resolve it for the main image. As soon as I add more product images, CLS goes back up though.

    Will GPP update resolve this part as well?

    #1648931
    David
    Staff
    Customer Support

    That issue is a problem with the Woocommerce thumbnail carousel, and needs to be resolved by Woo – open GitHub issue here:

    https://github.com/woocommerce/woocommerce/issues/25461

    #1839493
    johnaps

    Hello!

    I have the same issue on my website product pages!
    And the suggested https://generatepress.com/forums/topic/cls-issues-woocommerce-product-gallery/#post-1493002
    code
    doesnt work!

    I am facing this problem both on desktop and mobile!

    https://softe.kinsta.cloud/%CE%BA%CE%B1%CF%84-%CE%BF%CE%AF%CE%BA%CE%BF%CE%BD-%CE%BD%CE%BF%CF%83%CE%B7%CE%BB%CE%B5%CE%AF%CE%B1/%CE%B2%CE%BF%CE%B7%CE%B8%CE%AE%CE%BC%CE%B1%CF%84%CE%B1-%CE%BA%CE%B1%CF%84%CE%AC%CE%BA%CE%BB%CE%B9%CF%83%CE%B7%CF%82/%CE%B1%CE%B5%CF%81%CF%8C%CF%83%CF%84%CF%81%CF%89%CE%BC%CE%B1/aerostroma-katakliseon-me-aerokipseles-ac100/

    And i dont think it is css issue, maybe something to do with how the product-image html element is being loaded???

    (P.S.: i have tested with all optimization plugins off and still the same problem, i also have tested with gp-main theme and not my child to be sure its not something i have done!)

    #1840479
    Elvin
    Staff
    Customer Support

    Hi johnaps,

    It doesn’t look like the scripts are optimized. The page is loading A LOT of scripts/styles and some of them are involved in the layout so if one loads a bit late, it causes CLS.

    Here’s a suggestion.

    Try disabling all plugins and test the performance result on Google PSI. This is to have a base performance.

    You then enable each plugin one by one, doing a Google PSI test for each plugin you activate. This is so you can find out which plugin causes CLS. Once you find it, get the related stylesheet and set it for critical CSS so it loads earlier.

    A wise man once said:
    "Have you cleared your cache?"

    #1840595
    johnaps

    Thank you Elvin!
    I have already tested disabling any kind of plugin that would potentially have anything, to do with this!
    The reason i wrote in this post is because i saw the product image cls issue i also have, that i came across in this thread, as well as many others here on gp forum!

    Also i dont know know what it has to do with my cls problem that i have a lot scripts and styles!
    Actually there arent much style on product-pages and as for the scripts, i think it is an ok number for an advanced ecommerce!

    But i ‘ll form my response into a question!
    Are you sure that the problem described from the author of this post and many similar, is now gone?
    Then and only then i can begin to find on my own what might be the problem….

    But if the problem isnt something that has been patched, as i originally said, David’s solution https://generatepress.com/forums/topic/cls-high-on-default-templates-product-pages/#post-1646636
    doesnt work for me!

    Any other ideas maybe?

    #1840757
    David
    Staff
    Customer Support

    Hi there,

    the issue you’re having is unrelated to this particular issue.
    Can you raise a new topic – and then we can take a closer look.

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