Ngôn ngữ

Hướng dẫn về Chrome DevTools Performance Panel

Đó Performance panel là Chrome DevTools' được xây dựng-trong, local profiler cho recording cách một trang loads và chạy, reading một flame chart, finding của bạn LCP element, và diagnosing Core Web Vitals các vấn đề — điều này có thể cũng cho thấy tùy chọn real-người dùng CrUX trường dữ liệu alongside của bạn local trace. Điều gì điều này là, cách đọc điều này, và vì sao điều này không điều gì Googlebot sees.

Xuất bản lần đầu: 3 thg 7, 2026 · Cập nhật lần cuối: 8 thg 8, 2026 · Advanced
Ngôn ngữ
AIĐược viết bởiAI v2

Đó Chrome DevTools Performance panel là một local profiler được xây dựng vào Chrome (và Chromium-based Edge). Bạn record một trace và đọc đó thô detail of cách một trang loads và chạy: một flame chart of main-chuỗi trao đổi hoạt động, an FPS/CPU timeline, một network waterfall, một filmstrip, và — since đó 2023–2024 redesign — một trực tiếp Core Web Vitals view plus an Insights sidebar (LCP phase breakdown, render-blocking các yêu cầu, forced reflow, bên thứ ba cost). Nơi Lighthouse/PageSpeed Insights score một trang và list các cách sửa, đó Performance panel hands bạn đó trace to explore yourself. Three điều to nhận right: đó recorded trace itself là của bạn local trình duyệt behavior, không Googlebot's Web Rendering Service; đó trace là lab evidence, though đó panel có thể tùy chọn cho thấy real-người dùng CrUX trường dữ liệu alongside điều này — đó hai không phải đó giống nhau việc đo lường; và đó standalone Performance Insights panel đã là đã xóa trong Chrome 132, của nó features folded vào đó main panel Insights tab. Cho SEO đây là đó fastest được xây dựng-trong way to pinpoint của bạn chính xác LCP element và 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

Tóm tắt — Performance panel là Chrome DevTools’ được xây dựng-trong, local profiler. Open nó và nó hiển thị trực tiếp local LCP/CLS (và INP sau khi bạn interact); hit Bắt đầu profiling và reload trang (với Screenshots on) để record đầy đủ load. bạn đọc flame chart của main-chuỗi trao đổi hoạt động, FPS/CPU timeline, network waterfall, và analysis tabs (Bottom-up, Call Tree, Event Log), plus Insights sidebar đó breaks LCP vào của nó four sub-parts và flags render-blocking các yêu cầu, forced reflow, và thứ ba-party cost. nó fastest được xây dựng-trong way để pinpoint của bạn chính xác LCP element. Three điều để giữ straight: nó profiles của bạn trình duyệt, không Googlebot’s Web Rendering Service; recorded trace là lab evidence, và trong khi panel có thể tùy chọn hiển thị thực-người dùng CrUX trường dữ liệu alongside nó, đó trường overlay không phải giống nhau việc đo lường as của bạn local trace; và old standalone Performance Insights panel là đã xóa trong Chrome 132 — những điều đó features hiện tại trực tiếp bên trong điều này panel Insights tab. Throttling multipliers là relative để của bạn machine, không absolute benchmark.

Điều gì Performance panel thực ra là

Google framing là đơn giản: “Use the Performance panel to analyze your website’s performance” (bản dịch) «Dùng đó Performance panel to analyze của bạn website performance» và “The Performance panel lets you record CPU performance profiles of your web applications” (bản dịch) «Đó Performance panel cho phép bạn record CPU performance profiles of của bạn web applications» (Chrome DevTools tài liệu). đây là một profiler — bạn record một trace of mọi thứ đó trình duyệt làm over một slice of time, thì explore đó trace.

nó worth positioning so với của nó siblings up front, vì mọi người conflate them constantly:

  • Lighthouse / PageSpeed Insights chạy automated audit và cho bạn score plus prioritized recommendations (PSI cũng adds thực CrUX trường dữ liệu). Scored, automated, opinionated.
  • WebPageTest chạy của bạn trang on remote thực device, records lịch sử, shareable kết quả, và hỗ trợ multi-step scripting. Remote, shareable, thorough.
  • ** Performance panel** cho bạn thô, interactive trace từ của bạn own local trình duyệt — không score, không account, không remote machine. Deeper và nhiều hơn flexible, nhưng bạn làm interpreting.

