A React or Next.js page feels slow. How would you investigate frontend performance?

Frontend performance: rendering and bundle size

Explains practical frontend performance work: measuring, render cost, memoization, bundle splitting, images, and hydration.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

I would measure first. In the browser I would check Core Web Vitals, network waterfall, JavaScript bundle size, long tasks, render timing, and user interaction latency. In React I would use the profiler to see which components rerender and why. In Next.js I would inspect server timing, hydration cost, image loading, and whether too much of the page is marked client-side.

Full answer below

Practice focus

Performance measurement, render profiling, bundle analysis, hydration cost, code splitting, images, caching, and UX perception.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Why this question matters
Frontend performance questions are often answered with random optimizations. A better answer starts with measurement and separates network, JavaScript, rendering, and backend time.
I would measure first. In the browser I would check Core Web Vitals, network waterfall, JavaScript bundle size, long tasks, render timing, and user interaction latency. In React I would use the profiler to see which components rerender and why. In Next.js I would inspect server timing, hydration cost, image loading, and whether too much of the page is marked client-side.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I would fix the dominant cost. Large bundles may need code splitting, dynamic imports, dependency cleanup, or moving noninteractive parts back to server components. Slow rendering may need better component boundaries, stable props, memoization, virtualization for long lists, or avoiding expensive work during render. Slow data may need backend optimization, caching, streaming, or better loading states. Images need correct sizing, compression, and lazy loading.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Optimizing randomly without measuring.
Using memoization everywhere as a default.
Shipping large client bundles for mostly static content.
Ignoring image size and third-party scripts.

A React or Next.js page feels slow. How would you investigate frontend performance?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue practice

Go deeper

Tech stacks

Skill areas

Suggest an improvement