CLS issue with theme on Desktop

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/

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.

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?

Hi David

Thanks so much for your response.

I have disabled the plugin now.

Thanks again.

Chloe

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/

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

Thanks again.

Chloe

Fingers crossed :)

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

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

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

Which plugin? Fastest Cache?

I can't see anything in Fastest Cache unfortunately?

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

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