recorded trace itself là local, lab evidence — snapshot của của bạn một trình duyệt, device, và network tại đó moment. nhưng panel khoảng nó không phải purely lab tool: since redesign nó có thể cũng hiển thị tùy chọn thực-người dùng CrUX trường các chỉ số alongside của bạn local kết quả. giữ hai straight — local lab so với. remote lab so với. thực-người dùng trường — vì đó phân biệt là spine của toàn bộ web performance tools cluster, và nó Điều gì myths dưới turn on.

brief history (so bạn know mà panel bạn’re even looking tại)

Đó panel đã được khoảng một dài time. Elizabeth Sweeny và Paul Irish of đó Chrome DevTools team put điều này này 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,” (bản dịch) «Đó Performance panel trong Chrome DevTools có đã helping nhà phát triển đo lường và optimize của họ runtime performance trong một form hoặc another cho đó tốt hơn part of 15 năm,» và “Starting with a panel called ‘Timeline’, it evolved to the Performance panel you know today” (bản dịch) «Starting với một panel called ‘Timeline’, điều này evolved to đó Performance panel bạn know hôm nay» (Performance tooling trong 2024 và beyond). Along đó way, as they note, “Lighthouse was launched in 2016 to help spot optimization opportunities more easily,” (bản dịch) «Lighthouse đã là launched trong 2016 to help spot optimization opportunities hơn easily,» và “The experimental Performance Insights panel was released in 2022 to test new ways of surfacing performance insights.” (bản dịch) «Đó experimental Performance Insights panel đã là đã phát hành trong 2022 to kiểm thử new ways of surfacing performance insights.»

Đó cuối cùng một matters cho currency. Đó standalone Performance Insights panel đã là an thử nghiệm, và đây là đã biến mất: Google own notice trạng thái đó “The Performance insights panel is deprecated and removed from DevTools starting with Chrome version 132. We recommend you use the Performance > Insights tab instead” (bản dịch) «Đó Performance insights panel là deprecated và đã xóa từ DevTools starting với Chrome version 132. We khuyến nghị bạn dùng đó Performance > Insights tab thay vì» (deprecation notice). Nếu một tutorial hoặc screenshot bạn là sau cho thấy một tách biệt “Performance Insights” (bản dịch) «Performance Insights» panel, điều này có trước Chrome 132 và là stale — đó insights hiện tại trực tiếp trong một sidebar bên trong đó regular Performance panel.

Opening nó và trực tiếp các chỉ số screen

Open DevTools và select Performance từ đó tabs tại đó top. As Google mô tả điều này, “When you open the Performance panel, it immediately captures and shows you your local Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) metrics,” (bản dịch) «Khi bạn open đó Performance panel, điều này immediately captures và cho thấy bạn của bạn local Largest Contentful Paint (LCP) và Cumulative Layout Shift (CLS) các chỉ số,» và “If you interact with your page, the Performance panel also captures your local Interaction to Next Paint (INP)” (bản dịch) «Nếu bạn interact với trang của bạn, đó Performance panel cũng captures của bạn local Interaction to Tiếp theo Paint (INP)» (overview tài liệu). Này landing screen là part of đó redesign Rick Viscomi described as “a completely redesigned Performance panel landing page featuring a live view of your local Core Web Vitals performance” (bản dịch) «một completely redesigned Performance panel landing trang featuring một trực tiếp view of của bạn local Core Web Vitals performance» (Monitor của bạn local và real-người dùng Core Web Vitals trong DevTools). So trước khi bạn record bất cứ điều gì, bạn đã có của bạn đầy đủ set of local Core Web Vitals.

Recording trace: runtime so với. load

có hai điều Bạn có thể record, và phân biệt matters:

  • Runtime performance — đó trang là đã loaded và bạn muốn to profile điều này trong khi điều này chạy (an animation, một chậm interaction, một scroll jank). Google: “Runtime performance is how your page performs when it is running, as opposed to loading” (bản dịch) «Runtime performance là cách trang của bạn performs khi điều này là đang chạy, as opposed to loading» (Analyze runtime performance).
  • Load performance — bạn muốn đó toàn bộ story từ một fresh navigation. Click Bắt đầu profiling và reload trang. Turn on Screenshots đầu tiên so bạn nhận một filmstrip of visual frames alongside đó trace.

Đối với SEO hoạt động — LCP, layout shift, render-blocking scripts — bạn gần như luôn muốn load recording với screenshots on.

trace chỉ contains Điều gì happened bên trong của nó recording window — whatever bạn đã không capture ( interaction bên ngoài window, lazy-loaded hoạt động đó fires sau đó) là đơn giản unobserved, không absent. nếu bạn muốn trace bạn hoặc ai đó khác có thể reproduce hoặc so sánh sau đó, note down: Chrome version và date (labels, shortcuts, và chính xác UI shift phát hành để phát hành), liệu screenshots là on, của bạn CPU/network throttling settings, và liệu bạn left Nâng cao paint/CSS instrumentation và JavaScript sampling options tại của họ defaults — mỗi của những điều đó adds detail và overhead, so trace recorded với khác settings không phải trực tiếp comparable để một recorded không có them.

Reading trace

recording cho bạn several stacked tracks. main ones:

  • Đó flame chart / Main track. Này là đó heart of điều này. Google: “DevTools shows you a flame chart of activity on the main thread, over time. The x-axis represents the recording, over time,” (bản dịch) «DevTools cho thấy bạn một flame chart of activity on đó main chuỗi trao đổi, theo thời gian. Đó x-axis represents đó recording, theo thời gian,» và “Use the Main track to view activity that occurred on the page’s main thread” (bản dịch) «Dùng đó Main track to view activity đó occurred on đó trang main chuỗi trao đổi» (features reference). Time chạy left to right; đó stack of bars under mỗi moment là đó call stack. MỘT wider bar = một lâu hơn-đang chạy task — đó là nơi của bạn time went. Đó nesting cho thấy bạn trace structure — điều gì called điều gì, và khi — nhưng điều này không by itself proof đó một parent task gây ra một rộng hơn người dùng-experience vấn đề; treat điều này as đó starting point cho một hypothesis, thì xác nhận.
  • Đó FPS chart. MỘT nhanh đọc 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” (bản dịch) «Bất cứ khi nào bạn see một red bar trên FPS, điều này có nghĩa là đó đó framerate dropped so thấp đó đây là probably harming người dùng experience» (runtime tài liệu). bạn là aiming cho một smooth 60 FPS; red bars mark đó rough spots.
  • Đó CPU chart cho thấy cách busy đó main chuỗi trao đổi đã là over đó recording.
  • Đó Network track là một waterfall of mỗi yêu cầu — điều gì loaded, khi, và trong điều gì order (này là nơi render-blocking các tài nguyên cho thấy up).
  • Đó Timings track surfaces custom performance.mark() measurements nếu của bạn app emits them.
In the Network track, read left to right and separate requests on the blocking path from requests that merely overlap it. Nguồn: Render-Blocking Resources

The illustrative trace contains HTML from 0 to 180 milliseconds, blocking CSS from 110 to 390 milliseconds, synchronous JavaScript from 190 to 540 milliseconds, an asynchronous analytics request from 230 to 470 milliseconds, and a font from 390 to 560 milliseconds. First paint occurs at 560 milliseconds. This is a teaching example, not a captured trace.

© Patrick Stox LLC · CC BY 4.0 ·

Dưới flame chart, three analysis tabs slice giống nhau dữ liệu differently:

  • Bottom-up — “Use the Bottom-up tab to view which activities directly took up the most time in aggregate.” (bản dịch) «Dùng đó Bottom-up tab to view mà activities trực tiếp took up đó hầu hết time trong aggregate.» Best cho “what single function is eating my time?” (bản dịch) «điều gì single function là eating my time?»
  • Call tree — “Use the Call tree tab to view which root activities cause the most work.” (bản dịch) «Dùng đó Call tree tab to view mà root activities nguyên nhân đó hầu hết hoạt động.» Best cho “which top-level task kicked all this off?” (bản dịch) «mà top-level task kicked all này off?»
  • Event log — đó giống nhau events trong chronological order.

