Chrome DevTools performa Panel

TL;DR — performa panel adalah sebuah alat dibangun ke Chrome (open DevTools, click performa) itu records persis apa Anda browser melakukan sementara sebuah halaman memuat — setiap script, setiap network permintaan, setiap paint. Unlike PageSpeed Insights, ini tidak memberikan Anda sebuah score; ini memberikan Anda mentah picture so Anda dapat temukan mengapa sebuah halaman adalah slow. penting: ini menampilkan apa Anda browser melakukan, tidak apa Google’s crawler melakukan, dan ini adalah free dengan Tidak account.

Apa ini adalah

Chrome DevTools memiliki sebuah lot dari tabs. performa panel adalah satu untuk recording bagaimana sebuah halaman memuat dan berjalan, lalu digging ke detail. ini captures Anda browser’s berfungsi di atas time — downloading files, berjalan JavaScript, laying out dan painting halaman — dan lays ini out sebagai sebuah timeline Anda dapat zoom ke.

Think dari perbedaan ini cara. PageSpeed Insights dan Lighthouse adalah like sebuah report card: mereka jalankan sebuah test dan hand Anda sebuah score plus sebuah untuk-melakukan list. performa panel adalah like sebuah security-camera recording dari seluruh pemuatan halaman — Tidak score, tetapi Anda dapat rewind dan see tepat moment sesuatu went wrong.

cara open ini dan apa Anda see pertama

1. Open DevTools (right-click halaman → Inspect, atau press Cmd+Option+I pada Mac / Ctrl+Shift+I pada Windows).
2. Click performa tab di top.

ketika Anda membukanya, panel sudah menampilkan metrik halaman Anda: Largest Contentful Paint (LCP) dan Cumulative Layout Shift (CLS) — dua dari three Core Web Vitals — diukur langsung di Anda own browser. Click sekitar halaman dan ini picks up Interaction untuk Berikutnya Paint (INP) too. Anda mendapatkan sebuah snapshot dari Anda local Core Web Vitals tanpa recording apa pun.

Recording sebuah pemuatan halaman

untuk see penuh story dari sebuah muat, click Mulai profiling dan reload halaman (turn pada Screenshots checkbox pertama so Anda juga mendapatkan sebuah filmstrip dari apa halaman looked like di setiap moment). panel reloads halaman dan records semuanya. Ketika ini berhenti, Anda mendapatkan sebuah dense timeline: colored bars menunjukkan scripting, rendering, dan painting; sebuah strip dari screenshots di seluruh top; dan sebuah network bagian menunjukkan apa dimuat ketika.

ini looks intimidating pertama time. satu hal sebagian besar SEOs sebenarnya come di sini untuk melakukan adalah sederhana, dan I’ll walk melalui ini di Advanced tab: temukan tepat element itu adalah Anda LCP — biggest hal halaman painted — so Anda know apa untuk mengoptimalkan.

hal orang mendapatkan wrong

** performa panel menampilkan apa Anda Chrome browser melakukan — tidak apa Googlebot melakukan.** Googlebot renders halaman dengan -nya own sistem ( Web rendering Service), yang tidak identical untuk Anda penuh desktop browser. So panel adalah fantastic untuk diagnosing speed dan understanding rendering, tetapi ini adalah tidak sebuah cara untuk konfirmasi apa Google dapat sebenarnya crawl dan indeks. untuk itu Anda gunakan Google Search Console’s URL Inspection alat.

ingin penuh walkthrough — reading flame chart, Insights sidebar, finding Anda LCP element, throttling untuk simulate sebuah slow phone, dan bagaimana ini compares untuk Lighthouse dan WebPageTest? Switch untuk Advanced tab.

TL;DR — performa panel adalah Chrome DevTools’ dibangun-di, local profiler. Open ini dan ini menampilkan langsung local LCP/CLS (dan INP setelah Anda interact); hit Mulai profiling dan reload halaman (dengan Screenshots pada) untuk record sebuah penuh muat. Anda baca sebuah flame chart dari main-utas berfungsi, sebuah FPS/CPU timeline, sebuah network waterfall, dan analysis tabs (Bottom-up, panggil Tree, Event Log), plus sebuah Insights sidebar itu breaks LCP ke -nya four sub-bagian dan flags render-blocking permintaan, forced reflow, dan ketiga-party cost. ini adalah fastest dibangun-di cara untuk pinpoint Anda tepat LCP element. Three hal untuk pertahankan straight: ini profiles Anda browser, tidak Googlebot’s Web rendering Service; recorded trace adalah lab evidence, dan sementara panel dapat secara opsional tampilkan nyata-pengguna CrUX field data alongside ini, itu field overlay adalah tidak yang sama pengukuran sebagai Anda local trace; dan old standalone performa Insights panel adalah dihapus di Chrome 132 — itu fitur now langsung di dalam ini panel’s Insights tab. Throttling multipliers adalah relative untuk Anda machine, tidak sebuah absolute benchmark.

Apa performa panel sebenarnya adalah

Google’s framing adalah plain: “Gunakan itu Performance panel untuk analyze Anda website’s performance” (terjemahan) “gunakan performa panel untuk analyze Anda situs web’s performa” dan “The Performance panel lets you record CPU performance profiles of your web applications” (terjemahan) “ performa panel lets Anda record CPU performa profiles dari Anda web applications” (Chrome DevTools docs). ini adalah sebuah profiler — Anda record sebuah trace dari semuanya browser melakukan di atas sebuah slice dari time, lalu explore itu trace.

ini adalah worth positioning terhadap -nya siblings up front, karena orang conflate them constantly:

• Lighthouse / PageSpeed Insights jalankan sebuah automated audit dan memberikan Anda sebuah score plus prioritized recommendations (PSI juga menambahkan nyata CrUX data lapangan). Scored, automated, opinionated.
• WebPageTest berjalan Anda halaman pada sebuah remote nyata device, records historical, shareable hasil, dan mendukung multi-langkah scripting. Remote, shareable, thorough.
• ** performa panel** memberikan Anda sebuah mentah, interactive trace dari Anda own local browser — Tidak score, Tidak account, Tidak remote machine. Deeper dan lebih flexible, tetapi Anda melakukan interpreting.

recorded trace itself adalah local, lab evidence — sebuah snapshot dari Anda satu browser, device, dan network di itu moment. tetapi panel sekitar ini tidak purely sebuah lab alat: since redesign ini dapat juga tampilkan opsional nyata-pengguna CrUX field metrics alongside Anda local hasil. pertahankan dua straight — local lab vs. remote lab vs. nyata-pengguna field — karena itu pembedaan adalah spine dari seluruh web performa alat cluster, dan ini adalah apa myths di bawah turn pada.

sebuah brief history (so Anda know yang panel Anda’re bahkan looking di)

panel memiliki telah sekitar sebuah panjang time. Elizabeth Sweeny dan Paul Irish dari Chrome DevTools team menjelaskan hal ini: “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,” (terjemahan) “ performa panel di Chrome DevTools memiliki telah helping developers mengukur dan mengoptimalkan mereka runtime performa di satu form atau lainnya untuk better bagian dari 15 tahun,” dan “Starting with a panel called ‘Timeline’, it evolved to the Performance panel you know today” (terjemahan) “Starting dengan sebuah panel called ‘Timeline’, ini evolved untuk performa panel Anda know hari ini” (performa tooling di 2024 dan beyond). Along cara, sebagai mereka note, “Lighthouse was launched in 2016 to help spot optimization opportunities more easily,” (terjemahan) “Lighthouse adalah launched di 2016 untuk help spot optimization opportunities lebih easily,” dan “The experimental Performance Insights panel was released in 2022 to test new ways of surfacing performance insights.” (terjemahan) “ experimental performa Insights panel adalah dirilis di 2022 untuk test baru cara dari surfacing performa insights.”

itu terakhir satu penting untuk currency. standalone performa Insights panel adalah sebuah experiment, dan ini adalah hilang: Google’s own notice status itu “The Performance insights panel is deprecated and removed from DevTools starting with Chrome version 132. We recommend you use the Performance > Insights tab instead” (terjemahan) “Panel Performance Insights sudah deprecated dan dihapus mulai Chrome versi 132. Gunakan tab Performance > Insights.” (deprecation notice). jika sebuah tutorial atau screenshot Anda’re berikut menampilkan sebuah terpisah “Performance Insights” (terjemahan) “performa Insights” panel, ini lebih lama dari Chrome 132 dan adalah stale — insights now langsung di sebuah sidebar di dalam regular performa panel.

Opening ini dan langsung metrics screen

Open DevTools dan select performa dari tabs di top. sebagai Google mendeskripsikan ini, “When you open the Performance panel, it immediately captures and shows you your local Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) metrics,” (terjemahan) “Saat panel Performance dibuka, panel langsung menangkap dan menampilkan metrik lokal Largest Contentful Paint (LCP) dan Cumulative Layout Shift (CLS).” dan “If you interact with your page, the Performance panel also captures your local Interaction to Next Paint (INP)” (terjemahan) “Jika Anda berinteraksi dengan halaman, panel Performance juga menangkap Interaction to Next Paint (INP) lokal.” (overview docs). ini landing screen adalah bagian dari redesign Rick Viscomi described sebagai “a completely redesigned Performance panel landing page featuring a live view of your local Core Web Vitals performance” (terjemahan) “sebuah completely redesigned performa panel landing halaman featuring sebuah langsung view dari Anda local Core Web Vitals performa” (Monitor Anda local dan nyata-pengguna Core Web Vitals di DevTools). So sebelum Anda record apa pun, Anda sudah memiliki Anda penuh set dari local Core Web Vitals.

Recording sebuah trace: runtime vs. muat

ada dua hal Anda dapat record, dan pembedaan penting:

• Runtime performa — halaman adalah sudah dimuat dan Anda ingin profile ini sementara ini berjalan (sebuah animation, sebuah slow interaction, sebuah scroll jank). Google: “Runtime performance is how your page performs when it is running, as opposed to loading” (terjemahan) “Runtime performa adalah bagaimana Anda halaman performs ketika ini adalah berjalan, sebagai opposed untuk memuat” (Analyze runtime performa).
• muat performa — Anda ingin seluruh story dari sebuah fresh navigation. Click Mulai profiling dan reload halaman. Turn pada Screenshots pertama so Anda mendapatkan sebuah filmstrip dari visual frames alongside trace.

untuk SEO berfungsi — LCP, layout shift, render-blocking scripts — Anda hampir selalu ingin muat recording dengan screenshots pada.

