Sofia Emelianova

Kayce Basques

Discover rendering performance issues with this reference of performance-related options on theRendering tab.

Highlight repainted areas with paint flashing

With this option switched on, Chrome flashes the screen green whenever repainting happens.

To view areas that are being repainted:

1. Open theRendering tab on thisdemo and checkPaint flashing.
2. Observe the repainting highlighted in green.

If, on another page, you see the whole screen flash green or areas of the screen that you didn't think should be painted, consider investigating further.

Highlight layout shift regions

Layout shifts cause unexpected repaints and can be not only annoying but harmful.

To view the location and timing of the layout shifts on a page:

1. Open theRendering tab and checkLayout Shift Regions.

2. refresh Refresh the page. Areas of layout shift are briefly highlighted in purple.

View layers and tiles with layer borders

UseLayer Borders to view an overlay oflayer borders andtiles on top of the page.

To enable layer borders:

1. Open theRendering tab and checkLayer Borders.
2. Observe layer borders in orange and olive and tiles in cyan.

See the comments indebug_colors.cc for an explanation of the color-codings.

View frames per second in real time with frame rendering stats

TheFrame rendering stats is an overlay that appears in the top-right corner of your viewport.

To open theFrame rendering stats:

1. Open theRendering tab and enable theFrame rendering stats checkbox.
2. Observe the statistics in the top right corner of the page.

TheFrame rendering stats overlay shows:

• Real time estimate of frames per second as the page runs.
• Frame timeline as a plot with three frame types:
  • Successfully rendered frames (blue lines)
  • Partially presented frames (yellow lines)
  • Dropped frames (red lines).
• The state of the GPU raster: on or off. For more information, seeHow to get GPU rasterization.
• GPU memory usage: the number of used and maximum MB of memory.

Identify scrolling performance issues

UseScrolling Performance Issues to identify elements of the page that have event listeners related to scrolling that may harm the performance of the page.

To view the potentially problematic elements:

1. Open theRendering tab and checkScrolling Performance Issues.
2. Observe the potentially problematic elements highlighted.

View Core Web Vitals

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.

Core Web Vitals are the subset of Web Vitals that apply to all web pages. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome. The Core Web Vitals are:

• Largest Contentful Paint (LCP): measuresloading performance.To provide a good user experience, LCP should occur within2.5 seconds ofwhen the page first starts loading.
• Interaction to Next Paint (INP): measuresinteractivity. To provide agood user experience, pages should have an INP of200 milliseconds or less.
• Cumulative Layout Shift (CLS): measuresvisual stability. Toprovide a good user experience, pages should maintain a CLS of0.1. orless.

Use theWeb Vitals Chrome extension to view your page's Core Web Vitals values.