Discover rendering performance issues with this reference of performance-related options on the Rendering 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:
- Open the Rendering tab on this demo and check Paint flashing.
- 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:
Open the Rendering tab and check Layout Shift Regions.
Refresh the page. Areas of layout shift are briefly highlighted in purple.
View layers and tiles with layer borders
Use Layer Borders to view an overlay of layer borders and tiles on top of the page.
To enable layer borders:
- Open the Rendering tab and check Layer Borders.
- Observe layer borders in orange and olive and tiles in cyan.