Mobile App Performance Users Actually Feel
60 FPS on flagship Samsung means nothing if your app janks on iPhone SE and budget Android. Performance work starts with measurement—Instruments, Android Profiler, and real-device Firebase Performance traces.
List and Image Optimization
Virtualize long lists—FlatList with windowSize, maxToRenderPerBatch, and stable keyExtractor. Never map 500 items naively. Images dominate memory: serve WebP/AVIF from CDN with width params matching display size, not 4000px originals in a 80px avatar.
// React Native FlatList tuning
<FlatList
data={items}
keyExtractor={(item) => item.id}
initialNumToRender={10}
maxToRenderPerBatch={8}
windowSize={5}
removeClippedSubviews={true}
getItemLayout={(_, index) => ({
length: ITEM_HEIGHT,
offset: ITEM_HEIGHT * index,
index,
})}
/>Startup and Network
- Defer non-critical SDK init until after first frame
- Cache API responses with TTL; show stale-while-revalidate UI
- Batch analytics events—do not block UI thread on every tap
- Hermes engine on RN reduces TTI on Android significantly
One delivery app cut cold start from 4.2s to 1.8s by lazy-loading maps SDK and prefetching home feed on splash.
Battery and Network Awareness
Reduce background location polling frequency when app is backgrounded. iOS will throttle aggressively; Android Doze kills wake locks abuse. Users uninstall apps that drain 15% battery overnight without clear value.
Adapt image quality to connection type using NetInfo—serve thumbnails on 3G, full resolution on WiFi. Prefetch next screen data on idle scroll pauses, not on every scroll event firing API calls.
Profile release builds, not debug. Debug mode JIT and dev menus lie about performance. Test on iPhone SE 2nd gen and a $150 Android device—median user hardware, not your dev kit flagship.
Track frame drops during navigation transitions separately from scroll jank—users forgive list stutter less than frozen screen pushing new route. React Navigation lazy screens and Flutter deferred loading reduce startup route registration overhead on apps with 40+ screens.
Release Discipline
Performance regressions should block release like functional bugs—set bundle size and startup time thresholds in CI. Compare against previous release baseline, not arbitrary targets from blog posts written for different app categories entirely.
Collect anonymized performance telemetry from production with opt-in privacy policy disclosure—field data beats lab for prioritizing fixes affecting real devices on real networks in Karachi, Lagos, and London equally relevant to global products.
Profile release builds on iPhone SE and a budget Android device—debug mode lies about performance. Track navigation transition jank separately from list scroll; frozen route pushes frustrate users more than minor list stutter during fast scroll.
Network Profiling
Charles Proxy or Flipper reveals duplicate API calls on screen focus—React useEffect without dependency discipline triggers triple fetch commonly. Debounce search-as-you-type with 300ms minimum and cancel in-flight requests on new input. Savings on cellular data improve retention in emerging markets measurably.
Warm up JIT and shader compilation on first launch with lightweight skeleton screens—Flutter shader compilation jank on first animation is documented issue; cache shaders after first run where framework version supports it. Test cold install, not hot reload dev experience.
Reduce bridge traffic in React Native by batching native module calls—chatty bridges show up as INP regressions on Android mid-tier devices profiling reveals clearly when finally measured properly.
Establish performance budget document signed by product and engineering—when marketing requests animation-heavy onboarding, trade-offs explicit against measurable startup regression limits already agreed prevents last-minute arguments before store submission deadline.
Frequently Asked Questions
How do I find memory leaks?
Navigate away from screens 20 times in Instruments Leaks profile. Unremoved listeners and retained closures are usual suspects.
Should I use React.memo everywhere?
No—profile first. Memoize expensive list items and heavy chart components only.
Does Flutter need less optimization?
Flutter still chokes on unbounded lists and oversized images. DevTools timeline is your friend.