[Support request] CLS and LCP Issues

Home Forums Support [Support request] CLS and LCP Issues

Home Forums Support CLS and LCP Issues

Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #1657379
    Jarryd Salem

    Hi team,

    Just redesigned our site from a custom-coded theme to GPP with GBP. Loving it so far, but still trying to hit a few main targets. Namely core web vitals.

    Main issues we’re coming across are CLS and LCP on mobile. On desktop it’s performing great.

    For LCP the main issue appears to be this line:

    < div class=”page-hero” >

    For CLS we’re having 5 elements cause issues. Main ones are:

    < div class=”site-content” >

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

    <h1>

    Using WP Rocket for our cacheing. Have disabled optimise CSS delivery and lazy loading, which has fixed some of the problems. Wondering if there are any other ideas that you might have on how we can dial down these last few issues. Thanks so much!

    #1658204
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Those elements themselves won’t cause any issues, but it’s possible that the content inside of them will.

    As of right now, the main issue I’m seeing is the font. Once the font is loaded, the change from the fallback to the correct font is causing a shift as the correct font seems to be a bit larger.

    If you use a system stack as a test, what do your scores look like

    #1658280
    Jarryd Salem

    Hey Tom,

    Thanks so much for the reply. Much appreciated.

    I’ve swapped out the fonts and it does look to have improved some things for CLS, which is fantastic.

    I’m still receiving one large element for LCP though, which is loading really slowly. According to PSI, it’s this line still:

    < div class=”page-hero” >

    Other than removing the page hero completely (I’d like to keep it), could there be another option to fix this? Thanks mate.

    #1658706
    David
    Staff
    Customer Support

    Hi there,

    are your Header Elements using the Featured Image for their backgrounds ?

    #1659516
    Jarryd Salem

    Hi David,

    Yes we’re using featured images for the Header elements. However we have the same issue when it loads a page without a featured image and instead relies on the element background image.

    #1659693
    Elvin
    Staff
    Customer Support

    Hi there,

    Try optimizing ALL your images. Background image is known to affect LCP as well.
    https://web.dev/optimize-lcp/#slow-resource-load-times

    A wise man once said:
    "Have you cleared your cache?"

    #1659835
    Jarryd Salem

    Hi Elvin,

    We do properly size and optimise all our images, and run everything through ShortPixel as well.

    But to your point, I just uploaded a 5kb white image properly resized and optimised to a page to run a test. LCP is 5.2 seconds using this code still:

    < div class=”page-hero” >

    #1660494
    David
    Staff
    Customer Support

    Try preloading the featured image with this snippet:

    add_action( 'wp_head', function(){
      $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full');
      if ($featured_img_url) {
        echo '<link rel="preload" as="image" href="'.$featured_img_url.'"/>';		
      }
    });
    #1661143
    Jarryd Salem

    Thanks David. I added it via the Snippets plugin, and it hasn’t had any effect on LCP.

    #1661562
    David
    Staff
    Customer Support

    Made a change to the code above – sorry it was calling for the Large image attachment not the Full.
    Try that and let me know.

    #1662677
    Jarryd Salem

    Thanks for changing the code. Unfortunately it’s had no effect on our LCP.

    #1663921
    Elvin
    Staff
    Customer Support

    Is the background image you use on the page hero a Custom image rather than a page’s featured image?

    If so, you may have to manually preload the background image you use.

    Let’s do some tests:

    Can you try making a Hook element and place this code:
    <link rel="preload" as="image" href="https://www.yoursite.com/wp-content/uploads/2018/08/NOMADasaurus-Adventure-Travel-Photography-Blog-1.jpg"/>

    Note: on the href change yoursite to your proper domain. I didn’t include the url to your site for your privacy.

    And then set the hook to wp_head with the display rule location set to Front Page?

    We then check if the LCP improves. Let us know.

    A wise man once said:
    "Have you cleared your cache?"

    #1663988
    Jarryd Salem

    Hi Elvin,

    Thanks again for that. Unfortunately still no changes to LCP, same element being recorded.

    #1664175
    David
    Staff
    Customer Support

    Hmmm… i am not sure if it is the image thats the issue – trying to replicate the issue locally and having and hard time doing that.

    Can you remove all the snippets provided so far, then try this one:

    add_action( 'wp_head', function(){
      $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'medium_large');
      if ($featured_img_url) {
        echo '
        <style>
        @media(max-width: 768px) {
          .page-hero {
            background-image: url(' . $featured_img_url . ');
          }
        }
        </style>';		
      }
    });

    This will add an inline style for mobile hero.
    If that fails then the issue has to be somewhere else.

    #1667349
    Jarryd Salem

    Hi David,

    That appears to have fixed the problem for the < div class=”page-hero” > issue on most pages. Thanks for that!

    It’s now registering the <h1> as the culprit of LCP problems now, with <p> happening on some pages. I’ve tried to solve the issue by switching to system fonts rather than Google fonts and using font-display: swap; but it’s still flicking up a notice.

    For CLS, we’ve managed to solve the majority of issues, but this one still keeps coming up:

    < button class=”menu-toggle” aria-controls=”mobile-menu” aria-expanded=”false” >

    Thanks again for your help guys. Much appreciated!

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