lighthouse
lighthouse copied to clipboard
GoogleChrome
NO_FCP due to animated content
FAQ
- [X] Yes, my issue is not about variability or throttling.
- [X] Yes, my issue is not about a specific accessibility audit (file with axe-core instead).
URL
https://keegandonley.com/blog/my-approach-to-connected-fitness
What happened?
When I run lighthouse on my website, I get an error that LCP is missing, so my performance score is 0. This started happening after I switched my images from using <img> tags and png files, to using <picture> tags with webp images and a fallback on the png.
Full report here: https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fkeegandonley.com%2Fblog%2Fmy-approach-to-connected-fitness
What did you expect?
I expected to see my performance score. Prior to my change it was in the mid-80s.
What have you tried?
I've tried running this both on web.dev and in chrome's dev tools. In the dev tools my results are even worse:
How were you running Lighthouse?
Chrome DevTools, WebPageTest
Lighthouse Version
8.4.0
Chrome Version
95.0.4638.54 (Official Build) (arm64)
Node Version
No response
OS
No response
Relevant log output
No response
Using the latest LH CLI with Chrome Stable (95.0.4638.54), I see the same FCP error. Using Canary (97.0.4681.2) I do not.
Can't say what the issue was, but it is resolved now. I'll see about us updating the version of Chrome we use for web.dev / Lightrider.
I downloaded Canary to try it out and I get no metrics at all, weirdly enough:
On my M1 machine I'm using Version 97.0.4681.0 (Official Build) canary (arm64)
and on my Intel machine Version 97.0.4681.2 (Official Build) canary (x86_64)
with the same results
Just to double check, does the bottom of the report say the Chrome version you expect?
When using the CLI, you need to set CHROME_PATH to use the correct Chrome. By default, it will use Canary (if installed), otherwise stable.
I can confirm it's using the version of Canary i'm expecting. I seem to have isolated my problem to the animations; my content animates in on load and if I disable that I get an LCP of ~3-4 seconds. What's odd is when I run the CLI I can see Canary open and I see my site rendering perfectly within a few milliseconds, but eventually it times out and reports no content was painted.
today I see using the CLI stable 96.0.4664.45 results in NO_FCP (but only sometimes!) and canary 98.0.4708.0 does not. I tried to do a bisect just to figure out what's going on but this flakiness makes it difficult.
I ran this locally to see the exit codes.
function runx_and_print_exit_codes() {
for ((i=0;i<$1;i++)); do
eval ${*:2} > /dev/null
echo "$i: $?"
done
}
runx_and_print_exit_codes 5 node lighthouse-cli --chrome-flags=--headless --quiet 'https://keegandonley.com/blog/my-approach-to-connected-fitness'
But, in LR (aka PSI) which uses 96.0.4664.45 it errors every time! Unfortunately we can't yet update to a newer version in LR.
and canary 98.0.4708.0 does not
OK so I finally saw it in canary too using the above script. It just took awhile because of the flakiness. sigh
Gotta love a good hard to reproduce bug. It seems to be related to my CSS animations somehow. I can create a branch deployment with animations disabled for comparison if that would help.
That would be helpful. If that turns out to be the issue then I can start trying to make a smaller reproduction.
oops, got a little busy and never had a chance to get this for you. Here's the preview deployment without animations: https://website-2-0-mr96oixpd-kdonley.vercel.app/
Testing https://keegandonley.com/blog/my-approach-to-connected-fitness, I consistently get the NO_LCP failure on Canary 98.0.4752.0 in DevTools. https://website-2-0-mr96oixpd-kdonley.vercel.app/blog/my-approach-to-connected-fitness works fine for me so the NO_LCP part looks like https://github.com/GoogleChrome/lighthouse/issues/10869.
I'm also reproducing the NO_FCP consistently, but only in DevTools for the desktop page. It looks like we don't see the FCP lifecycle event.
This is a trace from a successful run on the CLI: https://gist.github.com/adamraine/91cbf9dc0c6d391e4264129d457cd2d7
It's showing FCP and LCP as the same element (big image at the top):
.
I'm guessing whatever animation rules causing https://github.com/GoogleChrome/lighthouse/issues/10869 also affect FCP on this page for some reason.
On my machine, the FCP error seems dependent on the viewport size. Taking just performance traces over a page load, the FCP starts to disappear for viewports wider than ~1375px. Viewport height was fixed at 1273px.
FCP is missing in DevTools performance trace as well, so I filed a Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1278858
I still get this issue consistently in the current version: https://mattwthomas.com
It's a very minimal site. It used to be less than a second. I tested about a month ago with no issue. So, this is a new regression. It works fine if I disable animations.
@mwt I'm getting NO_LCP not NO_FCP so that looks more like #10869
Oops, you're right. I didn't notice this difference.