[Resolved] Mobile CLS Failing

Home Forums Support [Resolved] Mobile CLS Failing

Home Forums Support Mobile CLS Failing

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #2357553
    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

    #2358038
    Ying
    Staff
    Customer Support

    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.

    #2358123
    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?

    #2358147
    Ying
    Staff
    Customer Support

    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.

    #2358405
    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!

    #2359154
    Ying
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #2359675
    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.

    #2360029
    Ying
    Staff
    Customer Support

    Sure, I will ๐Ÿ™‚

    #2364822
    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.

    #2365041
    David
    Staff
    Customer Support

    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…

    #2365060
    Ivaylo

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

    #2365103
    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.

    #2365139
    David
    Staff
    Customer Support

    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.

    #2365157
    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?

    #2365375
    David
    Staff
    Customer Support

    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 )

Viewing 15 posts - 1 through 15 (of 24 total)
  • You must be logged in to reply to this topic.