Stop 23 · Interview PreparationTechnical · 3/8

Performance optimization

In short

'This page is slow. What would you do?' There's no single right answer. Interviewers want to hear a process: measure first, find the real cause, fix it, then measure again.

Being able to talk through how you'd diagnose and fix a slow page — the classic 'this page is slow, what would you do?' interview question.

The jaadu doctor examines a tired cartoon laptop lying on a clinic bed.

Think of it like this

A doctor doesn't prescribe before tests

A good doctor asks questions and runs a blood test before writing a prescription. Jumping straight to 'add useMemo everywhere' is like prescribing antibiotics for every fever. Diagnose first.

Watch it happen

A calm answer to 'this page is slow'

Clarify

Measure

Diagnose

Fix

Re-measure

1/5'The dashboard is slow.' You ask: slow to load or slow to click? On which phone and network?

The big ideas

What you need to know

Measure with real tools

Lighthouse, the Performance tab and the Network tab. Name them in your answer.

Know Core Web Vitals

LCP (main content load), INP (response to clicks and taps), CLS (layout jumping). INP replaced FID in 2024.

Ship less

Code splitting, lazy loading, compressed and correctly sized images, fewer third-party scripts.

Render less

Avoid needless re-renders, virtualise long lists and move heavy work off the main thread.

See it in code

Walk through the code

jsx

1import { lazy, Suspense } from "react";2// Loaded only when it's actually shown3const ChartPanel = lazy(() => import("./ChartPanel"));4 5export default function Dashboard({ showCharts }) {6  return (7    <main>8      <img src="/hero.webp" width={1200} height={600} alt="Students in class" />9      {showCharts && (10        <Suspense fallback={<p>Loading charts...</p>}>11          <ChartPanel />12        </Suspense>13      )}14    </main>15  );16}

1/3lazy() splits ChartPanel into its own file, loaded on demand.

Two quick wins. lazy() splits the heavy chart code into its own file, loaded only when needed. Width and height on the image reserve space, so nothing jumps (CLS).

Save yourself the pain

Common mistakes

Oops

Listing 15 techniques without any order or reason.

Do this instead

Walk through measure, diagnose, fix, verify. Mention two or three fixes that match the cause.

Oops

Saying 'I'd wrap everything in useMemo and React.memo'.

Do this instead

Memoising has a cost. Use it where profiling shows expensive, repeated renders.

Your mission

Speed up one of your own projects

~45 min

Quick check

Your page content jumps down when an image loads. Which metric suffers, and what's the simple fix?

Go deeper

1Prepare a structured answer: measure first with Lighthouse/DevTools, then optimize based on data.
2Have 2-3 real examples ready from your own projects where you improved performance.
3Practice explaining the difference between perceived and actual performance.

More technical at this stop