How can I enhance the performance of a feature-rich learning app for students, especially when average JavaScript and UI frame rates were dropping below 30fps — causing noticeable UI jank, sluggish interactions, and occasional thread locks?
I began by implementing code splitting to reduce the initial bundle size and load only essential modules on app startup. This reduced memory pressure and improved the time to interactive for learners.
Next, I replaced inefficient flat lists with Shopify’s AwesomeList — a performant, virtualization-first list renderer — which noticeably reduced frame drops during large list scrolls. To scale this across the app, I built a custom wrapper library that standardized list performance optimizations and enabled consistent integration across multiple screens.
However, the cold start time remained high at around 8 seconds. Deep profiling revealed that the culprit was Eva Kitten UI’s large JSON theme file, which was synchronously parsed at runtime. I resolved this by adding Babel configuration tweaks that preprocessed the theme during build time — effectively reducing cold start time to under 1 second.
With these changes, both JavaScript and UI frame rates consistently stayed above 50fps, significantly improving the perceived responsiveness and fluidity of the app — even on lower-end devices.