Insights sidebar

redesign phần lớn hữu ích addition cho diagnosis là Insights sidebar — successor để đã xóa standalone Performance Insights panel. thay vì bạn hunting qua flame chart, nó surfaces cụ thể, named các vấn đề. ones đó quan trọng phần lớn Đối với SEO:

  • LCP breakdown. Google splits LCP vào four sub-parts — time để đầu tiên byte, tài nguyên load delay, tài nguyên load time, và element render delay (LCP breakdown insight). điều này tells bạn Vì sao của bạn LCP là chậm (máy chủ? muộn-loading image? render blocking?) thay vì chỉ đó nó chậm.
  • Render-blocking các yêu cầu — CSS/JS đó delayed đầu tiên paint (render-blocking insight).
  • Forced reflow — nơi trình duyệt có để pause script để recalculate layout.
  • thứ ba-party cost — Cách nhiều của bạn embeds, tags, và widgets là costing bạn.

Vì những là surfaced tự động, đó Insights sidebar là đó closest đó Performance panel nhận to Lighthouse “here’s what to fix” (bản dịch) «ở đây điều cần cách sửa» experience — trong khi vẫn letting bạn drop vào đó thô trace behind any insight.

Treat mỗi insight as guided hypothesis, không proof. nó identifies potential vấn đề và connects bạn để trace context behind nó, nhưng flagging item không phải giống nhau as proving đó item gây ra outcome bạn’re chasing, hoặc đó sửa nó sẽ. xác nhận với trace itself — và với trước khi/sau khi re-recording — trước khi bạn tell client hoặc teammate insight là ** nguyên nhân.

CPU và network throttling (và caveat đó trips mọi người up)

của bạn dev machine là far nhanh hơn hơn typical phone, so trang đó feels instant để Bạn có thể là painful cho thực người dùng. Throttling simulates weaker conditions: CPU slowdown multiplier và network profile (Chậm 4G, etc.).

Đó catch, straight từ 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” (bản dịch) «Throttling là relative to của bạn computer capabilities. Ví dụ, đó 2x slowdown option làm của bạn CPU operate 2 times chậm hơn hơn của nó thông thường ability» (features reference). Đó có nghĩa là một “4x slowdown” là không an absolute benchmark — 4x on một fast laptop và 4x on một yếu một không đó giống nhau kết quả. đây là một relative dial, không một tiêu chuẩn bạn có thể so sánh across machines. MỘT second, practical dùng DebugBear points out trong của họ deep DevTools walkthrough: throttling có thể cũng chỉ chậm đó recording down so dense clusters of events là legible.

Lab dữ liệu ở đây so với. trường dữ liệu Google ranks on

Đây là nơi SEOs nhận burned. Performance panel numbers — trực tiếp các chỉ số và mỗi recording — là lab dữ liệu từ của bạn machine, on của bạn network, tại đó moment. Google thực tế Core Web Vitals tín hiệu xếp hạng xuất hiện từ thực-người dùng CrUX trường dữ liệu ( 28-day aggregate của thực Chrome người dùng), mà bạn see trong Search Console và PageSpeed Insights. perfect local recording làm không bảo đảm passing trường score — thực người dùng có chậm hơn devices, tệ hơn networks, và nhiều hơn variety hơn của bạn một kiểm thử.

