Performance Tips
Keep your app fast and responsive. Speed matters for user experience and SEO.
Why Performance Matters
User Experience
53% of users abandon sites that take longer than 3 seconds to load
SEO Rankings
Google uses Core Web Vitals as a ranking factor
Conversion Rates
Every 100ms delay reduces conversions by 7%
Image Optimization
Images are often the largest assets on a page. Optimize them aggressively.
- • Use WebP format - 25-35% smaller than JPEG at same quality
- • Compress before uploading - Use tools like TinyPNG or Squoosh
- • Right-size images - Don't upload 4000px for a 400px thumbnail
- • Lazy load below-fold images - Only load what's visible
- • Use responsive images - Serve different sizes for mobile vs desktop
- • Consider CDN hosting - Serve images from edge locations
"Add lazy loading to all images below the fold. Use WebP format with JPEG fallback. Add responsive srcset for mobile optimization."
Loading States & Perceived Performance
Users perceive apps as faster when they see immediate feedback, even if actual load time is the same.
- • Skeleton screens - Show content placeholders while loading
- • Progressive loading - Show content as it arrives, don't wait for everything
- • Optimistic updates - Update UI immediately, sync with server in background
- • Loading indicators - Spinners for actions, progress bars for uploads
- • Instant feedback - Button states, hover effects, transitions
"Add skeleton placeholders that match the layout of the cards. Show them while data is loading. Use a subtle pulse animation."
Minimize API Calls
Every network request adds latency. Be strategic about when and what you fetch.
- • Cache aggressively - Store data that doesn't change often
- • Debounce inputs - Wait for user to stop typing before searching
- • Paginate large lists - Load 20 items at a time, not 1000
- • Batch requests - Combine multiple small requests into one
- • Use stale-while-revalidate - Show cached data while fetching fresh
- • Prefetch on hover - Start loading before user clicks
"Add debouncing to the search input - wait 300ms after user stops typing before making the API call. Cache search results for 5 minutes."
Code Optimization
Smaller, faster JavaScript means quicker time-to-interactive.
- • Code splitting - Only load JS needed for current page
- • Tree shaking - Remove unused code from bundles
- • Lazy load components - Load modals/drawers on demand
- • Minimize dependencies - Each library adds to bundle size
- • Use production builds - Development mode is much slower
"Lazy load the settings modal - only import it when the user clicks the settings button. Use dynamic import."
React-Specific Optimizations
Avoid unnecessary re-renders to keep your UI snappy.
- • Memoize expensive components - Use React.memo() for pure components
- • useMemo for calculations - Cache computed values
- • useCallback for handlers - Prevent function recreation
- • Virtualize long lists - Only render visible items
- • Avoid inline objects/arrays - They create new references every render
- • Use keys properly - Stable, unique keys for list items
"The list is rendering slowly with 500 items. Add virtualization using react-window so only visible items are rendered."
Fonts & CSS
- • Use system fonts when possible - No download required
- • Subset custom fonts - Only include characters you need
- • Preload critical fonts - Start downloading early
- • Use font-display: swap - Show text immediately with fallback
- • Minimize CSS - Remove unused styles
- • Avoid @import - It blocks parallel downloads
Quick Performance Prompts
"Audit this page for performance issues and fix them."
"Add infinite scroll with virtualization to this list."
"Optimize the initial page load - defer non-critical resources."
"Add caching for API responses using localStorage."