76 lines
2.3 KiB
Markdown
76 lines
2.3 KiB
Markdown
# 09. Image Caching & Coil Optimization
|
|
|
|
meta:
|
|
id: android-production-09
|
|
feature: android-production
|
|
priority: P2
|
|
depends_on: []
|
|
tags: [performance, caching, production]
|
|
|
|
objective:
|
|
- Optimize Coil image caching and loading for better performance and reduced network usage
|
|
|
|
deliverables:
|
|
- Coil cache configuration
|
|
- Image loading optimization
|
|
- Lazy loading for lists
|
|
- Memory and disk cache limits
|
|
|
|
steps:
|
|
1. Configure Coil:
|
|
- Set up ImageLoader in KordantApp.kt
|
|
- Configure memory cache (50MB)
|
|
- Configure disk cache (100MB)
|
|
- Set crossfade animation
|
|
- Configure placeholder and error drawables
|
|
2. Optimize image loading:
|
|
- Use appropriate image sizes (thumbnail vs full)
|
|
- Enable image transformations (circle crop for avatars)
|
|
- Use WebP format where supported
|
|
- Configure request priorities
|
|
3. Implement lazy loading:
|
|
- Use LazyColumn for all lists
|
|
- Implement pagination for long lists
|
|
- Add prefetching for adjacent items
|
|
- Show skeleton placeholders while loading
|
|
4. Add offline support:
|
|
- Cache images for offline viewing
|
|
- Show cached images when offline
|
|
- Handle network errors gracefully
|
|
5. Optimize memory usage:
|
|
- Clear memory cache on low memory
|
|
- Limit concurrent image loads
|
|
- Cancel loads for off-screen items
|
|
6. Add tests:
|
|
- Test cache hit/miss behavior
|
|
- Test scrolling performance with many images
|
|
|
|
tests:
|
|
- Unit: Test cache configuration
|
|
- Performance: Test scrolling with 1000 images
|
|
- Memory: Verify no memory leaks
|
|
|
|
acceptance_criteria:
|
|
- Coil ImageLoader configured with 50MB memory / 100MB disk cache
|
|
- Lazy loading on all lists with pagination
|
|
- Image placeholders while loading
|
|
- Error state for failed loads
|
|
- Cache cleared on low memory
|
|
- Offline image viewing working
|
|
- Smooth 60fps scrolling on image-heavy screens
|
|
- No memory leaks in image loading
|
|
- Crossfade animation on image load
|
|
- Appropriate image sizes requested from backend
|
|
|
|
validation:
|
|
- Scroll through alert list → smooth, no stuttering
|
|
- Turn on airplane mode → cached images still visible
|
|
- Monitor memory → stable during image browsing
|
|
- Check cache directory → images stored with correct expiration
|
|
|
|
notes:
|
|
- Coil is already included in dependencies (libs.coil.compose)
|
|
- Configuration happens in Application class
|
|
- Use rememberAsyncImagePainter for Compose integration
|
|
- Test on low-end devices for performance validation
|