Skip to content

💸 Perf - Stop loading AOS on pages that don't use it #4901

Description

@joshbermanssw

Sub-issue of the AI for Business Leaders performance PBI. Part of the same main-thread cleanup pass.

Description

app/tina-client.tsx imports the AOS library and runs AOS.init({ duration: 1200, once: true }) plus AOS.refresh() in a mount effect on every page of the site, with an AOS.refreshHard() on unmount. Six block files additionally import aos/dist/aos.css.

AOS.init()/refresh() walk the DOM and measure element positions, which adds main-thread work and layout reads during hydration.

There are 12 data-aos usages in the whole codebase, and none of them are in any component this page renders (spacer, imageTextBlock, cardCarousel, accordionBlock, logoCarousel, breadcrumbs). The library, its CSS and its init cost are pure overhead here.

Proposed solution

  1. Move AOS init out of TinaClient and into the handful of components that actually use data-aos (testimonialsCard, youtubePlaylist, videoCards, consulting/benefits, training/presenterBlock, liveStream/liveStreamWidget, button/utilityButton), lazily importing the library there
  2. Remove the stray import "aos/dist/aos.css" lines from block files that have no data-aos attributes
  3. If AOS ends up used by only a couple of components, consider replacing it with CSS entirely and dropping the dependency

Acceptance criteria

  1. Neither the AOS JS nor its CSS loads on /events/ai-for-business-leaders
  2. AOS animations still work on the pages that use them (a testimonials page, a training page, and the live-stream widget)
  3. No console errors about AOS being uninitialised

Metadata

Metadata

Labels

Type: RefactorA code quality improvement e.g. Tech debt

Type

No type

Projects

Status
🤷‍♂️ Needs Triage

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions