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’ll 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
@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

@mszylkowski mszylkowski Jul 22, 2021

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
@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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants