This page is a comprehensive reference of Chrome DevTools features related to analyzing performance.

SeeAnalyze runtime performance for a guided tutorial on how to analyze apage's performance using Chrome DevTools.

Live metrics screen

When you first open thePerformance panel you will be presented with the Live Metrics screen which gives you an instant performance summary of the current page using the threeCore Web Vitals.

The metrics will update as you interact with the page and navigate to new pages. This is a good way to identify performance issues—particularly for INP and CLS if they only appear under certain circumstances. Once a performance issue is consistently repeated you can thenrecord a trace to get more details to debug the underlying issue.

Live metrics screen features

TheLive metrics screen has the following features, in addition to the metrics:

• Field metrics from CrUX when enabled in theField metrics panel.
• A summary of any notable differences between the local and field metrics.
• The LCP element, which can be hovered to highlight this on the page.
• Details of the CLS cluster and INP type
• More detail on hovering the metrics (for example LCP and INP subparts, and field histograms)
• AnInteractions andLayout shifts panels recording the history or interactions and layout shifts.
• AField metrics panel where the CrUX data can be switched on, details of the time period of that data, ability to switch between origin and URL data (where available) and between desktop and mobile data.
• Anenvironment settings panel with guidance of which device, CPU and Network throttling to use, based on CrUX data.

For more details see theMonitor your local and real-user Core Web Vitals performance in DevTools blog post.

Record performance

You can record runtime or load performance using the buttons in the top left, or button right of the screen:

Record runtime performance

Record runtime performance when you want to analyze the performance of a page as it's running, as opposed to loading.

1. Go to the page that you want to analyze.
2. Click thePerformance tab in DevTools.
3. ClickRecord.
4. Interact with the page. DevTools records all page activity that occurs as a result of your interactions.
5. ClickRecord again or clickStop to stop recording.

Record load performance

Record load performance when you want to analyze the performance of a page as it's loading, as opposed to running.

1. Go to the page that you want to analyze.
2. Open thePerformance panel of DevTools.
3. ClickRecord and reload. DevTools first navigates toabout:blank to clear any remaining screenshots and traces. Then DevToolsrecords performance metrics while the page reloads and then automatically stops the recording acouple seconds after the load finishes.

DevTools automatically zooms in on the portion of the recording where most of the activity occurred.

In this example, thePerformance panel shows the activity during a page load.

Capture screenshots while recording

Enable theScreenshots checkbox to capture a screenshot of every frame while recording.

SeeView a screenshot to learn how to interact with screenshots.

Force garbage collection while recording

While you are recording a page, clickCollect garbagemop to force garbage collection.

Show recording settings

ClickCapture settings toexpose more settings related to how DevTools captures performance recordings.

Disable JavaScript samples

By default, theMain track of a recording displays detailed call stacks of JavaScriptfunctions that were called during the recording. To disable these call stacks:

1. Open theCapture settings menu. SeeShow recording settings.
2. Enable theDisable JavaScript Samples checkbox.
3. Take a recording of the page.

The following screenshots show the difference between disabling and enabling JavaScript samples. TheMain track of the recording is much shorter when sampling is disabled, because it omits all ofthe JavaScript call stacks.

This example shows a recording with disabled JS samples.

This example shows a recording with enabled JS samples.

Throttle the network while recording

To throttle the network while recording:

1. Open theCapture settings menu. SeeShow recording settings.
2. SetNetwork to the chosen level of throttling.

In the drop-down menu, thePerformance panel may also recommend a default throttling preset or a preset that approximates the experience of your users based onfield data.

Throttle the CPU while recording

To throttle the CPU while recording:

1. Open theCapture settings menu. SeeShow recording settings.
2. SetCPU to the chosen level of throttling.

Tip: To better match low- and mid-tier mobile devices, you can alsocalibrate custom CPU throttling presets on your device. To do so, selectCalibrate fromCapture settings >CPU.

Throttling is relative to your computer's capabilities. For example, the2x slowdown optionmakes your CPU operate 2 times slower than its usual ability. DevTools can't truly simulate the CPUsof mobile devices, because the architecture of mobile devices is very different from that ofdesktops and laptops.

In the drop-down menu, thePerformance panel may also recommend a default throttling preset or a preset that approximates the experience of your users based onfield data.

Enable CSS selector stats

To view the statistics of your CSS rule selectors during long-runningRecalculate Style events:

1. Open theCapture settings menu. SeeShow recording settings.
2. Check theEnable CSS selector stats checkbox.

For more details, see how toAnalyze CSS selector performance during Recalculate Style events.

Enable advanced paint instrumentation

To view detailed paint instrumentation:

1. Open theCapture settings menu. SeeShow recording settings.
2. Check theEnable advanced paint instrumentation checkbox.

To learn how to interact with the paint information, seeView layers andView paintprofiler.

Show Custom Tracks

Enables custom tracks which can be customized further using theDevTools Extensibility API.

Clear the previous recording

After making a recording, pressClear recordingto clear that recording from thePerformance panel.

Analyze a performance recording

After yourecord runtime performance orrecord load performance, thePerformancepanel provides a lot of data for analyzing the performance of what just happened.

Annotate a recording and share it

SeeAnnotate and share your performance findings.

Get actionable insights

ThePerformance panel includes performance insights also surfaced inLighthouse reports. These insights can suggest ways to improve performance and provide guided analysis on the following performance issues such as LCP and INP subparts, LCP request discovery issues, third parties, as well as legacy and duplicated JavaScript resources. For a complete list see thePerformance Insights documentation.

The insights pass when there's no detected issues. TheInsights tab lists them under the collapsedPassed insights section at the bottom. The insights that didn't pass are listed in their own dedicated sections.

To make use of insights:

1. Make a performance recording.
2. In the left sidebar of thePerformance panel, open theInsights tab, expand different sections, and hover over and click items. ThePerformance panel will highlight the corresponding events in the trace.

Note: Withfield data turned on in live metrics, you'll see this data in the metrics section of theInsights tab and in tooltips in the performance trace.

Navigate the recording

To help you navigate, as you hover over performance trace, thePerformance panel does the following:

• Shows you a vertical marker that spans the entire performance trace when you hover over theTimeline overview.
• Highlights a range in theTimeline overview when you hover over items in theMain track.

To closely inspect your performance recording, you can select a portion of a recording, scroll a long flame chart, zoom in and out, and use breadcrumbs to jump between zoom levels.

Use keyboard shortcuts to navigate

To use keyboard shortcuts to quickly navigate the recording, first, choose your preferred style of keyboard navigation.

In the top-right corner of the panel, clickhelpShow shortcuts and select one of the following:

• Classic: Zoom with mouse wheel (touchpad up or down) and vertical scroll withShift + mouse wheel.
• Modern: Vertical scroll with mouse wheel, horizontal scroll withShift + mouse wheel, and zoom withCommand/Control + mouse wheel.

The shortcuts dialog also provides you with a cheatsheet of the available shortcuts.

Note: You can also pan left and right withA andD and zoom withW andS.

Select a portion of the recording

Under the action bar of thePerformance panel and at the top of the recording, you can see theTimeline overview section with theCPU andNET charts.

To select a portion of a recording, click and hold, then drag left or right across theTimeline overview.

To select a portion using the keyboard:

1. Focus theMain track or any of its neighbors.
2. Use theW,A,S,D keys to zoom in, move left, zoom out, and move right, respectively.

To select a portion using a trackpad:

1. Hover over theTimeline overview section or any of the tracks (Main and its neighbors).
2. Using two fingers, swipe up to zoom out, swipe left to move left, swipe down to zoom in, andswipe right to move right.

Create breadcrumbs and jump between zoom levels

TheTimeline overview lets you create multiple nested breadcrumbs in succession, increasing zoom levels, and then jump freely between zoom levels.

To create and use breadcrumbs:

1. InTimeline overview,select a portion of the recording.
2. Hover over the selection and click theN mszoom_in button. The selection expands to fill theTimeline overview. A chain of breadcrumbs starts building at top of theTimeline overview.
3. Repeat the previous two steps to create another nested breadcrumb. You can continue to nest breadcrumbs as long as the selection range is greater than 5 milliseconds.
4. To jump to a chosen zoom level, click the corresponding breadcrumb in the chain at top of theTimeline overview.

To remove the childs of a breadcrumb, right-click the parent breadcrumb and selectRemove child breadcrumbs.

Scroll a long flame chart

To scroll a long flame chart in theMain track or any of its neighbors, click and hold, then drag in any direction until what you are looking for comes into view.

Ignore irrelevant scripts in the flame chart

To better focus on your code, you can add irrelevant scripts to ignore list.

To ignore scripts, do one of the following:

• ClickcompressShow ignore list settings dialog in the top action bar and type a regular expression in the input field. The flame chart will apply the new rule as you type.
• Right-click a script and selectAdd script to ignore list. ThePerformance panel adds this script to the list in thecompressShow ignore list settings dialog.

The panel will automatically collapse excessive nesting for such scripts and mark them asOn ignore list (REGULAR_EXPRESSION).

In thecompressShow ignore list settings dialog, you can turn the ignore list rules on and off.

To remove a script from ignore list, right-click it in the flame chart and selectRemove script from ignore list or hover over it in thecompressShow ignore list settings dialog and clickdeleteRemove.

DevTools saves the ignore list rules you add insettingsSettings >Ignore list.

Additionally, to focus on first-party scripts only, checkcheck_boxDim 3rd parties. ThePerformance panel will gray out third-party scripts.

Search activities

You can search across the activities in theMain track and requests in theNetwork track.

To open a search box at the bottom of thePerformance panel, press:

• macOS:Command+F
• Windows, Linux:Control+F

This example shows a regular expression in the search box at the bottom that finds any activity that begins withE.

To cycle through activities that match your query:

• Clickexpand_lessPrevious orexpand_moreNext buttons.
• PressShift+Enter to select the previous orEnter to select the next.

ThePerformance panel shows a tooltip over the activity selected in the search box.

To modify query settings:

• Clickmatch_caseMatch case to make the query case sensitive.
• Clickregular_expressionRegular expression to use a regular expression in your query.

To hide the search box, clickCancel.

Change the order of tracks and hide them

To declutter the performance trace, you can change the order of tracks and hide the irrelevant ones in track configuration mode.

To move and hide tracks:

1. To enter the configuration mode, right-click a track name and selectConfigure tracks.
2. Clickarrow_upward up orarrow_downward down to move a track up or down. Clickvisibility_off to hide it.
3. When finished, clickFinish configuring tracks at the bottom to exit the configuration mode.

Watch the video to see this workflow in action.

ThePerformance panel saves track configuration for new traces but not in next DevTools sessions.

View main thread activity

Use theMain track to view activity that occurred on the page's main thread.

Click an event to view more information about it in theSummary tab, including but not limited to: duration (and self duration), link to the corresponding line in the source script, origin URL (with an entity name, if known) stack trace, if any, and timings breakdown in a pie chart.

ThePerformance panel outlines the selected event in blue.

This example shows more information about theget function call event in theSummary tab.

Distinguish between first- and third-party events

Excessive reliance on third-party party code can negatively impact load performance. ThePerformance panel can help you visually distinguish between first- and third-party events in the trace, so you may make a more informed decision on reducing or deferring loading of third-party code to prioritize your page's content.

To focus only on the performance of first-party code:

1. Make sure that nothing is selected in the performance trace or in theInsights tab. To do so, click an empty space in the trace.
2. Checkcheck_boxDim 3rd parties in the action bar at the top. ThePerformance panel grays out third-party-related events from the performance trace and leaves only the first-party highlighted.

Highlight events with the '1st / 3rd party' table

Within aselected range on theTimeline overview and when none of the events are selected, theSummary tab shows a1st / 3rd party table that lists the respective transfer sizes and main thread times of the following:

• First-party entity marked with a1st party badge.
• All detected third-party entities in the selected range, unmarked.
• Extensions marked withExtension badges.
• Other[unattributed] entities.

To see related events highlighted in the trace and the rest grayed out, hover over the entities in the table. To leave an entity's events highlighted, select it in the table. To remove the highlighting, click any empty space in the trace.

To open activities grouped by this entity in theBottom-up tab, hover over the entity in the table and clickaccount_treeBottom-up next to it.

Read the flame chart

ThePerformance panel represents main thread activity in a flame chart. The x-axis represents the recording over time. The y-axis represents the call stack. The events on top cause the events below.

This example shows a flame chart in theMain track. Aclick event caused an anonymous function call. This function, in turn, calledonEndpointClick_, which calledhandleClick_, and so on.

ThePerformance panel assigns scripts random colors to break up the flame chart and make it more readable. In the earlier example, function calls from one script are colored light blue. Calls from another script are colored light pink. The darker yellow represents scripting activity, and the purple event represents rendering activity. These darker yellow and purple events are consistent across all recordings.

Long tasks are also highlighted with a red triangle, and with the part over 50 milliseconds shaded in red:

In this example, the task took more than 400 milliseconds, so the part representing the last 350 milliseconds is shaded in red, while the initial 50 milliseconds is not.

Additionally, theMain track shows information on CPU profiles started and stopped withprofile() andprofileEnd() console functions.

To hide the detailed flame chart of JavaScript calls, seeDisable JavaScript samples. When JS samples are disabled, you see only the high-level events such asEvent (click) andFunction Call.

Track event initiators

TheMain track can show arrows that connect the following initiators and the events they caused:

• Style or layout invalidation ->Recalculate styles orLayout
• Request Animation Frame ->Animation Frame Fired
• Request Idle Callback ->Fire Idle Callback
• Install Timer ->Timer Fired
• Create WebSocket ->Send... andReceive WebSocket Handshake orDestroy WebSocket
• Schedule postTask ->Fire postTask orAbort postTask

To see the arrows, find either an initiator or the event it caused in the flame chart and select it.

When selected, the Summary tab showsInitiator for links for initiators andInitiated by links for the events they caused. Click them to jump between the corresponding events.

Hide functions and their children in the flame chart

To declutter the flame chart in theMain thread, you can hide selected functions or their children:

1. In theMain track, right-click a function and choose one of the following options or press the corresponding shortcut:

   • Hide function (H)
   • Hide children (C)
   • Hide repeating children (R)
   • Reset children (U)
   • Reset trace (T)
   • Add script to ignore list (I)

   

   Aarrow_drop_down drop-down button appears next to the function name with hidden children.

2. To see the number of hidden children, hover over thearrow_drop_down drop-down button.

   

3. To reset a function with hidden children or the whole flame chart, select the function and pressU or right-click any function and selectReset trace respectively.

Ignore scripts in the flame chart

To add a script to the ignore list, right-click a script in the chart and selectAdd script to ignore list.

The chart collapses ignored scripts, marks them asOn ignore list, and adds them to theCustom exclusion rules insettingsSettings > Ignore list. Ignored scripts are saved until you remove them either from the trace or from theCustom exclusion rules.

View activities in a table

After recording a page, you don't need to rely solely on theMain track to analyze activities.DevTools also provides three tabular views for analyzing activities. Each view gives you a differentperspective on the activities:

• When you want to view the root activities that cause the most work, usetheCall treetab.
• When you want to view the activities where the most time was directly spent, usetheBottom-up tab.
• When you want to view the activities in the order in which they occurred during the recording, usetheEvent log tab.

You can click an item in any of the three tables (and in the1st / 3rd party table in theSummary tab) to keep the corresponding events highlighted in the trace and dim the rest as you browse the performance trace.

