🐛 [BUG] - Advice: Animation impacting Contentful Paint performance for SEO Article page

[alphonsotran]

Describe the bug

We've noticed a small issue affecting our SEO-focused Article pages. After running tests, it appears that the fade-in animation is blocking the LCP delaying the render of the hero image in the SEO Article page and impacting the Performance score. Here is a sample:

Performance score with animation

Performance chart with animation

We removed the feature here in this PR and noticed an improvement to the score. From our initial thoughts, it seems like the animation timing is tied into when the LCP is completed. It also seems like it only impacts the score above the fold.

• https://github.com/github/github/pull/331566

Performance score after animation removal

Performance chart after removing animation

We were wondering if Primer-Brand team has any suggestions on how we can improve the performance of the page while retaining or modifying the animation. We don't mind opting out of the animation in the meantime. Thanks!

Reproduction steps

For the Article Page with animation
1. Go to `https://github.com/resources/articles/devops/continuous-integration?_features=contentful_lp_seo_pages`
2. Open Lighthouse tab
3. Set Categories to "Performance
4. Click on "Analyze page load" 


For the Article Page without animation
1. Go to `https://github.com/github/github/pull/331566` and deploy to review-lab
2. Repeat steps 1-4 above replacing the domain with the review-lab's domain.

Expected behavior

Performance score is in the 90-100 range with animation.

Screenshots

No response

Browsers

Chrome

OS

No response

[rezrah]

Hey @alphonsotran 👋 - we've reviewed your request at Primer Brand office hours on 16 July.

• For the time being, we recommend disabling the animation until we're able to perform an audit on our animation system.
• Before we do that audit, could you please move the SEO pages over to reflect the Phase 2 visuals? This revision features different animations such as parallax effects, whereas the one you shared is Phase 1.
• From the reports you've provided there's a notable difference in CLS, which could be attributed to the transition value incorrectly referencing transforms. We'll look into this as part of our audit.

[alphonsotran]

I'll go ahead and disable the animations. We have begun phase 2 visuals now that phase 1 has wrapped up, so we'll be working on that in the next few sprints. Thanks @rezrah!