{
  "id": 391176,
  "title": "I Built a React Performance Analyzer Because Lighthouse Wasn't Telling Me Why",
  "url": "https://urgent.news/2026/08/09/i-built-a-react-performance-analyzer-because-lighthouse-wasnt-telling",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-08-09T16:23:46.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/ozma/i-built-a-react-performance-analyzer-because-lighthouse-wasnt-telling-me-why-3pal"
  },
  "original_language": "en",
  "account": "A React developer encountered performance issues in a project that Lighthouse, a popular web performance testing tool, couldn't fully explain. While Lighthouse provides valuable insights into page performance, such as Core Web Vitals, network requests, resource sizes, and loading performance, it doesn't offer the in-depth analysis needed for debugging a React application.\n\nThe author developed React Doctor, a CLI-based React performance analysis tool, to address this gap. React Doctor combines static code analysis with runtime profiling to provide a more comprehensive understanding of performance issues in React applications.\n\nReact Doctor's analysis pipeline consists of several stages:\n1. Static Analysis: The tool scans the React code using AST-based analysis to identify potential issues like unnecessary console logs, expensive component structures, inline functions, and other React-related code smells. This analysis doesn't require the application to be running.\n\n2. Runtime Profiling: To validate the static analysis, React Doctor launches the application in a real browser environment and collects runtime metrics. These metrics include LCP (Largest Contentful Paint), FCP (First Contentful Paint), CLS (Cumulative Layout Shift), INP (Interaction to Next Paint), TTFB (Time to First Byte), render/commit timing, component re-render information, and screenshots at important moments. The profiling can also simulate different device and network conditions to make it easier to reproduce performance problems.\n\n3. Combining Results: The most interesting aspect of React Doctor is how it combines the static analysis and runtime profiling results. For example, if a static analysis reveals a potentially expensive render pattern in a component, but runtime profiling shows that the component is actually re-rendering frequently during user interaction, React Doctor can provide a more context-rich understanding of the problem. Instead of simply stating \"Your application is slow,\" React Doctor helps answer questions like \"What is happening in the React application, where is it happening, and what should I investigate?\"\n\nThe CLI for React Doctor is available on npm as react-doctor-cli-dev and can be run with the command `npx react-doctor-cli-dev full ./my-app` or installed globally with `npm install -g react-doctor-cli-dev` and then executed with `react-doctor full ./my-app`. The CLI supports different types of analysis using various commands like `react-doctor full`, `react-doctor analyze`, `react-doctor profile`, and `react-doctor dashboard`.\n\nThe output of React Doctor is designed to be more useful than a simple list of warnings. For each detected issue, the report includes information such as the affected file, relevant component, what was detected, why it may matter, supporting runtime information, and suggestions for investigation or improvement. The project also generates structured report data that can be consumed by a dashboard.\n\nReact Doctor was initially developed as a graduation project, starting around October 2025. It was built with TypeScript, Node.js, Babel AST, Puppeteer, web-vitals, Express, SQLite, and React in a monorepo structure. After completing the project, the developer published React Doctor as an npm package, and it has since received over 3,600 downloads in just two months, making it a valuable resource for developers seeking deeper insights into their React applications' performance.",
  "summary": "I was working on a React project when I ran into a performance problem. The application worked. The Lighthouse score wasn't terrible. But something still felt wrong. Some interactions felt sluggish. Components were rendering more than I expected. And whenever I found a performance problem, I had the same question: Why is this happening? Lighthouse is great at telling us about the performance of a…",
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}