Current Performance
1355ms
FCP
457ms
TTFB
Performance Playbook
Guidelines and best practices for keeping Snuggli fast
Bundle Size
Lazy load all routes and heavy components
Critical
Keep initial JS bundle < 250KB gzipped
Critical
Code-split admin pages and settings
Important
Use dynamic imports for modals and dialogs
Important
Tree-shake unused library code
Important
Images & Assets
Always use OptimizedImage component for images
Critical
Lazy load images below the fold
Critical
Use WebP format with fallbacks
Important
Compress images before upload (max 200KB)
Important
Use icon fonts or SVG sprites for icons
Recommended
API & Network
Batch API calls on page load
Critical
Use staleTime: 30000+ for static data
Critical
Implement proper cache headers on backend
Critical
Avoid refetchOnMount for non-critical data
Important
Use pagination for large lists
Important
Rendering
Memoize expensive components with React.memo
Critical
Use virtualization for lists > 50 items
Critical
Debounce input handlers and search
Important
Avoid inline function definitions in JSX
Important
Use CSS transforms for animations
Recommended
Database
Add indexes for frequently queried fields
Critical
Limit query results with pagination
Critical
Avoid N+1 queries in backend
Critical
Cache frequently accessed data
Important
Use select to limit returned fields
Recommended
Performance Testing
Lighthouse Audit
Run Lighthouse performance audit
npm run lighthouseBundle Analysis
Visualize bundle size and composition
npm run analyzePerformance Profile
Profile runtime performance
Open DevTools → Performance → RecordPerformance Budget
Initial JS Bundle< 250KB gzipped
LCP (Slow 3G)< 2.5s
TTI (Low-end Device)< 5s
Initial Requests< 25
CLS< 0.1