Chrome DevTools Performance Panel

The Performance panel is Chrome DevTools' built-in, local profiler for recording how a page loads and runs, reading a flame chart, finding your LCP element, and diagnosing Core Web Vitals problems — it can also show optional real-user CrUX field data alongside your local trace. What it is, how to read it, and why it isn't what Googlebot sees.

First published: Jul 3, 2026 · Last updated: Jul 17, 2026 · Advanced
demand #5 in Web Performance Tools#27 in Web Performance#257 in Technical SEO#347 on the site

The Chrome DevTools Performance panel is a local profiler built into Chrome (and Chromium-based Edge). You record a trace and read the raw detail of how a page loads and runs: a flame chart of main-thread work, an FPS/CPU timeline, a network waterfall, a filmstrip, and — since the 2023–2024 redesign — a live Core Web Vitals view plus an Insights sidebar (LCP phase breakdown, render-blocking requests, forced reflow, third-party cost). Where Lighthouse/PageSpeed Insights score a page and list fixes, the Performance panel hands you the trace to explore yourself. Three things to get right: the recorded trace itself is your local browser's behavior, not Googlebot's Web Rendering Service; that trace is lab evidence, though the panel can optionally show real-user CrUX field data alongside it — the two are not the same measurement; and the standalone Performance Insights panel was removed in Chrome 132, its features folded into the main panel's Insights tab. For SEO it's the fastest built-in way to pinpoint your exact LCP element and spot render-blocking third parties.

Evidence for this claim Chrome DevTools Performance panel records runtime and loading activity for local performance analysis. Scope: Chrome DevTools lab profiling on the tester's device. Confidence: high · Verified: Chrome DevTools: Performance features Evidence for this claim The Performance panel includes insights and timeline views for diagnosing rendering, layout, network, and main-thread work. Scope: Current Chrome DevTools UI; labels and panels can change by Chrome version. Confidence: high · Verified: Chrome DevTools: Analyze runtime performance

