Site logo

Archived topic

CLS and LCP Issues

25 replies · Started by Jarryd Salem on February 13, 2021

Viewing posts 16–26 of 26

Hi David,

That didn't solve the issue either unfortunately. Still getting a mix of the below issues for LCP:

< div class="page-hero" >
< h1 >
< p >

And this for CLS:

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

Have you tried using a mobile header logo that isn't as wide? The main issue I'm seeing right now is that the logo is too wide and is then pushing the mobile menu toggle down.

If that mobile header logo isn't so wide, it should prevent that jump.

Hey Tom,

That solved the CLS issue! Changed to a different logo in mobile header. Thanks so much.

Now just working on the last pieces of the puzzle - FCP and LCP for mobile. On Desktop all CWVs pass with flying colours.

Hey David,

That fixed the < div class=”page-hero” > issue, but LCP is still red flagged, and PSI is showing either < h1 > as the culprit on most posts, or < p > on some posts.

Do you still have the preload image functions in place ? If so can you temporarily remove them

Hey David

I think that last snippet you gave out may fix my issue also with LCP

apologies for my ignorance, what type of snippet should I configure (Java/CSS/HTML) and are there any special settings (such as 'Only run on-site front-end')?

Cheers

Andrew

Hi Andrew,

apologies for my ignorance, what type of snippet should I configure (Java/CSS/HTML) and are there any special settings (such as ‘Only run on-site front-end’)?

The code David provided is a PHP snippet.

You can set the code snippets entry to "Run snippet everywhere". You can leave priority blank/default.

Thanks Elvin

Alas, that did not fix my LCP issue with the hero image.

I will open a fresh support ticket (hope that's OK) as my issue may be a bit different, plus I have some hero image padding questions too.

That's quite tricky to deal with. No problem.

This archived topic is closed to new replies.