Skip to content

performance.md

Latest commit

 

History

History
43 lines (37 loc) · 2.15 KB

performance.md

File metadata and controls

43 lines (37 loc) · 2.15 KB

Performance Rules

Loading Strategy

  • Lazy load routes and heavy components. Only load what the user needs right now.
  • Use code splitting at route boundaries.
  • Defer non-critical scripts and stylesheets.
  • Preload critical resources: fonts, above-the-fold images, key API data.
  • Use dynamic imports for features behind user interaction (modals, drawers, editors).

Caching

  • Cache expensive computations with memoization. Invalidate when inputs change.
  • Set appropriate HTTP cache headers: immutable for hashed assets, short TTL for API responses.
  • Use CDN caching for static assets.
  • Implement application-level caching (Redis, in-memory) for repeated database queries.
  • Always define a cache invalidation strategy before adding a cache.

Database Performance

  • Add indexes on columns used in WHERE, JOIN, and ORDER BY clauses.
  • Avoid N+1 queries. Use eager loading, joins, or batch queries.
  • Use pagination for list endpoints. Prefer cursor-based over offset-based for large datasets.
  • Profile slow queries with EXPLAIN ANALYZE and optimize them.
  • Use connection pooling. Never open a new connection per request.
  • Keep transactions short. Do not hold locks during I/O operations.

API Performance

  • Minimize payload size. Return only the fields the client needs.
  • Use compression (gzip/brotli) for API responses.
  • Implement request batching for clients that need multiple resources.
  • Add request timeouts on both client and server sides.
  • Use streaming for large responses instead of buffering everything in memory.

Frontend Performance

  • Optimize images: use WebP/AVIF, responsive sizes, lazy loading for below-the-fold.
  • Minimize JavaScript bundle size. Track it in CI with bundle analyzer.
  • Avoid layout shifts: set explicit dimensions on images and dynamic content.
  • Debounce user input handlers (search, resize, scroll).
  • Use requestAnimationFrame for visual updates, not setTimeout.

Monitoring

  • Measure before optimizing. Use profiling tools, not intuition.
  • Set performance budgets: bundle size, Time to Interactive, API response time.
  • Alert on P95/P99 latency, not just averages.
  • Log slow queries and slow API responses for investigation.