Đó redesigned panel thực ra bridges này: since đó cập nhật, điều này có thể cho thấy của bạn real-người dùng CrUX trường dữ liệu right alongside của bạn local kết quả, so bạn có thể so sánh “what I just measured” (bản dịch) «điều gì I chỉ measured» so với “what real users experience.” (bản dịch) «điều gì real người dùng experience.» Khi đó trường overlay là khả dụng, bạn có thể switch điều này giữa đó URL và origin level và giữa mobile và desktop, và đó UI exposes đó dữ liệu period đây là drawing từ — so match những to đó trace bạn là comparing điều này so với. Even khớp đó way, trường-informed environment settings (throttling presets đó panel khuyến nghị based on CrUX) approximate một được chọn real-người dùng segment; một single local recording vẫn không recreate đó underlying population distribution hoặc predict một xếp hạng outcome. Đó overlay là đó clearest được xây dựng-trong reminder đó của bạn local trace và Google tín hiệu xếp hạng là hai khác nhau numbers. Cho đó đầy đủ lab-so với-trường treatment, see đó web performance tools hub và đó sibling Core Web Vitals và CrUX explainers.

Cách I sử dụng nó cho kỹ thuật SEO

I’ve leaned on Performance panel cho năm — không as standalone deliverable, nhưng as tool I reach cho Khi score không phải đủ và I cần để see thực tế mechanics. một vài concrete dùng:

Finding đó chính xác LCP element. Này là đó single hầu hết valuable SEO trick trong đó panel, và đây là một recipe I’ve taught từ stage. Trong my Trang Experience Cập nhật (TMC, June 2021) deck, đó steps là: Performance > kiểm tra “Screenshots”, click “Start profiling and reload page” (bản dịch) «Bắt đầu profiling và reload trang», tìm LCP on đó timing graph, thì click đó node — này là đó element cho LCP. DevTools tells bạn precisely mà element Google sẽ count as của bạn Largest Contentful Paint, so bạn know chính xác điều cần optimize. Richie Lauridsen of Seer Interactive mô tả đó giống nhau technique trong 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” (bản dịch) «Trong hovering over đó flag cho LCP, we có thể thực ra see đó piece of nội dung flagged to là đó largest contentful paint during đó trang load» (3 Ways to Dùng Chrome DevTools cho SEO Khắc phục sự cố). Đó hai independent ghi-ups land on đó giống nhau recipe tells bạn đây là một tiêu chuẩn workflow, không một một-off.

Explaining rendering to mọi người. Trong my JavaScript SEO hướng dẫn I dùng đó panel to làm đó rendering pipeline visible: “In Chrome Dev Tools, if you run a test on the ‘Performance’ tab, you get a loading chart.” (bản dịch) «Trong Chrome Dev Tools, nếu bạn chạy một kiểm thử on đó ‘Performance’ tab, bạn nhận một loading chart.» Walking qua đó chart — download, HTML parse, JS execution, layout, paint — là cách I giải thích to clients và colleagues đó Googlebot’s rendering không làm mọi thứ một đầy đủ trình duyệt paint làm, mà là central to diagnosing JS SEO các vấn đề.

Spotting render-blocking thứ ba parties và diagnosing layout shift round nó out: network waterfall hiển thị Điều gì holding up đầu tiên paint, và trace (plus CLS chỉ số) hiển thị Điều gì shifted và Khi.

Googlebot myth ( một để thực ra internalize)

Ở đây đó trap: “if it looks fine in my Performance panel, Googlebot sees it fine too.” (bản dịch) «nếu điều này looks fine trong my Performance panel, Googlebot sees điều này fine cũng.» Điều này không follow. Đó panel profiles của bạn local, đầy đủ-featured Chrome. Googlebot renders với đó Web Rendering Service, một gần đây-nhưng-không-giống hệt Chromium xây dựng đó không hỗ trợ mọi thứ một đầy đủ trình duyệt làm và behaves differently (đây là stateless, denies permission prompts, và so on — see crawling và rendering). Đó Performance panel là superb cho understanding và diagnosing rendering behavior; điều này không phải một substitute cho confirming điều gì là thực ra crawlable và indexable. Cho đó, dùng Search Console’s URL Inspection tool hoặc một thô fetch.

nhanh disambiguation footnote

không confuse Performance panel với Performance monitor — tách biệt, nhỏ hơn DevTools feature đó hiển thị trực tiếp strip của thực-time các chỉ số (CPU usage, JS heap, DOM nodes) thay vì recorded trace. giống nhau word, khác tool.

Add an expert note

Pin an expert quote

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