My heading text is killing my LCP

  • Resolved mrprainx

    (@mrprainx)


    9 months, 3 weeks ago

    Hello. First of all: thank you for this great, easy and essential plugin.

    I’m struggling with the LCP score for several pages on my website. In all these cases, the LCP is my <h1> heading which is rendered extremely slowly (according to GooglePageSpeed).

    See a report here

    I’m using OMGF to optimize and host locally my Google Fonts and I’ve set the font-display option to Swap. Therefore, as far as my limited knowledge tells me, the <h1> should be served “immediately” to the user with the system font and then swapped with the Google Font, right? Why isn’t happening?

    I’ve also set the affected font (Roboto, 900) to be preloaded, but nothing changed.

    I hope you can help me figure it out. Thank you again.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author DaanvandenBergh

    (@daanvandenbergh)

    I seriously doubt it’s the H1. I know that’s what Pagespeed is saying, but I think it’s thrown off by everything else going on above the fold.

    What happens if you move the video below the fold? Does it still say the H1 is the issue?

    Thread Starter mrprainx

    (@mrprainx)

    If I move the video below the fold, it says that is the text content itself the LCP.

    See a report here

    In this specific case is a <li> item. I’m struggling to understand what’s going on.

    Plugin Author DaanvandenBergh

    (@daanvandenbergh)

    Hmm, I think you need to look at the prioritization of your resources. It’s simply stating that it had to wait 4-5 seconds, before it could finally proceed with rendering the text. So, your solution lies in the prioritization of the resources on the page.

    I suggest you start cleaning up from bottom to up to decipher what’s blocking your rendering.

    Make sure you lazy load all static assets below the footer, i.e. add the loading="lazy" attribute to any images (e.g. the media images and logo’s in the footer menu) below the footer. Any JS or CSS that’s not needed to render the top menu, enqueue it in the footer.

    Once you’ve gotten rid of these things, the LCP value should already have dropped, and step by step you’ll get closer to what’s the culprit here.

    Other than that, I don’t think this is an OMGF issue. You’ve setup the preload properly, and the display attribute is set to swap. So, as far as fonts go, you’ve done everything.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘My heading text is killing my LCP’ is closed to new replies.