sebuah trace hanya berisi apa happened di dalam -nya recording window — whatever Anda tidak capture (sebuah interaction di luar window, lazy-dimuat berfungsi itu fires kemudian) adalah sekadar unobserved, tidak absent. jika Anda ingin sebuah trace Anda atau seseorang else dapat reproduce atau bandingkan kemudian, note down: Chrome versi dan date (labels, shortcuts, dan tepat UI shift rilis untuk rilis), apakah screenshots adalah pada, Anda CPU/network throttling settings, dan apakah Anda left advanced paint/CSS instrumentation dan JavaScript sampling options di mereka defaults — setiap dari itu menambahkan detail dan overhead, so sebuah trace recorded dengan berbeda settings tidak secara langsung comparable untuk satu recorded tanpa them.

Reading trace

sebuah recording memberikan Anda several stacked tracks. main ones:

• ** flame chart / Main track.** ini adalah heart dari ini. Google: “DevTools shows you a flame chart of activity on the main thread, over time. The x-axis represents the recording, over time,” (terjemahan) “DevTools menampilkan diagram aktivitas pada utas utama dalam bentuk flame chart dari waktu ke waktu. Sumbu-x menggambarkan rekaman dari waktu ke waktu,” dan “Use the Main track to view activity that occurred on the page’s main thread” (terjemahan) “gunakan Main track untuk view activity itu occurred pada halaman’s main utas” (fitur reference). Time berjalan left untuk right; stack dari bars di bawah setiap moment adalah panggil stack. sebuah wider bar = sebuah lebih lama-berjalan task — itu’s di mana Anda time went. itu nesting menampilkan Anda trace structure — apa called apa, dan ketika — tetapi ini tidak oleh itself proof itu sebuah parent task disebabkan sebuah lebih luas pengguna-experience masalah; treat ini sebagai starting poin untuk sebuah hypothesis, lalu konfirmasi.
• ** FPS chart.** sebuah quick baca pada 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” (terjemahan) “Setiap kali Anda see sebuah red bar di atas FPS, ini berarti itu framerate dropped so rendah itu ini adalah probably harming pengguna experience” (runtime docs). Anda’re aiming untuk sebuah smooth 60 FPS; red bars mark rough spots.
• ** CPU chart** menampilkan bagaimana busy main utas adalah di atas recording.
• ** Network track** adalah sebuah waterfall dari setiap permintaan — apa dimuat, ketika, dan di apa order (ini adalah di mana render-blocking resources tampilkan up).
• ** Timings track** surfaces custom performance.mark() measurements jika Anda app emits them.

Di bawah flame chart, three analysis tabs slice yang sama data differently:

• Bottom-up — “Gunakan itu Bottom-up tab untuk view yang activities secara langsung took up itu paling time di aggregate.” (terjemahan) “gunakan Bottom-up tab untuk view yang activities secara langsung took up paling time di aggregate.” Best untuk “what single function is eating my time?” (terjemahan) “apa single function adalah eating my time?”
• panggil tree — “Use the Call tree tab to view which root activities cause the most work.” (terjemahan) “gunakan panggil tree tab untuk view yang root activities penyebab sebagian besar berfungsi.” Best untuk “which top-level task kicked all this off?” (terjemahan) “yang top-tingkat task kicked semua ini off?”
• Event log — yang sama events di chronological order.

Insights sidebar

redesign’s sebagian besar berguna addition untuk diagnosis adalah Insights sidebar — successor untuk dihapus standalone performa Insights panel. alih-alih Anda hunting melalui flame chart, ini surfaces spesifik, named masalah. ones itu penting sebagian besar untuk SEO:

• LCP breakdown. Google splits LCP ke four sub-bagian — Time untuk pertama Byte, resource muat delay, resource muat time, dan element render delay (LCP breakdown insight). ini tells Anda mengapa Anda LCP adalah slow (server? sebuah late-memuat image? render blocking?) alih-alih hanya itu ini adalah slow.
• Render-blocking permintaan — CSS/JS itu delayed pertama paint (render-blocking insight).
• Forced reflow — di mana browser memiliki untuk pause script untuk recalculate layout.
• ketiga-party cost — bagaimana banyak Anda embeds, tags, dan widgets adalah costing Anda.

Karena ini adalah surfaced secara otomatis, Insights sidebar adalah closest performa panel mendapatkan untuk Lighthouse’s “di sini’s apa untuk perbaiki” (terjemahan) “di sini’s apa untuk perbaiki” experience — sementara masih letting Anda drop ke mentah trace behind apa pun insight.

Treat setiap insight sebagai sebuah guided hypothesis, tidak proof. ini identifies sebuah potential issue dan connects Anda untuk trace context behind ini, tetapi flagging sebuah item tidak yang sama sebagai proving itu item disebabkan outcome Anda’re chasing, atau itu memperbaiki ini akan. Konfirmasi dengan trace itself — dan dengan sebuah sebelum/setelah re-recording — sebelum Anda tell sebuah client atau teammate sebuah insight adalah ** penyebab.

CPU dan network throttling (dan caveat itu trips orang up)

Anda dev machine adalah far lebih cepat daripada sebuah typical phone, so sebuah halaman itu feels instant untuk Anda dapat menjadi painful untuk pengguna nyata. Throttling simulates weaker conditions: sebuah CPU slowdown multiplier dan sebuah network profile (Slow 4G, dan seterusnya.).

