Slow CLS help

  • I have a really slow CLS 0.4sec and the main culprit is:

    ‘div class=”featured-image page-header-image grid-container grid-parent’

    and

    <div class=”site grid-container container hfeed” id=”page” style=”height: auto !important;”>

    What should I do to fix this?

    I read that I need to perhaps set height/width for all images, but I have hundreds of pages. Is there a single piece of CSS or a plugin that might do this?

    thanks

    • This topic was modified 7 months, 3 weeks ago by captainmet.

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

Viewing 12 replies - 1 through 12 (of 12 total)

  • Hi there,

    that is NOT the culprit, that is simply the HTML element that was shifted in the layout.

    In the Google PageSpeed report if you expand the CLS issue it tells you what is the cause:

    https://app.screencast.com/iEGzf7lgLuXpb

    You can see it lists 4 files were loaded late as they all have been commented: A late network request adjusted the page layout

    Each of those files are related to the Cache plugin you’re using. That plugin has a) combined main resources and b) deferred their loading. Which causes the layout shift.

    Speak to the support team of your Cache/Optimization plugin on how to resolve that issue.

    Thread Starter captainmet

    (@captainmet)

    Thank you for the detailed answer!

    Thread Starter captainmet

    (@captainmet)

    I removed the offending plugin, but now the culprit appears to be:

    js/jquery/jquery-migrate.min.js

    is that part of the theme?

    aswell as :

    themes/generatepress/assets/js/menu.min.js

    does this mean my menu is too big and it cant handle it on mobile?

    Ignore those as now you can see the real reason for the CLS. In the Pagespeed report you will see a filmstrip which looks like this

    https://app.screencast.com/7ZMMpxfaqIZFl

    You see after the featured image has loaded a big empty space is inserted which is an Advert placeholder. And that cause the layout shift

    You will need to address the issue with your advert provider.

    Thread Starter captainmet

    (@captainmet)

    Thanks for all your help, I’ve moved the ad placeholder, but I still have a CLS of over 0.4, but it looks like the logo and main image just loading epically slowly. I just dont know what else to do here. Any thoughts?

    ying

    (@yingscarlett)

    Hi there,

    The CLS you are looking at is got from the past 28 days’ data,?and can take that long to show the improved CLS values shown in the lab data.

    Thread Starter captainmet

    (@captainmet)

    I’m using pagespeed.web.dev which i think is live. It definitely changes somewhat whenever I make changes and recheck
    (I wasnt referring to CLS on GSC)

    ying

    (@yingscarlett)

    Check this:https://app.screencast.com/mm0qQaIgJjCK3

    Thread Starter captainmet

    (@captainmet)

    isnt that relating to “First Contentful Paint”?

    Alvind

    (@alvindcaesar)

    Hi @captainmet,

    That applies to other metrics too. It reflect the user experience over the trailing 28 days and are updated on a daily basis.

    Thread Starter captainmet

    (@captainmet)

    Thanks!

    Alvind

    (@alvindcaesar)

    No problem!

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Slow CLS help’ is closed to new replies.

Tags