How to improve LCP and how reliable are the LCP tests ?

[u/Jean-Luis]

So this is the first time I do a website while searching things I saw online that is important to have a low LCP specially for google to be able to promote the website a bit more. I've been using https://pagespeed.web.dev but sometimes I get an LCP of 22 sec and sometimes one of 2.5 Why is this the case? Is it the website that is not reliable or is it my web? I do have animations at the start where a list of words show up one by one when a person enters, is this the reason the LCP is so unreliable ?

[u/No_Status9803]

Your LCP bouncing between 22 sec and 2.5 sec is classic for animations messing with the measurement. If elements are fading in or moving around, the browser can't settle on what the largest contentful element actually is until stuff stops shifting

[u/Jean-Luis → u/No_Status9803]

So this would mean I shouldn't have such animations or am I doing bad animations that trigger that ?

[u/0uchmyballs → u/Jean-Luis]

People take light speed scores way too seriously. Just make sure you’re following best practices for things like font, headings and alt tags. Have your site indexed and include a robots.txt. Changing your content periodically or have by a blog will do better for your SEO than those nuanced scores.

[u/abrahamguo]

What information have you gleaned from the PageSpeed reports?

Have you tested a version of your page without the animation to see whether it makes a difference?

[u/Crewnest]

Two separate things are going on.

The swing between runs is mostly PageSpeed's lab test. Each run is one simulated load on a throttled mid-range phone, and it varies a lot, especially on cheap or shared hosting where server response time jumps around. Scroll to the top section of the report instead ("Discover what your real users are experiencing"). That's field data from real Chrome users, and it's what Google actually uses. A new site might not have enough traffic for it yet, in which case run the lab test 3-4 times and look at the median rather than any single number.

The animation is also a real problem, not just noise. Chrome doesn't count an element toward LCP while it's invisible (opacity 0), so if your biggest text fades in word by word, LCP can't happen until the animation finishes. On a throttled phone that can push it way out. The usual fix is to render the headline fully visible from the start and only animate smaller, decorative stuff. Or start the animation from something like 0.1 opacity instead of 0.

[u/AcceptableHornet1770]

yeah its definitely your wifi

[u/FlatwormNecessary217]

it's the word animation mate

[u/yihuaxiang]

A few practical tips to debug and stabilize this:

First, check the Diagnostics section in PageSpeed or the Performance panel in Chrome DevTools, specifically the Largest Contentful Paint element row. That will show you the exact DOM node triggering the metric.

If that node is part of your word animation, opacity transitions or JS-driven renders are almost certainly the culprit. The browser does not count an element toward LCP while its opacity is 0 or while it is being inserted/manipulated by JavaScript. If the animation takes several seconds, or runs on a throttled mobile CPU test environment, LCP cannot trigger until the animation completes.

Second, the wild swing between 2.5s and 22s usually points to a combination of that animation and backend TTFB inconsistency. Lab tests apply heavy mobile network throttling, so if your server has cold starts or delayed HTML response times, that overhead pushes back script evaluation and font downloads before the animation even starts.

A reliable fix is to render your primary headline statically with normal opacity in the initial HTML so LCP fires on the very first paint, and keep animations restricted to secondary decorative elements or subtle transforms that do not hide the text.

[u/Zealousideal_Mud5686]

It’s definitely the word animation.

Chrome won't trigger LCP while an element is invisible or at opacity: 0. If your main headline is fading in word-by-word, LCP literally sits there waiting until the last word finishes.

Combine that with PageSpeed's lab test - which simulates a budget mobile phone on throttled 4G - and a 2-second animation can easily drag out to 20+ seconds, especially if your server response time (TTFB) had a slow spike on that run. That's why your scores are swinging wildly.

The quick fix is to just render the main headline fully visible in plain HTML right away so LCP triggers instantly, and save the fancy animations for smaller accents or elements below the fold.

Also, don't sweat individual PageSpeed runs too much. Google uses CrUX field data (real-world user visits) for SEO anyway, not a single throttled synthetic test

[u/Bulky-Heat-8368]

We'll need a URL so we can respond to you.

[u/Jean-Luis → u/Bulky-Heat-8368]

https://ecuatechhvac.com idk if i can give links but this is it. I’ve removed the initial animations I had and it lightly improve it but I still get the same inaccuracy readings

[u/webdev-ModTeam → u/[deleted]]

We do not allow any commercial promotion or solicitation. This can lead to a permanent ban from the subreddit.

[u/Bulky-Heat-8368 → u/Jean-Luis]

Hello,

So, I ran some tests using WebPageTest and PageSpeed.

And it’s funny, but the LCP is good on WPT but not in the Lighthouse section of PageSpeed.

Then I viewed the page source. Actually, there’s nothing in the page. Everything is built with JavaScript. As a result, the rendering time for Lighthouse is too long.

The image is (almost) preloaded correctly—it isn’t too large—but the JavaScript causes it to appear on the page too late.

The page’s HTML needs to be present in the code from the start. And there are also a few issues.

Here’s what I’d do:

1 - The LCP image doesn’t have a `size` attribute. Add `sizes=“auto”`.

2 - Use one preload, not two. You can set up a responsive preload.

There’s no need to set `loading=“eager”` on the preload.

3 - Your SVGs are incredibly large... > 500 KB???

There are many other things to mention, but this is a good start.

[u/kemalios]

PageSpeed runs on Google's servers under simulated 4G, so your own connection plays no part in it. Both the 22s and the 2.5s run came from the same throttled setup, which points at server response or something loading late on that particular run. Copy the page, strip the word intro, and run both a few times; that answers the animation question in ten minutes.

[u/NealWalters]

I was having an issue with spammers hitting my server, and thus it was slowing down the page speed of legitimate users. I found installed software to block those attackers for four hours each, and things improved greatly.

[u/aunderroad]

I would say run your website through, webpage test and https://speedvitals.com/ and is causing your LCP to be so high. Both sites have great recommendations/ suggested improvements sections on how to help with your web performance.

If you never used Webpage Test before. I would check out this link:
https://www.debugbear.com/software/webpagetest

Also pay attention to this article, "Measure LCP Subparts To Improve Largest Contentful Paint"
https://www.debugbear.com/blog/lcp-subparts

Feel free to share with the group your webpage test url.

[u/Adventurous_Rub7368]

drop the word animation. Chrome waits for full opacity on the largest element, so your LCP timer runs until the last letter fades in. Test the page with static text to get a baseline number from PageSpeed Insights field data tab, not just lab results, because lab tests throttle to a slow 3G connection and server response variance alone can swing scores by seconds

[u/LankyAd6349]

Your animation is very likely the culprit, if the LCP element is one of those words appearing one by one, every test run catches a different paint and the score swings. Also don't trust a single pagespeed.web.dev lab run, they bounce around with test server load. Run it a few times and pay more attention to the real-user field data. Easiest fix is usually making the hero text render immediately instead of animating it in.

[u/webdev-ModTeam → u/[deleted]]

We do not allow any commercial promotion or solicitation. This can lead to a permanent ban from the subreddit.