Skip to content
This repository has been archived by the owner on Mar 14, 2024. It is now read-only.

Latest commit

 

History

History
136 lines (94 loc) · 6.62 KB

index.md

File metadata and controls

136 lines (94 loc) · 6.62 KB
Raw
layout title authors date description tags
layouts/doc-post.njk
Discover issues with rendering performance
sofiayem
kaycebasques
2022-04-13
Spot repainting, layout shifts, layers and tiles, scrolling issues, see rendering statistics and Core Web Vitals.
performance
find-issues

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

Highlight repainted areas with paint flashing {: #paint-flashing }

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

To view areas that are being repainted:

  1. Open the Rendering tab on this demo and check Paint flashing.
  2. Observe the repainting highlighted in green.
{% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/kjDGMyDCCVNWxYbvRNSZ.gif", alt="Paint flashing", width="800", height="359" %}

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-shift-regions }

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

A screencast illustrating how layout instability can negatively affect users.

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

  1. Open the Rendering tab and check Layout Shift Regions.

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

{% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/A4KvbnzAz12tXZXKCjNC.gif", alt="Layout shift", width="800", height="359" %}

View layers and tiles with layer borders {: #layer-borders }

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

To enable layer borders:

  1. Open the Rendering tab and check Layer Borders.
  2. Observe layer borders in orange and olive and tiles in cyan.

{% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/n2yaLGyuuNtF25elbJcu.png", alt="Layer borders and tiles", width="800", height="389" %}

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

View frames per second in real time with frame rendering stats {: #frame-rendering-stats }

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

To open the Frame rendering stats:

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

{% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/7BR4zTh9IMobaelSH0xV.png", alt="Frame rendering stats", width="300", height="358" , class="screenshot"%}

The Frame 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, see How to get GPU rasterization.
  • GPU memory usage: the number of used and maximum MB of memory.

Identify scrolling performance issues {: #scrolling-performance-issues }

Use Scrolling 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 the Rendering tab and check Scrolling Performance Issues.
  2. Observe the potentially problematic elements highlighted.

{% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/GW40vR3wxrl5nh04bHzE.png", alt="Scrolling Performance Issues is indicating that there are multiple event listeners that may harm scroll performance", width="800", height="406" %}

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): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
  • First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of 100 milliseconds or less.
  • Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1. or less.

To view the Core Web Vitals as an overlay in the top right corner of the viewport:

  1. Open the Rendering tab and check Core Web Vitals.
  2. Scroll the page to reveal all layout shifts and perform an interaction, for example, click a button, open a tab, or enter text in a textbox.

{% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/HW8iWmtzvC3S0uuQdcsp.png", alt="Core Web Vitals", width="400", height="311" %}

Green Core Web Vitals indicate that your page is in good shape. Yellow or red vitals need attention.