How do you identify performance bottlenecks?

Performance

The short answer

Use browser DevTools to measure, not guess. The Performance tab shows where time is spent (JavaScript, layout, paint). The Network tab reveals slow or large requests. Lighthouse gives an overall score with specific recommendations. React DevTools Profiler shows which components re-render unnecessarily. Always measure first, then optimize.

Step 1: Measure with Lighthouse

Run a Lighthouse audit to get a high-level picture:

  • Performance score
  • Largest Contentful Paint (LCP) — is the main content loading fast?
  • Total Blocking Time (TBT) — is JavaScript blocking the main thread?
  • Cumulative Layout Shift (CLS) — is the page visually stable?

Lighthouse gives you specific recommendations like "remove unused JavaScript" or "serve images in modern formats."

Step 2: Profile with the Performance tab

Record a session in Chrome DevTools Performance tab:

  1. Click Record, interact with the page, click Stop
  2. Look at the flame chart — tall stacks mean deep call chains, wide bars mean slow functions
  3. Check the Summary — how much time is spent in Scripting, Rendering, Painting
  4. Look for long tasks (blocks over 50ms that block the main thread)

Step 3: Check the Network tab

Look for:

  • Large files that could be smaller (uncompressed images, unminified JS)
  • Many sequential requests (waterfall pattern) — should they run in parallel?
  • Slow API responses — is the server the bottleneck?
  • Requests without caching headers

Step 4: Profile React with React DevTools

The Profiler tab shows:

  • Which components rendered and how long each took
  • Why a component re-rendered (props changed, state changed, parent re-rendered)
  • Which renders were unnecessary

Common bottlenecks and fixes

BottleneckHow to find itFix
Large JS bundleNetwork tab, LighthouseCode splitting, tree shaking
Unoptimized imagesNetwork tabWebP/AVIF, lazy loading, srcset
Unnecessary re-rendersReact ProfilerReact.memo, useMemo, useCallback
Layout thrashingPerformance tab (purple bars)Batch DOM reads/writes
Slow APINetwork tabCaching, pagination, CDN
Render-blocking CSS/JSLighthousedefer/async, critical CSS

The process

  1. Measure — get a baseline with Lighthouse and the Performance tab
  2. Identify — find the biggest bottleneck (not the easiest to fix)
  3. Fix — apply the targeted optimization
  4. Measure again — confirm the fix actually improved things
  5. Repeat — tackle the next biggest bottleneck

Interview Tip

Describe a systematic approach: measure with tools, identify the bottleneck, fix it, measure again. Name the specific tools (Lighthouse, Performance tab, React Profiler). The table of common bottlenecks and fixes is a great way to show breadth of knowledge. Saying "I always measure before optimizing" shows maturity.

Why interviewers ask this

Performance optimization without measurement is just guessing. Interviewers want to see if you have a systematic approach to finding and fixing performance issues. A candidate who can walk through the tools and process shows they have done this in real projects.

Table of Contents