[Resolved] Mobile CLS Failing

[Ivaylo]

Hi,
I have CLS for mobile failing. Tested it through some tools and it looks like the logo or navigation are causing it.

I’m seeing this in the testing tool as the problem:

Related Nodediv.inside-navigation.grid-container
Related Nodediv#page.site.grid-container.container.hfeed
Related Nodea.ss-facebook-color::after
Related Nodea.ss-pinterest-color::after

Any help on how to solve this will be much appreciated.
Thanks,
Ivo

[Ying]

Hi Ivo,

I ran a lighthouse test for your site, and it does not look good, the CLS is not a big problem compared to the other metrics.
https://www.screencast.com/t/Olg2x3yu

I think you have too many plugins activated, and the ads take a big part in the performance as well.

I would suggest considering removing some of the plugins first.

[Ivaylo]

Thanks, but let us focus on my support ticket about CLS. ( Other metrics are taken care of and I’m getting better results )

So, could you please check about CLS failing on mobile as written in my initial post?

[Ying]

All the metrics are actually related to each other.

It’s not possible to have a good score on CLS only while the others are failing.

And as the page is loading, there’re many errors showing up and it just crashed the lighthouse test interface:
https://www.screencast.com/t/dP5aT2dL

It’s very difficult for us to offer support in terms of performance as there’re 3rd party plugins and scripts involved.

We’ll try our best to point you to the right direction, but we can not provide full solution as it’s beyond what the theme can control.

Please refer to this article on what’s included in GP premium support forum:
https://generatepress.com/what-support-includes/

I would suggest disabling as many plugins/scripts as possible to start with.

[Ivaylo]

I’m not asking about support for my plugins or to audit my website!
I have a very specific question – does GeneratePress by loading the navigation or the logo ( as I see with my eyes that the logo is causing a major shift ) cause the movement? Please check this and answer this – do not send me more explanation about ads, plugins, WordPress and general topics.

If you are not able to trace the problem, please forward this to David or someone else with more expertise.
Thanks!

[Ying]

In this case, can you disable all plugins except GP premium, and disable all scripts added by GP hooks if there are any, then we can do another round of testing.

If there’s any CLS caused by GP, we will fix it.

By the way, David’s on vacation, I can forward your topic to him if you are ok with waiting 🙂

[Ivaylo]

Thanks, please forward this to David. I think the breadcrumbs, logo, navigation or the header are causing the shift. So he might be able to help me.

[Ying]

Sure, I will 🙂

[Ivaylo]

I have hired someone to take a look and he fixed it with the following CSS add to Additional CSS:

	/* FIXed CLS issues on mobile*/
	@media only screen and (max-width: 600px) {
 
	
		.site-header {
    position: relative;
    min-height: 95px;
}
	}

Please let me know if this is the correct way to implement it and won’t break anything else on the theme.
I can also see Breadcrumbs are causing CLS. Is it possible to reserve two lines for them as sometimes they are longer and make the layout shift when instead of one line, two lines are needed for all the text to be displayed.

[David]

Hi there,

the issue you’re having is primarily related to the Font Loading, your font CSS has the font-display: swap; property.
This means the browser loads its system font whilst the actual google font downloads. The layout then shifts to accomodate the differences in the fonts display.

If you selected the fonts in Customizer > Typography, you can change the Font Display property to Auto but there may also be other optimizers that are involved and adding that property…

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ivaylo]

Hi David,
I don’t have Font Display Property in Customize-Typography

[Ivaylo]

This is what I get from Lighthouse speed test:
Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. Learn more.
Ezoic
Use Ezoic Leap and enable Optimize Fonts to automatically leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading.

[David]

Yeah, this Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading is a common opportunity listed by Google.
And using the display=swap property ( which I assume Ezoics optimize fonts is doing ) will tick that box.
But, unless the font is near identical to the devices system font, or the google fonts loads incredibly fast then it can cause CLS.

For font optimization i would:

1. Load the font locally:

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

2. DO NOT use font display swap.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ivaylo]

Thanks! I will see if I need to add local fonts or just use the Google fonts.

I’m using two fonts: Roboto and Montserrat and gone through Typography and deleted all the other options except font weight 500 and regular as I’m not using any other. However, I still see in my Dev Tools this:

<link rel=”stylesheet” id=”generate-fonts-css” href=”//fonts.googleapis.com/css?family=Montserrat:regular,500|Roboto:500″ media=”all”>
<link rel=”stylesheet” id=”generateblocks-google-fonts-css” href=”//fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,regular,italic,500,500italic,700,700italic,900,900italic&display=swap” media=”all”>

what is the second one and how to stop generateblocks to also not load all the different styles.

Does removing the non-used styles improves speed ( removes KB to download ) or not?

[David]

GenerateBlocks will only make a font request if you specifically tell a GB Block to do so, by changing that blocks Typography settings to include a Google Font.

Is there a specific page where that request is being made?

Yes, removing unused variants is always best as it will reduce the overall font-face CSS size and font files ( in some cases )

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts