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
- 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
- Remove the stray
import "aos/dist/aos.css" lines from block files that have no data-aos attributes
- If AOS ends up used by only a couple of components, consider replacing it with CSS entirely and dropping the dependency
Acceptance criteria
- Neither the AOS JS nor its CSS loads on
/events/ai-for-business-leaders
- AOS animations still work on the pages that use them (a testimonials page, a training page, and the live-stream widget)
- No console errors about AOS being uninitialised
Sub-issue of the AI for Business Leaders performance PBI. Part of the same main-thread cleanup pass.
Description
app/tina-client.tsximports the AOS library and runsAOS.init({ duration: 1200, once: true })plusAOS.refresh()in a mount effect on every page of the site, with anAOS.refreshHard()on unmount. Six block files additionally importaos/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-aosusages 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
TinaClientand into the handful of components that actually usedata-aos(testimonialsCard,youtubePlaylist,videoCards,consulting/benefits,training/presenterBlock,liveStream/liveStreamWidget,button/utilityButton), lazily importing the library thereimport "aos/dist/aos.css"lines from block files that have nodata-aosattributesAcceptance criteria
/events/ai-for-business-leaders