SSWConsulting / SSWConsulting/SSW.Website

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

Open
#4,901 0 comments 0 reactions 1 assignee View on GitHub

@isaaclombardssw is already working on this.

Since Jul 23, 2026.

Type: Refactor
Dominant language
HTML
Stars
14
Forks
10
Avg merge
13h 51m
Merged PRs (30d)
38

Description

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

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.