Animation on a page is resulting into false visual metrics

[amitdisha]

Have you read the documentation?

• [X] Yes, I've read the how to make a reproducable bug guide
• [X] Yes, I've read the how to debug my script guide

URL

NA

What are you trying to accomplish

Animations on a webpage are indeed interfering with visual performance metrics captured by tools like sitespeed.io. In this case what does Sitespeed.io recommend ? Need to check if sitespeed.io offers options to ignore or handle animations ?

What browser did you use?

Chrome

How to reproduce

Run sitespeed.io test for any webpage having animation like below css
.jss333 {
    color: #91B9FA;
    width: fit-content;
    border: 1px solid #91B9FA;
    display: flex;
    padding: 0 3px;
    animation: jss334 4s infinite;
    animation-duration: 4s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: jss334;
    animation-timeline: auto;
    animation-range-start: normal;

Log output

No response

[soulgalore]

Hi @amitdisha which of the visual metrics is false? Maybe you could use --browsertime.injectJs to inject some JavaScript that remove/blocks the element?

[amitdisha]

Thanks for your quick response. I will try above option but i doubt I will be allowed to inject js in production. May be will test in lower env Or disable animation as last option in lower env. Thanks

[soulgalore]

Yeah but what metrics do you mean is false/wrong?

Best Peter

[amitdisha]

Last visual change, visualchange99, 95 , 85. Actual value when animation is disabled is around 2s. But after enabling animation they come around 8 to 9s.

On Fri, 7 Jun, 2024, 5:07 pm Peter Hedenskog, @.***> wrote:

Yeah but what metrics do you mean is false/wrong?

Best Peter

— Reply to this email directly, view it on GitHub https://github.com/sitespeedio/sitespeed.io/issues/4180#issuecomment-2154657706, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJR3DQPQT46WCFZRAPJS4I3ZGGLPDAVCNFSM6AAAAABI6AVW7WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNJUGY2TONZQGY . You are receiving this because you were mentioned.Message ID: @.***>

[soulgalore]

But aren't that correct?

[amitdisha]

In my view, animations should be ignored while capturing visual metrics else it gives false alarm that page visual loading is very poor for end user experience.

[soulgalore]

Yeah but it's hard to distinguish why content change on the screen when you analyse a video? It would be a metric like lastVisualChangeWithoutCSSAnimations :) I think the workaround need to be to block out that part of the screen. Maybe we could come up with a way to do that more easily.