[Support request] CLS issue with theme on Desktop

[Chloe]

Hi there

I am having an issue with CLS on the page and there is a layout shift with the element:

<div class="site grid-container container hfeed grid-parent">

As given in gtmetrix.

I have looked on the forums and mostly it refers to WP Rocket as an issue, but I am not using this. I use WP Fastest Cache.

I have found this below, but I am not sure how to rectify it? There is definitely a shift once the fonts load, but I am not sure if this is what is causing it.

https://generatepress.com/forums/topic/cls-and-lcp-issues/

Any advice would be really welcome.

Many thanks in advance.

Best wishes

Chloe

[Chloe]

Just to add, I have now this morning add a filter using instructions here: https://generatepress.com/forums/topic/add-font-display-swap/#post-993058

But I can still see a visible shift when I load the page before and after the fonts load. Is there anything I have missed?

I am not even sure if it is this causing the layout shift but it is the only thing that I can think of and is visible on load.

I have also added this:

.main-navigation ul ul {
  left: unset !important;
  height: auto !important;
}

to the CSS. Using the details in this post: https://generatepress.com/forums/topic/mega-menu-navigation-desktop-creates-high-cls/

[Chloe]

Since adding the CSS above, I am now getting a different CLS issue in GTMetrix:

<nav id="site-navigation" class="main-navigation sub-menu-right stuckElement" itemtype="https://schema.org/SiteNavigationElement" itemscope="" style="z-index: 100;">

Hope someone can help soon. Thank you.

[David]

Hi there,

So the main issue i see is the fonts are being loaded after the page is rendered. Which is causing the shift. Can you temporarily disable the cache plugin so i can take a closer look?

[Chloe]

Hi David

Thanks so much for your response.

I have disabled the plugin now.

Thanks again.

Chloe

[David]

Ok so the font loading time is the issue.
You may want to try loading them locally – this plugin can do that for you:

https://wordpress.org/plugins/host-webfonts-local/

Or there is the hand code method found here:

https://docs.generatepress.com/article/adding-local-fonts/

[Chloe]

Thanks David. This is great. I will try now and get back to you.

Thanks again.

Chloe

[David]

Fingers crossed 🙂

[Chloe]

Hi David

I have tried this, but unfortuantely it hasn’t worked and now the CLS is even bigger. 0.86 in GTmetrix. It is even more of a visible shift also.

Is there anything else that I can do?

Many thanks.

Chloe

[Chloe]

Actually, I have just done the test again and it is 0.56 still. So no change.

Let me know if there is anything else that I can do?

Many thanks.

Chloe

[David]

I believe theres an option in that plugin that adds Preload Above the Fold Fonts ?

[Chloe]

Which plugin? Fastest Cache?

[Chloe]

I can’t see anything in Fastest Cache unfortunately?

[David]

Sorry i should have said the OMGF plugin. Did you use the OMGF plugin for adding the Fonts Locally ?

[Chloe]

Oh ok cool. I added it the code way, but will try the plugin and let you know.

[Author]

Posts