Performance Overview

Performance is about how quickly the browser and the server work together to get a usable page in front of the user, and how smoothly it responds afterwards. This section covers it in this order:

Why Performance Matters

• Faster apps feel smoother and more reliable, so users stay engaged longer. A page that loads in 1s feels instant; a 5s delay often makes people leave.
• Slow sites raise bounce rates and lower conversions, which hits revenue and retention. An e-commerce site with a slow checkout loses users before payment.
• Speed affects SEO: Google favours fast-loading pages in search results.

Performance Metrics (How We Judge Performance)

• Metrics like FCP, LCP, CLS and TTI measure different parts of the experience, so you are not guessing. FCP tells you when something first appears, even if the page isn't ready yet.
• LCP measures how fast the main content loads, CLS checks layout stability, and TTI says when the app becomes interactive. If a button is visible but not clickable yet, TTI is still high.
• Together they point at where the problem is: loading, rendering or interaction. A high CLS means elements are shifting while the page loads.

Measuring Performance

• Chrome DevTools, Lighthouse and the Web Vitals library give real data instead of assumptions. Lighthouse gives a score and highlights slow resources.
• They surface large bundles, slow APIs and heavy JavaScript. The DevTools Performance panel shows long tasks blocking the main thread.
• Measure regularly to track improvements and catch regressions, for example by running Lighthouse after every major change.

Network Optimization

• Make data transfer between client and server more efficient. Fewer API calls means a faster load.
• A CDN serves content from servers close to the user, cutting latency.
• Gzip or Brotli compression shrinks files: a 500 KB JavaScript file can drop to about 150 KB.

Asset Optimization

• Reduce the size and cost of images, scripts and styles. Converting PNG images to WebP saves a lot of bytes.
• Minify CSS, JS and HTML to strip spaces and comments.
• Lazy loading and code splitting load only what is needed first, e.g. images load when they scroll into view.

React Optimization

• Most React slowness comes from unnecessary re-renders and inefficient state updates, like a component re-rendering when its props haven't changed.
• React.memo, useMemo and useCallback skip repeated work, such as re-filtering a large list on every render.
• Lazy-load components and keep state close to where it is used. Load a modal's code only when the user opens it.

Build Optimization

• Production bundles should be small: tree shaking removes unused imports.
• Bundlers like Webpack and Vite split code so users don't download everything at once, with vendor code and app code in separate files.
• Production builds are minified and compressed, unlike development builds.

Rendering Patterns

• CSR, SSR, SSG and ISR trade off speed, freshness and cost differently.
• CSR renders with JavaScript in the browser, so users can see a blank screen until JS loads. SSR sends ready-made HTML from the server.
• SSG and ISR suit static or semi-dynamic content: blog pages generated at build time load instantly.