catch, straight dari Google: “Throttling adalah relative untuk Anda computer’s capabilities. Misalnya, itu 2x slowdown option membuat Anda CPU operate 2 times lebih lambat daripada its biasa ability” (terjemahan) “Throttling adalah relative untuk Anda computer’s capabilities. misalnya, 2x slowdown option membuat Anda CPU operate 2 times lebih lambat daripada -nya biasa ability” (fitur reference). itu berarti sebuah “4x slowdown” (terjemahan) “4x slowdown” adalah tidak sebuah absolute benchmark — 4x pada sebuah fast laptop dan 4x pada sebuah weak satu tidak yang sama hasil. ini adalah sebuah relative dial, tidak sebuah standard Anda dapat bandingkan di seluruh machines. sebuah kedua, practical gunakan DebugBear poin out di mereka deep DevTools walkthrough: throttling dapat juga hanya slow recording down so dense clusters dari events adalah legible.

data lab di sini vs. data lapangan Google peringkat pada

ini adalah di mana SEOs mendapatkan burned. performa panel’s angka — langsung metrics dan setiap recording — adalah data lab dari Anda machine, pada Anda network, di itu moment. Google’s sebenarnya Core Web Vitals sinyal peringkat muncul dari nyata-pengguna CrUX data lapangan (sebuah 28-day aggregate dari nyata Chrome pengguna), yang Anda see di Search Console dan PageSpeed Insights. sebuah perfect local recording melakukan tidak jaminan sebuah passing field score — pengguna nyata memiliki lebih lambat devices, worse networks, dan lebih variety daripada Anda satu test.

redesigned panel sebenarnya bridges ini: since perbarui, ini dapat tampilkan Anda nyata-pengguna CrUX data lapangan right alongside Anda local hasil, so Anda dapat bandingkan “apa I sekadar measured” (terjemahan) “apa I hanya diukur” terhadap “what real users experience.” (terjemahan) “apa pengguna nyata experience.” Ketika itu field overlay adalah tersedia, Anda dapat switch ini antara URL dan origin tingkat dan antara mobile dan desktop, dan UI exposes data period ini adalah drawing dari — so match itu untuk trace Anda’re comparing ini terhadap. bahkan cocok itu cara, field-informed environment settings (throttling presets panel recommends based pada CrUX) approximate sebuah dipilih nyata-pengguna segment; sebuah single local recording masih tidak recreate underlying population distribution atau predict sebuah peringkat outcome. itu overlay adalah clearest dibangun-di reminder itu Anda local trace dan Google’s sinyal peringkat adalah dua berbeda angka. untuk penuh lab-vs-field treatment, see web performa alat hub dan sibling Core Web Vitals dan CrUX explainers.

Bagaimana I gunakan ini untuk SEO teknis

I’ve leaned pada performa panel untuk tahun — tidak sebagai sebuah standalone deliverable, tetapi sebagai alat I reach untuk ketika sebuah score tidak cukup dan I perlu untuk see sebenarnya mechanics. sebuah sedikit concrete menggunakan:

Finding tepat LCP element. ini adalah single sebagian besar valuable SEO trick di panel, dan ini adalah sebuah recipe I’ve taught dari stage. di my pengalaman halaman Perbarui (TMC, June 2021) deck, langkah adalah: performa > periksa “Screenshots” (terjemahan) “Screenshots”, click “Mulai profiling dan reload halaman” (terjemahan) “Mulai profiling dan reload halaman”, temukan LCP pada timing graph, lalu click node — ini adalah element untuk LCP. DevTools tells Anda precisely yang element Google akan count sebagai Anda Largest Contentful Paint, so Anda know persis apa untuk mengoptimalkan. Richie Lauridsen dari Seer Interactive mendeskripsikan yang sama technique di mesin pencari Journal: “Di hovering over itu flag untuk LCP, we dapat sebenarnya see itu piece dari konten flagged untuk menjadi itu largest contentful paint during itu halaman load” (terjemahan) “di hovering di atas flag untuk LCP, kami dapat sebenarnya see piece dari konten flagged untuk menjadi Largest Contentful Paint selama pemuatan halaman” (3 cara untuk gunakan Chrome DevTools untuk SEO Troubleshooting). itu dua independent tulis-ups land pada yang sama recipe tells Anda ini adalah sebuah standard workflow, tidak sebuah satu kali.

Explaining rendering untuk orang. di my JavaScript SEO guide I gunakan panel untuk membuat rendering pipeline terlihat: “Di Chrome Dev Tools, jika Anda jalankan a test pada itu ‘Performance’ tab, Anda mendapatkan a loading chart.” (terjemahan) “di Chrome Dev alat, jika Anda jalankan sebuah test pada ‘performa’ tab, Anda mendapatkan sebuah memuat chart.” Walking melalui itu chart — download, HTML parse, JS execution, layout, paint — adalah bagaimana I jelaskan untuk clients dan colleagues itu Googlebot’s rendering tidak melakukan semuanya sebuah penuh browser paint melakukan, yang adalah central untuk diagnosing JS SEO masalah.

Spotting render-blocking ketiga parties dan diagnosing layout shift round ini out: network waterfall menampilkan apa holding up pertama paint, dan trace (plus CLS metric) menampilkan apa shifted dan ketika.

Googlebot myth ( satu untuk sebenarnya internalize)

Di sini’s trap: “jika it looks fine di my Performance panel, Googlebot sees it fine too.” (terjemahan) “jika ini looks fine di my performa panel, Googlebot sees ini fine too.” ini tidak ikuti. panel profiles Anda local, penuh-featured Chrome. Googlebot renders dengan Web rendering Service, sebuah recent-tetapi-tidak-identical Chromium bangun itu tidak mendukung semuanya sebuah penuh browser melakukan dan behaves differently (ini adalah stateless, denies permission prompts, dan so pada — see crawling dan rendering). performa panel adalah superb untuk understanding dan diagnosing rendering perilaku; ini adalah tidak sebuah substitute untuk confirming apa sebenarnya dapat di-crawl dan dapat diindeks. untuk itu, gunakan Search Console’s pemeriksaan URL alat atau sebuah mentah fetch.

