Help with cumulative layout shift (CLS)

  • Resolved daisybook

    (@daisybook)


    4 years, 2 months ago

    When I load pages in my Hestia site, I am getting significant cumulative layout shift (CLS).

    According to lighthouse, most of the problem is caused by this DOM element on the home page:

    <section class=”hestia-features ” id=”features” data-sorder=”hestia_features”>

    Looking at the site visually, I can see that the image containers under the ‘recent posts’ section change dimensions after the images actually load. I have tested on Chrome and Safari and the issue consistently occurs on both.

    What can I do to address this problem? E.g. is there an element I should be including as an inline/preload element to overcome this issue?

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter daisybook

    (@daisybook)

    The other place I can visually see CLS happening is the space above the features section (which is small during loading and suddenly increases when the page has loaded). It also occurs with the Big Title section (which is small and suddenly increases as well) but I have disabled that on my site because it makes the page SO jumpy.

    Thanks in advance for any help anyone can offer!

    • This reply was modified 4 years, 2 months ago by daisybook.

    Hey @daisybook,

    Thanks for using the Hestia theme.

    Seems like you have already addressed this issue as I have just checked the performance of your website and CLS is really minor:
    https://ibb.co/k2ftVfD

    Thread Starter daisybook

    (@daisybook)

    Hi @bvytis – thanks very much for checking in to help! No, I haven’t fixed the issue – at the moment I have tried to overcome the impact to users of the site by caching the static page. It hasn’t worked for mobile so if you run the usability test there you can see the CLS. Or if you bypass the caching. (I can turn the caching off if someone is looking into it for me! But I didn’t really know if anyone would be able to help me so have been trying to fix it for a week and this workaround is my poor patch…)

    Thread Starter daisybook

    (@daisybook)

    Here are two screenshots of the page loading taken a second apart without trying to hide it with the preloaded cache – you can visually see the CLS happening in the space above the ribbon title, it’s quite significant.

    https://ibb.co/Z8gcN1T
    https://ibb.co/2jyYG1q

    Thanks!

    Thread Starter daisybook

    (@daisybook)

    And this is the element Lighthouse has flagged as causing most of the shift on the homepage (Hestia Features):

    https://ibb.co/Hp5Z81Y

    • This reply was modified 4 years, 2 months ago by daisybook.
    Thread Starter daisybook

    (@daisybook)

    Hi – my CLS problem in Hestia is an ongoing issue. Has anyone else experience/solved this issue? Or has anyone moved easily from the Hestia theme to another comparable theme?

    I’ve uploaded an image of the gtmetrix assessment that identifies the elements as coming from the big title section <div class=”row hestia-big-title-content”>

    https://ibb.co/y8XDRMB

    Any suggestions gratefully received, I am happy to experiment…

    I’m also trying to sort this issue on Hestia. The Front Page Big Title row is adjusting.

    Hi @daisybook,

    On your website provided I see that CLS is now pretty low, it’s – 0.1

    To reduce it even more – you can try to apply this CSS:

    .home .main {
    margin-top: auto!important;
    }

    @rtaxerxes,

    Could you provide the URL of your website?

    Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Help with cumulative layout shift (CLS)’ is closed to new replies.

Tags