🌙
☀️ Dark
PART 24

Performance

Core Web Vitals, bundles, latency, database queries.

Advanced 45 min read

Revision Sheet

  • Frontend: Minimize bundle size, defer JS, optimize images, utilize caching headers, eliminate render-blocking resources.
  • Backend: Don't block the event loop, use connection pools, paginate data, cache heavily, use async I/O.
  • Database: Add indexes, avoid N+1 queries, understand EXPLAIN plans.
  • Golden Rule: Measure first, profile, then optimize. Never guess.

Connections

This chapter links heavily to Database Internals (how indexes work), Node.js Architecture (the event loop), and Frontend Build Tools (how Webpack/Vite splits bundles). Performance is the culmination of understanding the full stack.

PreviousVolume 23 🏠 Curriculum NextVolume 25
🏠 Curriculum NextVolume 2

Mini Project (20-30 min)

▶ View Solution

Goal: Optimize a provided React app with a terrible Lighthouse score.

  1. Run Lighthouse in Chrome DevTools.
  2. Identify large uncompressed images and switch them to WebP/AVIF.
  3. Find the massive 2MB JavaScript bundle. Implement Code Splitting using React.lazy() for routes.
  4. Move render-blocking scripts to the end of the body or use defer.
  5. Re-run Lighthouse and hit >90 performance score.

Bigger Project (1-2 hours)

Apply all concepts from this volume to build a comprehensive feature.

▶ View Solution
typescript 
// Example project code here

Interview Questions

Easy: What is the difference between latency and throughput?

Latency is the time it takes for a single request to complete (e.g., 50ms). Throughput is how many requests the system can handle per second (e.g., 1000 RPS).

Medium: How does Node.js handle thousands of concurrent connections on a single thread?

Using non-blocking I/O and the Event Loop. When a network request or DB query happens, Node offloads it to the OS and continues executing other JS code. When the OS finishes the I/O, a callback is pushed to the event queue.

Hard: What are Core Web Vitals and how do you optimize LCP?

Core Web Vitals are Google's metrics for UX: LCP (loading), FID/INP (interactivity), CLS (visual stability). To optimize LCP (Largest Contentful Paint), prioritize loading the main image/text by critical CSS, preloading the LCP resource, using a CDN, and deferring non-critical JS.

Senior: Your APM shows database CPU is at 100%, but your app servers are mostly idle. How do you mitigate this immediately without changing application code, and how do you fix it permanently?

Immediate: Scale up the database instance (vertical scaling), add a read replica and route read queries to it, or increase the connection pool size (if it's not already maxing out max_connections). Permanent: Use `pg_stat_statements` to find the most expensive queries. Add missing indexes, optimize N+1 queries, add Redis caching, or rewrite complex aggregations.