 Use the Performance Insights panel to get actionable and use case-driven insights on your website's performance. For example, analyzing page note performance is a common use case. Let's start with that. Open the Performance Insights panel via more options, more tools, performance insights. Network and CPU speed can impact the performance analysis result. You can adjust the settings with the throttling dropdown. Let's slow down the CPU by four times and start to measure the page load. Depending on your page load performance and the throttling settings, it might take a while to run. This is how the panel looks when it is done. There are four areas in this panel. Let's start from the footer and talk about some general navigation. On the left, there is a screenshot. Click on the play button under it to see how your page was loaded visually. Pause it and you can move the playhead around to view the screenshot at that point of time. You can hide the screenshot if you don't need that. You can also slow down the replay speed if it is too fast. The main track always zoom out to show the full page load activities. Let's say you want to view this network request, you can move the playhead to here and zoom in to it with the controls on the bottom right. Alternatively, you can hold the Command key and scroll to zoom in and out or hold the Shift key and scroll to navigate left and right. Don't remember the shortcuts? No worries. Click on the question mark at the top right to learn more about the shortcuts. You can further customize the UI based on your needs. Say, you want to just focus on the layout shift? You can open the settings and turn off the network and render the track. Alright, we are done with the basic navigation. Let's talk about how to identify performance issues. The Insights pane on the right gives you an overview of your page insights. It shows the key metrics of your page and some potential issues that you might want to look into. Hover the mouse over each of these insights, it will highlight the item on the track to help you locate them easily. You can click on the Insights to view issues, get suggestions on potential fixes or even drill down to the details to view the network timings. There are three core metrics to measure your page load performance. First is the loading speed. Is your main content loaded fast enough? Second is the interactivity. Can the user interact with your page without delay? The last one is about visual stability. Is there an advertisement popping up halfway while the user is reading the main content? These three key metrics are what we call the core web vitals, the essential metrics for delivering a great user experience on the web. Each metric has its own target thresholds which help you to identify whether the experience of your site is good, needs improvement or poor. In the panel, the metrics are shown on the Insights and the top. Hover over the metrics, you can read the description and view the score. Now, let's zoom in to the layout shifts, understand what is that and how we can use the panel to debug that. Think about layout shifts like fireworks. There are times where multiple rapid shifts happen continuously, then it pause for a few seconds and it start to shift again. For our page load example here, once the coffees are loaded, the page is stable for a while, then an image pops up and pushes the content out. Then, the page is stable again for a while, until later the size of the coffee cups change and the new font is loaded. Now, let's break that down and identify when the rapid layout shifts happen. The first group of rapid shifts happens when the image is loaded and it happens in under 0.4 seconds. The second group of rapid shifts happens one second later due to the cup size changes and the new font and it happens within 0.9 seconds. For each group of these rapid shifts, we name them as session windows. So, we have two windows here. We can spot that in the layout shift track. There is a pretty obvious gap in between the two windows. When debugging the layout shift issues, always focus on the largest window first. From the track, we know that window 1 has larger shifts than window 2. So, let's focus on that first. On the track, there is a screenshot for each layout shift to help you visualize the differences. Each layout shift carries a score. It measures how much the page is shifted. The maximum score for each layout shift is 1 if the whole page is shifted. In our case, the first layout shift is the biggest because of the blank space allocated for the image. The second layout shift is smaller because it only pushes the content down a little bit more when the image is loaded. Now, back to the performance insights panel, you can view the score by clicking on the screenshot. It shows the time of the shift as well. The cumulative layout score shows the sum of the previous shifts in the same window plus the current shift. In this case, it is 0.19. You can see the score breakdown in the window section. When measuring the CRS of your page, we always focus on the largest section window as a whole. To maintain a good CRS, the total score of each window should be within 0.1. In our case, the window score is 0.19, which means it needs improvement. Scroll down to the Potential Root Courses section. From here, we know that the layout shift could be due to the unsized image. Expand it and we can see the altered dimension is none. We can fix this by adding size to the image. Besides that, you can find out which elements are impacted by this layout shift. You can hover over the item to highlight them on screen or expand it to view the exact movement. The performance insights panel is a developer preview feature and we need your input to continue improving on that. Please send us your feedback via the feedback link in the panel. And to learn more about the performance insights panel, go to goo.gear slash devtools.performance. That's all. See you for the next DevTools Tips.