TL;DR — The Performance panel is Chrome DevTools’ built-in, local profiler. Open it and it shows live local LCPLargest Contentful Paint — render time of the largest visible image or text block, relative to when the page started loading. ≤2.5 s (at the 75th percentile) is good./CLSCumulative Layout Shift — a unitless score for unexpected visual movement, taken from the largest burst (session window) of layout shifts, not the lifetime sum. ≤0.1 is good. (and INPInteraction to Next Paint — the input-to-paint latency at the 75th percentile of a page's interactions. ≤200 ms is good. once you interact); hit Start profiling and reload page (with Screenshots on) to record a full load. You read a flame chart of main-thread work, an FPS/CPU timeline, a network waterfall, and analysis tabs (Bottom-up, Call Tree, Event Log), plus an Insights sidebar that breaks LCPLargest Contentful Paint — render time of the largest visible image or text block, relative to when the page started loading. ≤2.5 s (at the 75th percentile) is good. into its four sub-parts and flags render-blockingRender-blocking resources are CSS and synchronous JavaScript files a browser must download and process before it can paint any visible content. They sit on the critical rendering path and delay First Contentful Paint and Largest Contentful Paint. requests, forced reflow, and third-party cost. It’s the fastest built-in way to pinpoint your exact LCP element. Three things to keep straight: it profiles your browser, not GooglebotGooglebot is Google's web crawler — the software that fetches pages so Google can index and rank them. It comes in two variants, Googlebot Smartphone (primary, under mobile-first indexing) and Googlebot Desktop, and runs an evergreen Chromium renderer.’s Web Rendering ServiceTurning HTML, CSS, and JavaScript into the final visual page and DOM.; the recorded trace is lab evidence, and while the panel can optionally show real-user CrUXChrome User Experience Report — Google's public dataset of real-world (field) performance data from eligible Chrome users. It's the official field-data source behind the Core Web Vitals program. field data alongside it, that field overlay is not the same measurement as your local trace; and the old standalone Performance Insights panel was removed in Chrome 132 — those features now live inside this panel’s Insights tab. Throttling multipliers are relative to your machine, not an absolute benchmark.

What the Performance panel actually is

Google’s framing is plain: “Use the Performance panel to analyze your website’s performance” and “The Performance panel lets you record CPU performance profiles of your web applications” (Chrome DevTools docs). It’s a profiler — you record a trace of everything the browser does over a slice of time, then explore that trace.

It’s worth positioning against its siblings up front, because people conflate them constantly:

  • LighthouseLighthouse is Google's free, open-source tool that audits a page under simulated lab conditions and scores it 0–100 across Performance, Accessibility, Best Practices, and SEO. It's lab data — useful for debugging, not a ranking signal. / PageSpeed InsightsPageSpeed Insights (PSI) is a free Google tool at pagespeed.web.dev that reports two kinds of data for a URL: real-user field data from the Chrome UX Report and a single Lighthouse lab run with the 0–100 Performance score. Only the field Core Web Vitals are what Google uses for ranking. run an automated audit and give you a score plus prioritized recommendations (PSI also adds real CrUXChrome User Experience Report — Google's public dataset of real-world (field) performance data from eligible Chrome users. It's the official field-data source behind the Core Web Vitals program. field dataPerformance metrics captured from real users, not lab tests.). Scored, automated, opinionated.
  • WebPageTestWebPageTest is a free, open-source, lab-based website performance testing tool — created by Patrick Meenan in 2008 and acquired by Catchpoint in 2020 — that runs pages on real browsers from distributed locations and produces deep diagnostics (waterfalls, filmstrips, connection views, Core Web Vitals). It's a diagnostic tool, not a Google ranking input. runs your page on a remote real device, records historical, shareable results, and supports multi-step scripting. Remote, shareable, thorough.
  • The Performance panel gives you a raw, interactive trace from your own local browser — no score, no account, no remote machine. Deeper and more flexible, but you do the interpreting.

The recorded trace itself is local, lab evidence — a snapshot of your one browser, device, and network at that moment. But the panel around it isn’t purely a lab tool: since the redesign it can also show optional real-user CrUX field metrics alongside your local results. Keep the two straight — local lab vs. remote lab vs. real-user field — because that distinction is the spine of the whole web performance tools cluster, and it’s what the myths below turn on.

A brief history (so you know which panel you’re even looking at)

The panel has been around a long time. Elizabeth Sweeny and Paul Irish of the Chrome DevTools team put it this way: “The Performance panel in Chrome DevTools has been helping developers measure and optimize their runtime performance in one form or another for the better part of 15 years,” and “Starting with a panel called ‘Timeline’, it evolved to the Performance panel you know today” (Performance tooling in 2024 and beyond). Along the way, as they note, LighthouseLighthouse is Google's free, open-source tool that audits a page under simulated lab conditions and scores it 0–100 across Performance, Accessibility, Best Practices, and SEO. It's lab data — useful for debugging, not a ranking signal. was launched in 2016 to help spot optimization opportunities more easily,” and “The experimental Performance Insights panel was released in 2022 to test new ways of surfacing performance insights.”

That last one matters for currency. The standalone Performance Insights panel was an experiment, and it’s gone: Google’s own notice states that “The Performance insights panel is deprecated and removed from DevTools starting with Chrome version 132. We recommend you use the Performance > Insights tab instead” (deprecation notice). If a tutorial or screenshot you’re following shows a separate “Performance Insights” panel, it predates Chrome 132 and is stale — the insights now live in a sidebar inside the regular Performance panel.

Opening it and the live metrics screen

Open DevTools and select Performance from the tabs at the top. As Google describes it, “When you open the Performance panel, it immediately captures and shows you your local Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLSCumulative Layout Shift — a unitless score for unexpected visual movement, taken from the largest burst (session window) of layout shifts, not the lifetime sum. ≤0.1 is good.) metrics,” and “If you interact with your page, the Performance panel also captures your local Interaction to Next Paint (INPInteraction to Next Paint — the input-to-paint latency at the 75th percentile of a page's interactions. ≤200 ms is good.)” (overview docs). This landing screen is part of the redesign Rick Viscomi described as “a completely redesigned Performance panel landing page featuring a live view of your local Core Web VitalsWeb Vitals is Google's initiative (launched May 2020) for unified page-experience quality signals. Core Web Vitals — LCP, INP, and CLS — are the subset used in ranking; the rest (TTFB, FCP, TBT, Speed Index) are diagnostic, not ranking factors. performance” (Monitor your local and real-user Core Web Vitals in DevTools). So before you record anything, you already have your full set of local Core Web Vitals.

Recording a trace: runtime vs. load

There are two things you can record, and the distinction matters:

  • Runtime performance — the page is already loaded and you want to profile it while it runs (an animation, a slow interaction, a scroll jank). Google: “Runtime performance is how your page performs when it is running, as opposed to loading” (Analyze runtime performance).
  • Load performance — you want the whole story from a fresh navigation. Click Start profiling and reload page. Turn on Screenshots first so you get a filmstrip of visual frames alongside the trace.

For SEO work — LCP, layout shift, render-blocking scripts — you almost always want the load recording with screenshots on.

A trace only contains what happened inside its recording window — whatever you didn’t capture (an interaction outside the window, lazy-loaded work that fires later) is simply unobserved, not absent. If you want a trace you or someone else can reproduce or compare later, note down: the Chrome version and the date (labels, shortcuts, and the exact UI shift release to release), whether screenshots were on, your CPU/network throttling settings, and whether you left the advanced paint/CSS instrumentation and JavaScript sampling options at their defaults — each of those adds detail and overhead, so a trace recorded with different settings isn’t directly comparable to one recorded without them.

Reading the trace

A recording gives you several stacked tracks. The main ones:

  • The flame chart / Main track. This is the heart of it. Google: “DevTools shows you a flame chart of activity on the main thread, over time. The x-axis represents the recording, over time,” and “Use the Main track to view activity that occurred on the page’s main thread” (features reference). Time runs left to right; the stack of bars under each moment is the call stack. A wider bar = a longer-running task — that’s where your time went. That nesting shows you trace structure — what called what, and when — but it isn’t by itself proof that a parent task caused a broader user-experience problem; treat it as the starting point for a hypothesis, then confirm.
  • The FPS chart. A quick read on jank. Google: “Whenever you see a red bar above FPS, it means that the framerate dropped so low that it’s probably harming the user experience” (runtime docs). You’re aiming for a smooth 60 FPS; red bars mark the rough spots.
  • The CPU chart shows how busy the main thread was over the recording.
  • The Network track is a waterfall of every request — what loaded, when, and in what order (this is where render-blocking resourcesRender-blocking resources are CSS and synchronous JavaScript files a browser must download and process before it can paint any visible content. They sit on the critical rendering path and delay First Contentful Paint and Largest Contentful Paint. show up).
  • The Timings track surfaces custom performance.mark() measurements if your app emits them.

Below the flame chart, three analysis tabs slice the same data differently:

  • Bottom-up“Use the Bottom-up tab to view which activities directly took up the most time in aggregate.” Best for “what single function is eating my time?”
  • Call tree“Use the Call tree tab to view which root activities cause the most work.” Best for “which top-level task kicked all this off?”
  • Event log — the same events in chronological order.
TIP Turn the network recording into a focused request review

When the Performance trace points at the network but the waterfall is too dense to hand off, export a HAR from DevTools and inspect it locally with my free HAR Analyzer Free

  1. Reproduce one clean page load in the Network panel and export a HAR with content.
  2. Import it locally and isolate failed requests, redirects, transfer weight, timings, third parties, and explicit cache misses.
  3. Download the sanitized report for the handoff; review the original HAR separately before sharing it.

The Insights sidebar

The redesign’s most useful addition for diagnosis is the Insights sidebar — the successor to the removed standalone Performance Insights panel. Instead of you hunting through the flame chart, it surfaces specific, named problems. The ones that matter most for SEO:

  • LCP breakdown. Google splits LCP into four sub-parts — time to first byte, resource load delay, resource load time, and element render delay (LCP breakdown insight). This tells you why your LCP is slow (server? a late-loading image? render blocking?) rather than just that it’s slow.
  • Render-blocking requests — the CSS/JS that delayed the first paint (render-blocking insight).
  • Forced reflow — where the browser had to pause script to recalculate layout.
  • Third-party cost — how much your embeds, tags, and widgets are costing you.

Because these are surfaced automatically, the Insights sidebar is the closest the Performance panel gets to Lighthouse’s “here’s what to fix” experience — while still letting you drop into the raw trace behind any insight.

Treat each insight as a guided hypothesis, not proof. It identifies a potential issue and connects you to the trace context behind it, but flagging an item isn’t the same as proving that item caused the outcome you’re chasing, or that fixing it will. Confirm with the trace itself — and with a before/after re-recording — before you tell a client or teammate an insight is the cause.

CPU and network throttling (and the caveat that trips people up)

Your dev machine is far faster than a typical phone, so a page that feels instant to you can be painful for real users. Throttling simulates weaker conditions: a CPU slowdown multiplier and a network profile (Slow 4G, etc.).

The catch, straight from Google: “Throttling is relative to your computer’s capabilities. For example, the 2x slowdown option makes your CPU operate 2 times slower than its usual ability” (features reference). That means a “4x slowdown” is not an absolute benchmark — 4x on a fast laptop and 4x on a weak one aren’t the same result. It’s a relative dial, not a standard you can compare across machines. A second, practical use DebugBear points out in their deep DevTools walkthrough: throttling can also just slow the recording down so dense clusters of events are legible.

Lab data here vs. field data Google ranks on

This is where SEOs get burned. The Performance panel’s numbers — the live metrics and every recording — are lab data from your machine, on your network, at that moment. Google’s actual Core Web VitalsGoogle's three real-user UX metrics — LCP (loading), INP (responsiveness), and CLS (visual stability) — used by Google's ranking systems, with no official weight attached, measured on field data. ranking signal comes from real-user CrUX field data (a 28-day aggregate of real Chrome users), which you see in Search ConsoleGoogle's free tool for monitoring crawling, indexing, and search performance. and PageSpeed Insights. A perfect local recording does not guarantee a passing field score — real users have slower devices, worse networks, and more variety than your one test.

The redesigned panel actually bridges this: since the update, it can show your real-user CrUX field data right alongside your local results, so you can compare “what I just measured” against “what real users experience.” When that field overlay is available, you can switch it between the URL and origin level and between mobile and desktop, and the UI exposes the data period it’s drawing from — so match those to the trace you’re comparing it against. Even matched that way, field-informed environment settings (throttling presets the panel recommends based on CrUX) approximate a selected real-user segment; a single local recording still doesn’t recreate the underlying population distribution or predict a ranking outcome. That overlay is the clearest built-in reminder that your local trace and Google’s ranking signal are two different numbers. For the full lab-vs-field treatment, see the web performance tools hub and the sibling Core Web VitalsGoogle's three real-user UX metrics — LCP (loading), INP (responsiveness), and CLS (visual stability) — used by Google's ranking systems, with no official weight attached, measured on field data. and CrUXChrome User Experience Report — Google's public dataset of real-world (field) performance data from eligible Chrome users. It's the official field-data source behind the Core Web Vitals program. explainers.

TIP Use field data for the verdict, then bring the failure back to DevTools

A local trace explains one reproducible run; CrUX describes eligible real-user visits over a rolling window. Keep the source label attached when the tool falls back from URL field data to origin data or a Lighthouse lab audit.

Make that handoff with my free Page Speed Test & Core Web Vitals Checker Free

  1. Check the URL and note whether each result is URL-level field, origin-level field, or lab fallback.
  2. Use the failing field metric to choose a specific journey and interaction to record in DevTools.
  3. Repeat the trace to verify the mechanism, then wait for the field window to judge the real-user outcome.

How I use it for technical SEO

I’ve leaned on the Performance panel for years — not as a standalone deliverable, but as the tool I reach for when a score isn’t enough and I need to see the actual mechanics. A few concrete uses:

Finding the exact LCP element. This is the single most valuable SEO trick in the panel, and it’s a recipe I’ve taught from stage. In my Page Experience Update (TMC, June 2021) deck, the steps are: Performance > check “Screenshots”, click “Start profiling and reload page”, find LCP on the timing graph, then click the node — this is the element for LCP. DevTools tells you precisely which element Google would count as your Largest Contentful Paint, so you know exactly what to optimize. Richie Lauridsen of Seer Interactive describes the same technique in Search Engine Journal: “In hovering over the flag for LCP, we can actually see the piece of content flagged to be the largest contentful paint during the page load” (3 Ways to Use Chrome DevTools for SEO Troubleshooting). That two independent write-ups land on the same recipe tells you it’s a standard workflow, not a one-off.

Explaining renderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. to people. In my JavaScript SEO guide I use the panel to make the rendering pipeline visible: “In Chrome Dev Tools, if you run a test on the ‘Performance’ tab, you get a loading chart.” Walking through that chart — download, HTML parse, JS execution, layout, paint — is how I explain to clients and colleagues that GooglebotGooglebot is Google's web crawler — the software that fetches pages so Google can index and rank them. It comes in two variants, Googlebot Smartphone (primary, under mobile-first indexing) and Googlebot Desktop, and runs an evergreen Chromium renderer.’s rendering doesn’t do everything a full browser paint does, which is central to diagnosing JS SEO problems.

Spotting render-blocking third parties and diagnosing layout shift round it out: the network waterfall shows what’s holding up the first paint, and the trace (plus the CLS metric) shows what shifted and when.

The Googlebot myth (the one to actually internalize)

Here’s the trap: “if it looks fine in my Performance panel, Googlebot sees it fine too.” It doesn’t follow. The panel profiles your local, full-featured Chrome. Googlebot renders with the Web Rendering Service, a recent-but-not-identical Chromium build that doesn’t support everything a full browser does and behaves differently (it’s stateless, denies permission prompts, and so on — see crawling and renderingCrawling is how search engines use automated bots (like Googlebot and Bingbot) to discover URLs and download pages. A page has to be crawlable to be indexed, but crawling on its own isn't a ranking factor.). The Performance panel is superb for understanding and diagnosing rendering behavior; it is not a substitute for confirming what’s actually crawlable and indexable. For that, use Search Console’s URL Inspection toolA Google Search Console feature that reports how Google sees one specific URL on a property you own. By default it shows the last-indexed snapshot; a separate \"Test live URL\" mode fetches the current version. or a raw fetch.

A quick disambiguation footnote

Don’t confuse the Performance panel with the Performance monitor — a separate, smaller DevTools feature that shows a live strip of real-time metrics (CPU usage, JS heap, DOM nodes) rather than a recorded trace. Same word, different tool.

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.