sebuah quick disambiguation footnote

jangan confuse performa panel dengan performa monitor — sebuah terpisah, lebih kecil DevTools fitur itu menampilkan sebuah langsung strip dari nyata-time metrics (CPU usage, JS heap, DOM nodes) alih-alih sebuah recorded trace. sama kata, berbeda alat.

AI summary

sebuah condensed take pada Advanced versi:

• Apa ini adalah: Chrome DevTools performa panel adalah sebuah dibangun-di, local profiler. Open DevTools → performa. ini records bagaimana sebuah halaman memuat dan berjalan; ini melakukan tidak produce sebuah score. recorded trace adalah local, lab evidence, though panel dapat secara opsional tampilkan CrUX data lapangan alongside ini.
• Positioning: Lighthouse/PageSpeed Insights = scored automated audit (+ CrUX data lapangan); WebPageTest = remote nyata-device lab; performa panel = mentah interactive trace dari Anda own browser.
• Langsung metrics: pada open ini menampilkan local LCP dan CLS; interacting menambahkan local INP — penuh local Core Web Vitals tanpa recording.
• Recording: runtime (halaman sudah berjalan) vs. muat (Mulai profiling dan reload halaman, dengan Screenshots pada untuk sebuah filmstrip).
• Reading sebuah trace: flame chart dari main-utas berfungsi (wider bar = lebih lama task), FPS chart (red = jank, target 60 FPS), CPU chart, Network waterfall, Timings; plus Bottom-up / panggil Tree / Event Log analysis tabs.
• Insights sidebar (replaced standalone performa Insights panel, dihapus di Chrome 132): LCP breakdown ke 4 sub-bagian, render-blocking permintaan, forced reflow, ketiga-party cost. Treat setiap insight sebagai sebuah guided hypothesis, tidak proof dari penyebab — konfirmasi dengan trace dan sebuah sebelum/setelah re-recording.
• Throttling adalah relative untuk Anda machine, tidak sebuah absolute benchmark — “4x” (terjemahan) “4x” pada sebuah fast laptop ≠ “4x” (terjemahan) “4x” pada sebuah weak satu.
• Lab ≠ field: recorded trace adalah data lab; Google peringkat pada nyata-pengguna CrUX data lapangan. redesign dapat tampilkan CrUX berikutnya untuk Anda local hasil (cocok oleh URL/origin, form factor, dan period) — sebuah approximation dari sebuah nyata-pengguna segment, tidak sebuah recreation dari ini.
• SEO menggunakan: pinpoint tepat LCP element (Patrick’s slide recipe, corroborated oleh SEJ’s Richie Lauridsen), spot render-blocking ketiga parties, diagnose layout shift, jelaskan rendering.
• Myth untuk bust: ini menampilkan Anda browser, tidak Googlebot’s Web rendering Service — konfirmasi crawlability dengan pemeriksaan URL, tidak DevTools.

Dokumentasi resmi

Utama-sumber documentation dari Chrome DevTools team.

Chrome / Google

• performa panel overview — apa ini adalah, cara open ini, dan langsung local LCP/CLS/INP metrics.
• Analyze runtime performa — recording, flame chart, FPS/CPU, dan runtime-vs-muat pembedaan.
• performa fitur reference — Main track, Bottom-up, panggil Tree, Event Log, dan throttling definitions.
• performa insights (deprecation notice) — standalone panel adalah dihapus di Chrome 132; gunakan performa > Insights alih-alih.
• LCP breakdown insight — LCP split ke TTFB, resource muat delay, resource muat time, dan element render delay.
• Render-blocking permintaan insight — identifying CSS/JS itu delays pertama paint.
• Monitor Anda local dan nyata-pengguna Core Web Vitals di DevTools — Rick Viscomi pada redesigned landing halaman dan CrUX field-data overlay.
• performa tooling di 2024 dan beyond — Elizabeth Sweeny & Paul Irish pada Timeline → performa history dan di mana Lighthouse/Insights fit.
• sebuah 400% lebih cepat performa panel — engineering deep-dive; evidence panel adalah actively invested di dan perubahan rilis-untuk-rilis.
• performa monitor — terpisah nyata-time metrics strip, tidak main performa panel (disambiguation).

Bing / Microsoft

• Tidak Bing-spesifik documentation pada Chrome/Edge DevTools performa panel ada — ini adalah sebuah browser alat, tidak sebuah penelusuran-mesin product. Chromium-based Edge ships sebuah near-identical DevTools dengan yang sama performa panel, so semuanya di sini applies di sana too.

Quotes dari sumber

pada—record statements dari Chrome DevTools team dan industry practitioners. setiap Chrome tautan adalah sebuah deep tautan itu jumps untuk quoted passage.

Chrome DevTools — apa panel adalah dan cara baca ini

