What tools do you use to measure performance?

Performance

The short answer

The most common tools are Lighthouse (for auditing), Chrome DevTools Performance tab (for profiling), Web Vitals (for real-user metrics), and the Performance API in JavaScript. The key is to measure before optimizing — do not guess where the bottlenecks are.

Lighthouse

Lighthouse is built into Chrome DevTools. It audits your page and gives scores for performance, accessibility, SEO, and best practices.

It measures things like:

  • First Contentful Paint (FCP) — when the first content appears
  • Largest Contentful Paint (LCP) — when the main content is visible
  • Total Blocking Time (TBT) — how long the main thread is blocked
  • Cumulative Layout Shift (CLS) — how much the page shifts during loading

You can run it from Chrome DevTools > Lighthouse tab, or from the command line with npx lighthouse.

Chrome DevTools Performance tab

The Performance tab lets you record a profile of your page. It shows:

  • What the browser is doing frame by frame
  • How long JavaScript functions take to run
  • When layout, paint, and composite happen
  • Where jank (dropped frames) occurs

This is the best tool for finding specific performance bottlenecks like expensive functions or layout thrashing.

Web Vitals

Core Web Vitals are three metrics that Google uses to measure user experience:

  • LCP (Largest Contentful Paint) — loading speed
  • INP (Interaction to Next Paint) — responsiveness
  • CLS (Cumulative Layout Shift) — visual stability

You can measure them with the web-vitals library:

import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(console.log);
onINP(console.log);
onCLS(console.log);

Performance API

JavaScript provides a built-in Performance API for measuring specific operations:

performance.mark('start');
// ... some operation ...
performance.mark('end');
performance.measure('My Operation', 'start', 'end');
const measure =
  performance.getEntriesByName('My Operation')[0];
console.log(`Took ${measure.duration}ms`);

React-specific tools

  • React DevTools Profiler — shows which components re-rendered and how long each render took
  • React.Profiler component — measures render times programmatically
<Profiler
  id="list"
  onRender={(id, phase, duration) => {
    console.log(`${id} ${phase}: ${duration}ms`);
  }}
>
  <ProductList />
</Profiler>

Interview Tip

Know at least three tools and when to use each: Lighthouse for auditing, DevTools Performance tab for profiling, and Web Vitals for real-user metrics. The most important thing to communicate is that you measure first before optimizing. Saying "I would profile the app and look for the bottleneck" is much better than jumping straight to optimization techniques.

Why interviewers ask this

Performance is not just about knowing optimization techniques — it is about knowing how to find the actual problems. Interviewers want to see if you have a systematic approach to performance: measure, identify the bottleneck, optimize, and measure again.

Table of Contents