CLS issue with <div id="main" class="site-main">, how to get rid of that?

Hi everyone,
hope someone has an idea.

I have a large CLS (Content layout shift) when using hiero.
On the overview page where the blogposts get shown.

The issue comes most likely from a font that get’s loaded to late. I have tried deactivating everything around that but still can’t figure it out.

Maybe someone of you has experienced similar and has a hint how to get rid of the 0.18cls from
<div id="main" class="site-main">

Any recommendations or help is appreciated.

Cheers Julian

Hello Julian,

First thanks for using our Hiero theme!

Could you please share your website link/URL with us ? So we can do a inspection to see how your website is structured, do some tests on page speed tools and try to help you with this issue.

Kind Regards,

Rodrigo.

aThemes Support

Hi @rodrigo, thanks for the quick reply.

My domain is Projekt-Neuseeland.de

I figured the problem by checking gtmetrix. I have an almost identical clone of that website which has the problem a bit less, but still the cls exists there (german version cls for that main block 0.18/englisch version has a cls of 0.9 for the same block.

Clearest to see is on phone, but on desktop it exists as well. Looks like an issue with fonts or the dimensions that get assigned to that overview block.

Thanks for checking, Julian

PS: This is the first blogpost so you can see what block I mean.

Hello,

Thanks for the link!

The main issue is the footer that’s generating a large CLS in the main div of the website:

To see the footer causing the CLS:

  • Load the page and scroll until the footer
  • Open Google Chrome developer tools > Network Tab > Change “No Throtling” to “Slow 3G”
  • Reload the page again (in the footer position)

Since I couldn’t reproduce the same issue in my tests here. That seems to be caused by some extra plugin you have. Maybe the divi builder. In this case my suggestion for you is install this plugin Health Check & Troubleshooting – WordPress plugin | WordPress.org and enabled the Troubleshooting Mode. With plugin activated go to Admin Dashboard > Tools > Site Health and enable the troubleshooting mode by clicking in the blue button.

This way your website will “reset” by disabling all plugins and the active theme. But note this occurs only for logged users. Then, activate the Hiero theme again and test if the problem still persists (use the Google Chrome Developer Tools > Lighthouse to perform the tests). You can also enable the plugins one by one to discover what’s the plugin causing the issue.

We hope this helps!

Please try that and let us know if you need further help.

Kind Regards,

Rodrigo.

aThemes Support

Thanks for getting back.

I have done some further testing and came to the following conclusion (and solution).

I am using WP-Rocket and OMGF.

I had to change settings to the following, so that the CLS was completely eliminated:
OMGF:
Set up so that the needed fonts and weights get preloaded.
Exchange option for fonts on swap.

WP-Rocket:
In File Optimisation tab:
remove css-file-optimisation
tick remove unused css

Just in that combination then the cls is completely gone and it’s no flash of fonts anymore. As soon as I change a setting in OMGF or I tick the css-file-optimisation then I get the flash and so the CLS starts.

Marked as solved. Nothing to do with Hero.

Hello,

Great that you figured this out and share with us!

If you need further help feel free to contact us.

Kind Regards,

Rodrigo.

aTheme Support