To help you find what you are looking for faster, all three tabs have buttons for advanced filtering next to theFilter bar:

• match_caseMatch case.
• regular_expressionRegular expression.
• match_wordMatch whole word.

Each tabular view in thePerformance panel shows links for activities such as functions calls.To help you debug, DevTools finds the corresponding function declarations in source files.Additionally, if the appropriatesource maps are present and enabled, DevTools automatically finds the original files.

Click a link to open a source file in theSources panel.

Note:The next three sections all refer to the same demo. You can run the demo yourself atActivity Tabs Demo and see the source atGoogleChrome/devtools-samples/perf/activitytabs.html.

Root activities

Here's an explanation of theroot activities concept that's mentioned in theCall tree tab,Bottom-up tab, andEvent log sections.

Root activities are those which cause the browser to do some work. For example, when you click apage, the browser fires anEvent activity as the root activity. ThatEvent then might cause a handlerto execute.

In theMain track's flame chart, root activities are at the top of the chart. In theCallTree andEvent log tabs, root activities are the top-level items.

SeeThe Call Tree tab for an example of root activities.

The Call tree tab

Use theCall tree tab to view whichroot activities cause the most work.

TheCall tree tab only displays activities during the selected portion of the recording. SeeSelect a portion of a recording to learn how to select portions.

In this example, the top-level of items in theActivity column, such asEvent,Paint, andComposite Layers are root activities. The nesting represents the call stack. Inthis example, theEvent caused theFunction Call, which causedbutton.addEventListener, which causedb,and so on.

Self Time represents the time directly spent in that activity.Total Time represents thetime spent in that activity or any of its children.

ClickSelf Time,Total Time, orActivity to sort the table by that column.

Use theFilter box to filter events by activity name.

By default theGrouping menu is set toNo Grouping. Use theGrouping menu to sort theactivity table based on various criteria.

The Bottom-up tab

Use theBottom-up tab to view which activities directly took up the most time in aggregate.

TheBottom-up tab only displays activities during the selected portion of the recording. SeeSelect a portion of a recording to learn how to select portions.

In theMain track flame chart of this example, you can see that almost all of thetime was spent executing the three calls towait(). Accordingly, the top activity in theBottom-up tab iswait. In the flame chart, the yellow below thecalls towait are actually thousands ofMinor GC calls. Accordingly, you can see that in theBottom-up tab, the next most expensive activity isMinor GC.

TheSelf Time column represents the aggregated time spent directly in that activity, across allof its occurrences.

TheTotal Time column represents aggregated time spent in that activity or any of its children.

Heaviest stack table

On the right side of theCall tree orBottom-up tabs, clickright_panel_openShow heaviest stack to reveal theHeaviest stack table.

This table shows you which children of the selected activity took the longest time to execute. Hover over an item in the table to see the corresponding event highlighted in theMain track and the rest dimmed.

This way, you can visually find in the performance trace the nested activities from the call stack that take the most time.

The Event log tab

Use theEvent log tab to view activities in the order in which they occurred during therecording.

TheEvent log tab only displays activities during the selected portion of the recording. SeeSelect a portion of a recording to learn how to select portions.

TheStart Time column represents the point at which that activity started, relative to the startof the recording. The start time of1573.0 ms for the selected item in this examplemeans that activity started 1573 ms after the recording started.

TheSelf Time column represents the time spent directly in that activity.

TheTotal Time columns represents time spent directly in that activity or in any of itschildren.

ClickStart Time,Self Time, orTotal Time to sort the table by that column.

Use theFilter box to filter activities by name.

Use theDuration menu to filter out any activities that took less than 1 ms or 15 ms. By defaulttheDuration menu is set toAll, meaning all activities are shown.

Disable theLoading,Scripting,Rendering, orPainting checkboxes to filter out allactivities from those categories.

View performance markers

In an overlay with vertical lines across the performance trace, you can see important performance markers, such as:

• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• DOMContentLoaded Event (DCL)
• Onload Event (L)

Hover over the marker names at the bottom of the trace to see their timestamp.

View custom timings

On theTimings track, view your custom performance markers such as:

• performance.mark() calls. An individual mark with tooltip is shown below at 813.44 ms, labelledStarting to run JavaScript.
• performance.measure() calls. A yellow span is shown below, labelledSlow Interaction.

Select a marker to see more details in theSummary tab, including its timestamp, total time, self time, and thedetail object. Forperformance.mark() andperformance.measure() calls, the tab also shows stack traces.

View interactions

View user interactions on theInteractions track to track down potential responsiveness issues.

To view interactions:

1. Open DevTools, for example, on thisdemo page.
2. Open thePerformance panel andstart a recording.
3. Click an element (coffee) and stop the recording.
4. Find theInteractions track in the timeline.

In this example, theInteractions track shows thePointer interaction. Interactions have whiskers that indicate input and presentation delays at processing time boundaries. Hover over the interaction to see a tooltip with input delay, processing time, and presentation delay.

TheInteractions track also showsInteraction to Next Paint (INP) warnings for interactions longer than 200 milliseconds in theSummary tab and in a tooltip on hover:

TheInteractions track marks the interactions over 200 milliseconds with a red triangle in the top right corner.

View layout shifts

View layout shifts on theLayout shifts track. Shifts are shown as purple diamonds and are grouped inclusters (purple lines) based on their proximity on the timeline.

To highlight an element that caused a layout shift in the viewport, hover over the corresponding diamond.

To see more information about a layout shift or shifts in theSummary tab with timings, scores, elements, and potential culprits, click the corresponding diamond or cluster.

For more information, seeCumulative Layout Shift (CLS).

View animations

View animations on theAnimations track. Animations are named as corresponding CSS properties or elements if any, for example,transform ormy-element. Non-compositing animations are marked with red triangles in the top right corner.

Select an animation to see more details in theSummary tab, including reasons for compositing failures.

View GPU activity

View GPU activity in theGPU section.

View raster activity

View raster activity in theThread Pool section.

Analyze frames per second (FPS)

DevTools provides numerous ways to analyze frames per second:

• UsetheFrames section to view how long a particular frame took.
• Use theFPS meter for a real time estimate of FPS as the page runs. SeeView frames per secondin real time with the FPS meter.

The Frames section

TheFrames section tells you exactly how long a particular frame took.

Hover over a frame to view a tooltip with more information about it.

This example shows a tooltip when you hover over a frame.

TheFrames section can show four types of frames:

1. Idle frame (white). No changes.
2. Frame (green). Rendered as expected and in time.
3. Partially presented frame (yellow with a sparse wide dash-line pattern). Chrome did its best to render at least some visual updates in time. For example, in case the work of the main thread of the renderer process (canvas animation) is late but the compositor thread (scrolling) is in time.
4. Dropped frame (red with a dense solid-line pattern). Chrome can't render the frame in reasonable time.

This example shows a tooltip when you hover over a partially presented frame.

Click a frame to view even more information about the frame in theSummary tab. DevToolsoutlines the selected frame in blue.

View network requests

Expand theNetwork section to view a waterfall of network requests that occurred during the performance recording.

Next to theNetwork track name, there's a legend with color-coded request types.

Render blocking requests are marked with a red triangle in the upper right corner.

Hover over a request to see a tooltip with:

• Request's URL and the total time it took to execute it.
• Priority or a change of priority, for example,Medium -> High.
• Whether the request isRender blocking or not.
• A breakdown of request timings, described later.

When you click a request, theNetwork track draws an arrow from its initiator to the request.

Additionally, thePerformance panel shows you theSummary tab with more information about the request, including but not limited toInitial Priority and (final)Priority fields. If their values differ, the fetch priority of the request has changed during the recording. For more information, seeOptimizing resource loading with the Fetch Priority API.

TheSummary tab also shows a breakdown of the request's timings.

