CLS and LCP Issues

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

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.

Hi there,

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

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.

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

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" >

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

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

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.

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

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.

Hi Elvin,

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

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.

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!