[Support request] New large CLS in desktop mode

Home Forums Support New large CLS in desktop mode

  • This topic has 14 replies, 3 voices, and was last updated 4 months ago by David.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1448503
    Henry Bowman

    Google search console on Sept 1st found a new CLS issue on our desktop version only. This seems to be stemming from the lastest or second to latest update on the generate press theme. We have tried to play with some of the new stuff to fix the error, but to date we can not figure out what is causing this one issue.

    Agg. CLS 0.25
    Cumulative Layout Shift 1.882

    - h.k. Bowman

    #1448671
    David
    Staff
    Customer Support

    Hi there,

    can you provide a link to your site so we can see what the issue is

    #1449039
    Henry Bowman

    sure

    - h.k. Bowman

    #1449235
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    My guess is that image at the top lazy loading is causing the issue.

    Your lazy loading plugin should have the ability to ignore certain images if set that way – can you try making it so that image (or any image above the fold) is ignored?

    #1449293
    Henry Bowman

    well yes we were looking at the headed background as well. We are using Rocket and it’s had updates every other day for weeks. We have had the same background image for over a year, with no modifications on the customizer.
    I know we can adjust the lazy load on the page, but I’m not sure if we can single out one image.

    - h.k. Bowman

    #1449295
    Henry Bowman

    Yes currently the problem is that the image is on every page of the site because it’s the background header typically only edited in the Generate press customizer, which WP-Rocket is not part of.

    - h.k. Bowman

    #1449300
    David
    Staff
    Customer Support

    Hi there,

    looking at the page speed insight report under the Avoid large layout shifts – all elements listed are the Woocommerce Blocks.

    To see whats going on with them, open the page in Chrome, right click inspect to open browser developer tools.
    Go to Network Tab – change it from Online to Slow 3G.
    Refresh the page you will see when the page first loads there is a much large space then required that gets filled later by the Woo blocks.

    This looks to be related to the lazyloader – its miscalculating the image sizes. You may want to ask WP Rocket what can be done to resolve that.

    #1449304
    Henry Bowman

    Well a few weeks ago we ditched the sliders because they were wrecking our mobile score and we replaced them with the product blocks. we just turned off the lazy load function site wide and our score is in the 99% for mobile and desktop, BUT the CLS stat is still flagging an error in search console and in page speed insights even though our over all score is near perfect.

    - h.k. Bowman

    #1449693
    David
    Staff
    Customer Support

    Can you disable the Critical CSS option in WP Rocket.

    #1449803
    Henry Bowman

    They don’t have a way to do that listed. Of course our overall score for mobile and desktop has never been this good, so we hate to loose that.
    IS there maybe a way to set the header background size differently so it doesn’t cause the CLS?

    - h.k. Bowman

    #1449814
    David
    Staff
    Customer Support

    The main issue is NOT the Header its the resizing of the Woo Blocks.
    Critical CSS is an option explained here:

    https://docs.wp-rocket.me/article/1266-optimize-css-delivery

    #1449821
    Henry Bowman

    down the rabbit hole we go…lol Turning off the Optimize CSS delivery does help the CLS but it then creates slower First Contentful Paint (FCP), Largest Contentful Paint.

    But what is more interesting is that on many of the other pages being flagged for the CLS, other than the home page, for example single product pages, there are no woo blocks and they still have the poor CLS speed

    - h.k. Bowman

    #1449868
    David
    Staff
    Customer Support

    Yeah i really wish optimization plugins stopped overselling one click features. Critical CSS is not something that can be ‘auto’ added it really is a nightmare.

    On that note – i am still seeing Critical CSS on that Product. Try clearing caches.

    #1450278
    Henry Bowman

    Yes, we re-enabled the critical CSS site wide, but the good news is that you can disable it per page, individually. We cleared the cache on that product page and disabled the Critical CSS. The page speed insights however did not improve much that we could see.

    - h.k. Bowman

    #1450404
    David
    Staff
    Customer Support

    Well there is still significant CLS on the Woo single product related to the Product carousel thumbnails being loaded after the first content paint. I think it may be best you talk with WP Rocket support as something in its settings thats deferring or combining codes is messing stuff up.

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