In this example, the request forwww.google.com is represented by a line on the left (|–), a bar in the middle with a dark portion and a light portion, and a line on the right (–|).

If present, theSummary tab also shows a breakdown of server timings for network requests that implement server-side rendering technologies. For these requests, thePerformance panel takes the data from theServer-Timing response header.

You can find another timings breakdown in theNetwork tab. Right-click the request in theNetwork track or its URL in theSummary tab and clickReveal in Network panel. DevTools takes you to theNetwork panel and selects the corresponding request. Open itsTiming tab.

Here's how these two breakdowns map to each other:

• The left line (|–) is everything up to theConnection start group of events, inclusive. In other words, it's everything beforeRequest Sent.
• The light portion of the bar isRequest sent andWaiting for server response.
• The dark portion of the bar isContent download.
• The right line (–|) is the time spent waiting for the main thread. TheNetwork >Timing tab doesn't show it.

View memory metrics

Enable theMemory checkbox to view memory metrics from the last recording.

DevTools displays a newMemory chart, above theSummary tab. There's also a new chart belowtheNET chart, calledHEAP. TheHEAP chart provides the same information as theJSHeap line in theMemory chart.

This example shows memory metrics above theSummary tab.

The colored lines on the chart map to the colored checkboxes above the chart. Disable a checkbox tohide that category from the chart.

The chart only displays the region of the recording that is selected. In the earlier example, theMemory chart shows only the memory usage for the start of the recording, up to around the 1000ms mark.

View the duration of a portion of a recording

When analyzing a section likeNetwork orMain, sometimes you need a more precise estimate ofhow long certain events took. Hold Shift, click and hold, and drag left or right to select a portionof the recording. At the bottom of your selection, DevTools shows how long that portion took.

In this example, the488.53ms timestamp at the bottom of the selected portion indicates how longthat portion took.

View a screenshot

SeeCapture screenshots while recording to learn how to enable screenshots.

Hover over theTimeline overview to view a screenshot of how the page looked during that moment of therecording. TheTimeline overview is the section that contains theCPU,FPS, andNET charts.

You can also view screenshots by clicking a frame in theFrames section. DevTools displays asmall version of the screenshot in theSummary tab.

This example shows the screenshot for the195.5ms frame in theSummary tab when you click it in theFrames section.

Click the thumbnail in theSummary tab to zoom in on the screenshot.

This example shows a zoomed-in screenshot after you click its thumbnail in theSummary tab.

View layers information

To view advanced layers information about a frame:

1. Enable advanced paint instrumentation.
2. Select a frame in theFrames section. DevTools displays information about its layers in thenewLayers tab, next to theEvent log tab.

Hover over a layer to highlight it in the diagram.

This example shows the layer#39 highlighted as you hover over it.

To move the diagram:

• ClickPan Modeto move along the X and Y axes.
• ClickRotate Mode to rotatealong the Z axis.
• ClickReset Transformto reset the diagram to its original position.

See layer analysis in action:

View paint profiler

To view advanced information about a paint event:

1. Enable advanced paint instrumentation.
2. Select aPaint event in theMain track.

Analyze rendering performance with the Rendering tab

Use theRendering tab's features to help visualize your page's rendering performance.

Open theRendering tab.

View frames per second in real time with the FPS meter

TheFrame rendering stats is an overlay that appears in the top-right corner of your viewport. It provides a real time estimate of FPS as the page runs.

SeeFrame rendering stats.

View painting events in real time with Paint Flashing

UsePaint Flashing to get a real time view of all paint events on the page.

SeePaint flashing.

View an overlay of layers with Layer Borders

UseLayer Borders to view an overlay of layer borders and tiles on top of the page.

SeeLayer borders.

Find scroll performance issues in real time

UseScrolling Performance Issues to identify elements of the page that have event listeners related to scrolling that may harm the performance of the page. DevTools outlines thepotentially-problematic elements in teal.

SeeScrolling performance issues.