question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Impact of animations on lighthouse v6?

See original GitHub issue

*In relation to Lighthouse v6 (in Chrome Canary)

I’ve seen much worse ratios that what I can obtain with v5.6, and what I’m finding is a big impact on any animations present in the front page, where these animations are merely visual

I believe to see that the Largest Contentful Paint (in mobile) seems to finish when any animation ends, as I see in the report a LCP value of ~7s (in this case), even though later in Performance I can see the label LCP appearing at ~800ms

Perhaps somebody could explain a little bit what would be the best way to add animations on the first page without affecting LCP, or if the suggested attitude is to eliminate any animation from the front page (?)

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7

github_iconTop GitHub Comments

2reactions
FractalHQcommented, Jun 1, 2021

All of my Svelte websites with hero animations are showing 10s+ LCP. Some don’t even have images. The actual load times are < 100ms, and this has been driving me bonkers. If there is anything I can do to help get to the bottom of this, some advice would be greatly appreciated!

0reactions
kuworkingcommented, Jan 24, 2021

@ciekawy I didn’t go deeper there

I can say that in my hands having an image (no animation) without React (with 11ty) causes going from 100s to 90s

But with React (with Gatsby) scores are more vulnerable, if I’m between 70s and 80s when there are images involved I’m happy. This is an ongoing issue though

*If you’re using Gatsby, there’s an opened issue about this

Read more comments on GitHub >

github_iconTop Results From Across the Web

Avoid non-composited animations - Chrome Developers
When an animation can't be composited, Chrome reports the failure reasons to the DevTools trace, which is what Lighthouse reads. Lighthouse ...
Read more >
What Is Speed Index In Lighthouse? - Mindspun
In Lighthouse v6 and 7, Speed Index had a weight of 15%; however, ... Fonts have one of the biggest impacts on page...
Read more >
Improve Website Performance with Page Speed Insights from ...
Faster interaction times can improve your site ROI. Lighthouse audits highlight content and/or scripts that impede end-users interaction with ...
Read more >
Do we really need to care/obsess about Lighthouse scores?
You score changed suddenly because lighthouse v6 launched and now the tool focuses on web vitals. So according and metrics changed.
Read more >
lighthouse/changelog.md - UNPKG
The CDN for lighthouse. ... 3, [Full Changelog](https://github.com/GoogleChrome/lighthouse/compare/v6.1.1. ... 30, * report animations not run on compositor ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found