• “Use the Performance panel to analyze your website’s performance.” (terjemahan) “gunakan performa panel untuk analyze Anda situs web’s performa.” / “The Performance panel lets you record CPU performance profiles of your web applications.” (terjemahan) “ performa panel lets Anda record CPU performa profiles dari Anda web applications.” — Chrome DevTools docs. Jump untuk quote
• “When you open the Performance panel, it immediately captures and shows you your local Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) metrics.” (terjemahan) “Saat Anda membuka panel Performance, panel langsung merekam lalu menampilkan LCP dan CLS lokal.” / “If you interact with your page, the Performance panel also captures your local Interaction to Next Paint (INP).” (terjemahan) “Saat halaman Anda berinteraksi, panel juga merekam INP lokal.” Jump untuk quote
• “Runtime performance is how your page performs when it is running, as opposed to loading.” (terjemahan) “Runtime performance adalah kinerja halaman saat berjalan, bukan saat dimuat.” / “DevTools shows you a flame chart of activity on the main thread, over time. The x-axis represents the recording, over time.” (terjemahan) “DevTools memperlihatkan flame chart aktivitas utas utama sepanjang waktu; sumbu-x menunjukkan urutan rekaman.” Jump untuk quote
• “Whenever you see a red bar above FPS, it means that the framerate dropped so low that it’s probably harming the user experience.” (terjemahan) “Setiap kali Anda see sebuah red bar di atas FPS, ini berarti itu framerate dropped so rendah itu ini adalah probably harming pengguna experience.” Jump untuk quote
• “Use the Main track to view activity that occurred on the page’s main thread.” (terjemahan) “gunakan Main track untuk view activity itu occurred pada halaman’s main utas.” / “Use the Bottom-up tab to view which activities directly took up the most time in aggregate.” (terjemahan) “gunakan Bottom-up tab untuk view yang activities secara langsung took up paling time di aggregate.” / “Use the Call tree tab to view which root activities cause the most work.” (terjemahan) “gunakan panggil tree tab untuk view yang root activities penyebab paling berfungsi.” Jump untuk quote
• “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.” (terjemahan) “Throttling adalah relative untuk Anda computer’s capabilities. misalnya, 2x slowdown option membuat Anda CPU operate 2 times lebih lambat daripada -nya biasa ability.” Jump untuk quote

Chrome DevTools — history dan currency note

• “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.” (terjemahan) “ performa panel di Chrome DevTools memiliki telah helping developers mengukur dan mengoptimalkan mereka runtime performa di satu form atau lainnya untuk better bagian dari 15 tahun.” / “Starting with a panel called ‘Timeline’, it evolved to the Performance panel you know today.” (terjemahan) “Starting dengan sebuah panel called ‘Timeline’, ini evolved untuk performa panel Anda know hari ini.” — Elizabeth Sweeny & Paul Irish, Chrome DevTools team. Jump untuk quote
• “The Performance insights panel is deprecated and removed from DevTools starting with Chrome version 132. We recommend you use the Performance > Insights tab instead.” (terjemahan) “Panel Performance Insights sudah deprecated dan dihapus mulai Chrome 132; gunakan tab Performance > Insights.” Jump untuk quote
• “a completely redesigned Performance panel landing page featuring a live view of your local Core Web Vitals performance.” (terjemahan) “sebuah completely redesigned performa panel landing halaman featuring sebuah langsung view dari Anda local Core Web Vitals performa.” — Rick Viscomi, Chrome team. Baca post

Industry — SEO workflow

• “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.” (terjemahan) “di hovering di atas flag untuk LCP, kami dapat sebenarnya see piece dari konten flagged untuk menjadi Largest Contentful Paint selama pemuatan halaman.” — Richie Lauridsen (Seer Interactive), mesin pencari Journal. Baca artikel

Patrick Stox — menggunakan panel

• “In Chrome Dev Tools, if you run a test on the ‘Performance’ tab, you get a loading chart.” (terjemahan) “di Chrome Dev alat, jika Anda jalankan sebuah test pada ‘performa’ tab, Anda mendapatkan sebuah memuat chart.” — digunakan di my Ahrefs JavaScript SEO guide untuk jelaskan bagaimana Googlebot’s rendering differs dari sebuah penuh browser paint.

Yang performa alat seharusnya I reach untuk?

panel adalah satu option among several, dan picking wrong satu wastes time. sebuah quick cara untuk decide:

melakukan Anda perlu sebuah score atau sebuah diagnosis?

• sebuah score / lulus-fail verdict untuk peringkat → Anda ingin data lapangan: PageSpeed Insights atau Search Console’s Core Web Vitals report (CrUX). performa panel tidak akan memberikan Anda ini.
• sebuah diagnosis dari mengapa sebuah halaman adalah slow → pertahankan going.

adalah halaman publicly reachable?

• Tidak (behind sebuah login, staging, localhost) → performa panel (atau Lighthouse di DevTools) adalah Anda alat — ini berjalan pada whatever’s di Anda browser. PSI dan WebPageTest perlu sebuah publik URL.
• Ya → either performa panel atau sebuah remote alat berfungsi; pertahankan going.

melakukan Anda perlu sebuah shareable, nyata-device, repeatable hasil?

• Ya (client report, nyata hardware, historical trend) → WebPageTest.
• Tidak — Anda hanya perlu untuk see mechanics saat ini → performa panel.

Apa secara khusus adalah Anda trying untuk temukan?

