Mobile Performance Strategy for Scroll-Narrative Sites

What this builds

A complete performance strategy document and code layer that sits between a scroll-narrative site and its animation toolkits, ensuring the site hits 60fps on a mid-range phone (Samsung A54, Pixel 7a, iPhone 12 class) even under thermal throttle. This is not a generic performance guide. It is specific to scroll-driven animation sites: pinned sections, parallax layers, scrubbed timelines, text reveals, and image sequences.

• A tiered rendering strategy: full/reduced/minimal based on device capability detection
• Layer budget enforcement (max 4 compositor layers on mobile GPU)
• ScrollTrigger count management with lazy creation and eager teardown
• Image strategy: format selection, lazy loading, decode timing, and canvas DPR capping
• Animation simplification rules: what to cut, what to keep, and in what order
• Thermal throttle resilience: detecting and responding to GPU frequency drops
• A real performance audit script that runs in DevTools and reports pass/fail per budget line