[Support request] CLS shift, Page layout

Home Forums Support [Support request] CLS shift, Page layout

Home Forums Support CLS shift, Page layout

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1525206
    Henry Bowman

    I’ve been working on my CLS issue for a while now. It is the last bit I currently need to address for a better search console score. Currently what is creating the bad score on my home page is one wordpress product block and according to page insights, the paragraphs of text on the page.

    This struck me as odd. Can there be a more stright forward thing on the internet then a paragraph of text on a page?

    I went into the layout section of the customizer and set the page to full width, while not visually pleasing because there is no margin padding for the items on the page, this action eliminated all my CLS flags in page speed insights.

    My question is, how does having a full page width clear up the CLS and is there a way to have a full page width, and also some padding for the text and other items on the page so it doesn’t look like it’s falling off the screen?

    - h.k. Bowman

    #1525711
    David
    Staff
    Customer Support

    Hi there,

    with the padding removed ( because of the full width setting ) it would give the container some extra width, so if there is any shift in say the font styling that causes it to reflow it would be less noticeable in a wider container.

    If you want to set it back to default width ill take a look at whats behind the CLS issue.

    #1525759
    Henry Bowman

    The layout is set back to it’s default position at 1320px, we didn’t keep it the full width. The only other thing that was changed was the container Alignment was switched from “text” to “box”, and is still set to box. I’m not sure what that does or if it had any impact.

    - h.k. Bowman

    #1526678
    David
    Staff
    Customer Support

    Well thats a weird one…. if i test the site using Developer Tools in Slow 3G network mode i cannot see any significant CLS. If i run Chrome Dev Tools Lighthouse report it shows 0 CLS. Yet, in the Dev Tools Performance it shows a CLS flag that is related to slow loading scripts.

    Looking at the Page Speed Insights report it is pointing the finger at the Product Block on the page. The only reason i can see for this is the images are rendered at a slightly different size to the ‘expected’ size. What happens if you reduce the number of products being displayed? Eg. 4 or 5.

    #1527101
    Henry Bowman

    Well, the best case is from what I can see,is having 5 images in the product block. When I set it to 4 images it tanked the mobile rating to 35, when I put it back up to 5 images the mobile rating stays at 60

    What is the expected image size compared to what is displayed? I didn’t think the woocommerce product block would state an image size other than what the block was set to display. There are no settings to control this that I know of.

    - h.k. Bowman

    #1527559
    David
    Staff
    Customer Support

    The image sizes are 300px. But they are squeezed down into the columns to around 280px. Which could create a slight shift – hence my random question that reducing the number of product columns would eliminate that…. but that seems to demonstrate the CLS is coming from that.

    The only thing i see in the Performance monitor is some slow loading scripts.Maybe some JS is being deferred or coming from a 3rd party server. And this is flagged along side a CLS shift. The messed up part is – i can’t visibly see the shift….. very odd and something i can’t explain.

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