• “Which element is my LCP?” (terjemahan) “Yang element adalah my LCP?” → performa panel: Screenshots pada → Mulai profiling dan reload → click LCP node pada timing graph.
• “What’s blocking my first paint / costing me third-party time?” (terjemahan) “apa blocking my pertama paint / costing me ketiga-party time?” → performa panel → Insights sidebar (render-blocking permintaan, ketiga-party cost).
• “A prioritized to-do list of fixes” (terjemahan) “sebuah prioritized untuk-melakukan list dari memperbaiki” → Lighthouse / PageSpeed Insights.
• “Apa dapat Googlebot sebenarnya crawl/render?” (terjemahan) “Apa dapat Googlebot sebenarnya crawl/render?” → tidak ini panel — gunakan Penelusuran Console’s pemeriksaan URL alat.

aturan dari thumb: field alat tell Anda apakah Anda memiliki sebuah masalah dan apakah ini memengaruhi peringkat; performa panel tells Anda mengapa — down untuk tepat function, permintaan, dan element.

performa panel cheat sheet

Getting di

Reading sebuah trace

temukan Anda LCP element ( SEO recipe)

1. Turn pada Screenshots.
2. Click Mulai profiling dan reload halaman.
3. temukan LCP marked pada timing graph.
4. Click node — DevTools menampilkan tepat LCP element.

Fast facts / jangan-mendapatkan-burned

• recorded trace adalah local, lab data — tidak CrUX field data Google peringkat pada, though panel dapat secara opsional tampilkan data lapangan alongside ini.
• ini profiles Anda browser — tidak Googlebot’s Web rendering Service.
• standalone performa Insights panel adalah dihapus di Chrome 132; insights now langsung di Insights tab dari ini panel.
• Throttling multipliers adalah relative untuk Anda machine, tidak sebuah absolute benchmark.
• Free, dibangun di, Tidak account — dan yang sama panel ships di Chromium Edge.
• performa monitor adalah sebuah berbeda fitur (langsung metrics strip), tidak ini panel.

sebuah performa-panel profiling lulus

Getting sebuah bersih, berguna recording:

• Test di sebuah Incognito window dengan extensions disabled (extensions pollute main-utas trace).
• Turn pada Screenshots sebelum recording sebuah muat, so Anda mendapatkan sebuah filmstrip.
• Note Chrome versi, date, throttling settings, dan apakah advanced paint/CSS/sampling instrumentation adalah pada — so recording adalah reproducible dan comparable untuk sebuah kemudian satu.
• gunakan Mulai profiling dan reload halaman untuk sebuah penuh-muat story (tidak hanya “Record” (terjemahan) “Record” pada sebuah sudah-dimuat halaman) ketika diagnosing muat performa.
• Apply CPU throttling (commonly 4x) dan network throttling untuk approximate sebuah mid-range phone — remembering multiplier adalah relative untuk Anda machine.
• Record sebuah couple dari times; local recordings vary, so treat satu jalankan sebagai sebuah sample, tidak gospel.
• Open Insights sidebar dan baca LCP breakdown pertama — ini poin Anda di server, resource-muat, atau render-delay penyebab.
• gunakan recipe untuk click LCP node dan konfirmasi sebenarnya LCP element.
• periksa Network track untuk render-blocking CSS/JS dan berat ketiga-party permintaan.
• Cross-periksa apa Anda ditemukan terhadap data lapangan (PageSpeed Insights / Penelusuran Console CrUX) — sebuah baik local trace tidak jaminan sebuah passing field score.
• untuk crawlability/indexability pertanyaan, switch untuk pemeriksaan URL — performa panel tidak jawaban “apa melakukan Googlebot see.” (terjemahan) “apa yang benar-benar dilihat Googlebot.”

performa panel dan alat sekitar ini

panel adalah local, lab diagnostic. Di sini’s di mana ini sits relative untuk rest:

• Chrome DevTools performa panel — ini alat. Local, lab, mentah trace; best untuk mengapa sebuah halaman adalah slow dan untuk pinpointing LCP element.
• Lighthouse — juga berjalan di dalam DevTools; scored, automated audit dengan sebuah prioritized perbaiki list.
• PageSpeed Insights — CrUX data lapangan pada top, sebuah Lighthouse lab jalankan di bawah; publik URLs hanya, berfungsi pada pesaing.
• Chrome UX Report (CrUX) — nyata-pengguna field dataset Google sebenarnya peringkat pada; panel dapat now overlay ini berikutnya untuk Anda local hasil.
• WebPageTest — remote nyata-device testing, shareable hasil, multi-langkah scripting.
• Google Search Console — Core Web Vitals report — failing halaman groups di scale (data lapangan).
• Search Console — pemeriksaan URL — right alat (tidak performa panel) untuk “apa dapat Googlebot crawl dan render.” (terjemahan) “apa dapat Googlebot crawl dan render.”
• Microsoft Edge DevTools — yang sama Chromium performa panel, untuk Edge/Bing- focused workflows.

untuk bagaimana ini fit together — lab vs. field, yang satu Google peringkat pada — mulai di web performa alat hub.

performa-panel mistakes itu waste sebuah trace

Treating satu recording sebagai field truth

performa panel records satu local browser, device, network profile, cache state, dan journey. gunakan ini untuk jelaskan sebuah bottleneck, lalu gunakan CrUX atau RUM untuk judge bagaimana umum itu bottleneck adalah.

Recording tanpa sebuah reproducible interaction

sebuah open-ended trace fills dengan unrelated activity. Define muat atau interaction, mulai dari yang sama state, dan record hanya panjang cukup untuk capture ini.

Reading flame chart tanpa network dan frames tracks

sebuah panjang task dapat menjadi sebuah consequence alih-alih pertama penyebab. Align main-utas berfungsi dengan permintaan, interactions, screenshots, dan paints sebelum assigning kepemilikan.

