Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

馃殌 [Story performance] Disable animations in first page under experiment #35356

Merged
merged 6 commits into from Jul 27, 2021

Conversation

mszylkowski
Copy link
Contributor

There's multiple ways LCP can get affected by animations on the first page:

  • Fade-in animations can delay the LCP until they are done
  • Slide-in animaitons can prevent the LCP from triggering on the animated element

There could potentially be more causes for LCP problems through animations, which is why we'll disable the animations on the first page. Launching the experiment for 5%

@mszylkowski mszylkowski self-assigned this Jul 22, 2021
@mszylkowski mszylkowski added this to In progress in wg-stories Sprint via automation Jul 22, 2021
@mszylkowski mszylkowski added this to In progress in wg-stories Performance via automation Jul 22, 2021
@amp-owners-bot amp-owners-bot bot requested a review from newmuis July 22, 2021 16:13
@amp-owners-bot
Copy link

amp-owners-bot bot commented Jul 22, 2021

Hey @gmajoulet, @newmuis! These files were changed:

extensions/amp-story/1.0/amp-story.js
extensions/amp-story/1.0/animation.js

Copy link
Contributor

@gmajoulet gmajoulet left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please report the experiment to the CSI pipeline otherwise we can't collect data

@mszylkowski mszylkowski changed the title 馃殌 [Story performance] Disable animations in first page under experimnet 馃殌 [Story performance] Disable animations in first page under experiment Jul 22, 2021
@@ -465,6 +465,11 @@ export class AmpStory extends AMP.BaseElement {
'story-load-first-page-only'
);
}
if (isExperimentOn(this.win, 'story-disable-animations-first-page')) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some thoughts on this:

  • The experiment needs to be enabled for CSI tracking BEFORE the LCP metric is sent. Is it the case here?
  • There are more cases where the animations are disabled (prefers-reduced-motion), I think it'd be interesting to capture this as well

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good Qs

For 1: This is added on the buildCallback of a story (which happens before layoutStory_()), so it should happen before the LCP metric is sent.
For 2: We can trigger the CSI flag if prefers-reduced-motion is enabled, since that will also "disable animations on the first page". I don't think it'd be accurate if some of the users that have the reduced motion activated count towards this flag being OFF.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

have you tested (1) or is it working thanks to the render service?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested it, it works

@mszylkowski mszylkowski merged commit f208239 into ampproject:main Jul 27, 2021
wg-stories Performance automation moved this from In progress to Done Jul 27, 2021
wg-stories Sprint automation moved this from In progress to Done Jul 27, 2021
@mszylkowski mszylkowski deleted the experiment_disableanimations branch July 27, 2021 19:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging this pull request may close these issues.

None yet

4 participants