How to improve LCP score of website where h1 is the largest contentful element painted within the viewport

Question

LCP is coming 2.8 s and need to bring down. after checking PageSpeed Insights got to know h1 is the LCP.

<div class="election-heading">
<span><h1 style="min-height:33px;">उत्तर प्रदेश राज्यपालों की सूची</h1></span>
</div>

.election-heading {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
}

any suggestion would be helpful. for more clarification SS is attached

Answer 1

.election-guru-heading {
   color: #000;
   padding: 5px 0 15px;
   float: left;
   font-weight: 600;
   text-transform: uppercase;
}

Answer 2

There is lots of guidance in the Google Chrome team's Optimize LCP guide (full disclosure - I wrote some of this guide)

The first thing to do is understand why the element is taking a while to process. It is something on the page you need to optimise? Or more an infrastructure issue?

The Understanding your LCP section of the guide teaches you how to use the additional metrics in PageSpeed Insights to understand the LCP.

Is TTFB a large part of that 2.8 seconds? If so, that suggests it's not the page code itself but how the page is loaded. This could be due to the backend server being slow, or the user being far away from the server (in which case you might need to use a CDN), or the user getting to the page through multiple redirects (for example, when clicking on an ad to get there).

If TTFB is fast and FCP is slow then it takes a while for your page to render. Why is that? Is it a client side SPA app?

If TTFB is fast and FCP is fast but LCP is slow, then you can start to look at why. Is the H1 text injected by JavaScript? Or is it redrawn through some hydration effect for an SPA?

Your options for tackling your issue depends on which of these issues it is.

---

Edit as more info was provided

Your screenshoot shows that the data is for your entire origin and not just that URL. It may be that that URL is fast and there are other popular URLs on your origin (aka site) that are slow and dragging the origin number down.

However the Lighthouse section of the report does show a problem for this particular page with a 620ms TTFB (note this will not include any redirects so could be longer in real life) and then 1.6 seconds before the H1 is rendered.

Running the URL you provided in PageSpeed Insights myself I get a different LCP element on mobile. For me it's showing as a lazy loaded image (don't lazy load your LCP element). The LCP number at the top in the "Discover what your real users are experiencing" section will be an aggregation of what all your users are experiencing. So if many are getting the video element as the LCP element like my run was, then that's going to skew the LCP result accordingly.

But in general the site looks VERY, VERY busy. It downloads 31 MB of video and a further 10 MB of other JavaScript. It's going to be very difficult to get a decent performance on a page like this. I suggest you look at lazy loading heavy resources like this.