Applying berat throttling dan calling angka sebuah benchmark

Throttling helps expose bottlenecks, tetapi -nya hasil adalah sebuah lab scenario. pertahankan settings identical untuk sebelum/setelah comparisons dan label them ketika sharing hasil.

Perbaiki umum performa-panel masalah

trace adalah too noisy untuk baca

mungkin penyebab: extensions, background tabs, atau sebuah overly panjang recording tambahkan unrelated berfungsi. Perbaiki: gunakan bersih profile, close background activity, dan capture satu didefinisikan journey. Konfirmasi: relevant interaction atau muat occupies sebuah pendek, recognizable bagian dari trace.

interaction feels slow tetapi Tidak event adalah obvious

mungkin penyebab: recording melakukan tidak sertakan menyelesaikan input-untuk-paint window atau wrong track adalah expanded. Perbaiki: re-record tepat click, tap, atau key interaction dan inspect Interactions plus main-utas berfungsi. Konfirmasi: dipilih event exposes input delay, processing, dan presentation berfungsi.

hasil perubahan dramatically antara berjalan

mungkin penyebab: cache state, network variance, background berfungsi, atau test setup differs. Perbaiki: standardize reload mode, throttling, viewport, dan journey, lalu jalankan several times. Konfirmasi: yang sama bottleneck muncul bahkan ketika total duration varies.

panel menampilkan baik lab vitals tetapi Search Console adalah poor

mungkin penyebab: local trace melakukan tidak mewakili pengguna nyata atau lebih lama journeys. Perbaiki: segment CrUX atau RUM, reproduce affected device dan interaction, dan gunakan panel untuk diagnosis. Konfirmasi: trace menjelaskan slow segment alih-alih contradicting field aggregate.

Prove sebuah trace-driven perbaiki worked

Repeated-journey test

Test untuk jalankan: record yang sama muat atau interaction dengan identical cache, viewport, dan throttling settings sebelum dan setelah perubahan. Yang diharapkan hasil: targeted permintaan, task, atau rendering phase shrinks consistently. Failure interpretation: jalankan-untuk-jalankan variance atau sebuah berbeda bottleneck menjelaskan hasil. Monitoring window: immediate di seluruh several recordings. Rollback trigger: errors, missing berfungsi, atau worse visual perilaku muncul.

Main-utas test

Test untuk jalankan: bandingkan dipilih main-utas task dan -nya children di keduanya traces. Yang diharapkan hasil: dihapus atau deferred berfungsi adalah absent dari critical interval alih-alih merely renamed atau moved sebelumnya. Failure interpretation: implementation shifted yang sama cost elsewhere. Monitoring window: immediate. Rollback trigger: total blocking sekitar pengguna tindakan increases.

Field handoff test

Test untuk jalankan: monitor changed template atau interaction di RUM setelah lab win. Yang diharapkan hasil: affected field metric dan attribution meningkatkan untuk yang dimaksud segment. Failure interpretation: local scenario adalah tidak representative. Monitoring window: RUM sebagai traffic arrives; CrUX di atas -nya rolling field window. Rollback trigger: field performa atau task completion worsens consistently.

Uji pemahaman Anda: Chrome DevTools performa Panel

Five quick pertanyaan pada apa performa panel adalah, cara baca ini, dan apa ini tidak. Pick sebuah jawaban untuk setiap, lalu periksa.

Resources worth Anda time

My writing

• JavaScript SEO: hal yang perlu Anda ketahui — di mana I gunakan performa tab’s memuat chart untuk jelaskan bagaimana Googlebot’s rendering differs dari sebuah penuh browser paint.
• Google PageSpeed Insights untuk SEOs & Developers — scored, field-plus-lab alat itu complements mentah trace Anda mendapatkan di DevTools.
• Beginner’s Guide untuk SEO teknis — di mana performa dan rendering fit di bigger picture.

My speaking

• pengalaman halaman Perbarui (TMC, June 2021) (SlideShare) — mencakup langkah-oleh-langkah “Bagaimana untuk see itu LCP element di DevTools” (terjemahan) “cara see LCP element di DevTools” recipe.
• apa Berikutnya untuk pengalaman halaman (SMX Berikutnya 2021) (SlideShare) — my halaman-experience talk dari yang sama era.

dari sekitar industry

• performa panel overview (Chrome untuk Developers) — canonical starting poin: apa ini adalah, cara open ini, langsung metrics.
• Analyze runtime performa (Chrome untuk Developers) — flame chart, FPS/CPU, dan recording walkthrough.
• Monitor Anda local dan nyata-pengguna Core Web Vitals di DevTools (Rick Viscomi, Chrome) — redesigned landing halaman dan CrUX field-data overlay.
• performa tooling di 2024 dan beyond (Sweeny & Irish, Chrome) — Timeline → performa history dan bagaimana Lighthouse/Insights relate.
• 3 cara untuk gunakan Chrome DevTools untuk SEO Troubleshooting (Richie Lauridsen, mesin pencari Journal) — closest existing SEO-dibingkai take, including LCP-finding technique.
• Profile situs Speed dengan DevTools performa Tab (DebugBear) — deepest non-SEO teknis walkthrough: forced-reflow debugging, layer analysis, throttling untuk see dengan jelas.
• Chrome DevTools untuk Debugging Web performa (Web performa Calendar, 2025) — sebuah saat ini, post-redesign community perspective pada panel’s workflow.

Log perubahan