[Support request] CLS and LCP Issues

[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!

[Tom]

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

[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.

[David]

Hi there,

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

[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.

[Elvin]

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

[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” >

[David]

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.'"/>';		
  }
});

[Jarryd Salem]

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

[David]

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.

[Jarryd Salem]

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

[Elvin]

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.

[Jarryd Salem]

Hi Elvin,

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

[David]

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.

[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!

[Author]

Posts