The x-axis represents the recording, over time. DevTools shows you a flame chart of activity on the main thread, over time. Since performance is the art of doing less work, your goal is to reduce the amount of time spent doing rendering work.įigure 10: The Summary tab, outlined in blueĮxpand the Main section. The page spent most of its time rendering. When no events are selected, this tab shows you a breakdown of activity. Now that you've measured and verified that the animation is not performing well, the next question to answer is: why? A new overlay appears in the top-right of your viewport.ĭisable the FPS Meter and press Escape to close the Rendering tab. Start typing Rendering in the Command Menu and select Show Rendering. Press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux) to open the Command Menu. # Bonus: Open the FPS meterĪnother handy tool is the FPS meter, which provides real-time estimates for FPS as the page runs. But in real scenarios, it may not be so clear, so having all of these tools to make measurements comes in handy.
Of course, with this demo, it's pretty obvious that the page is not performing well. Each frame is probably well below the target of 60 FPS. DevTools shows you the FPS for that particular frame. In the Frames section, hover your mouse over one of the green squares. This is called scrubbing, and it's useful for manually analyzing the progression of animations.įigure 7: Viewing a screenshot of the page around the 2000ms mark of the recording Move your mouse left and right to replay the recording. DevTools shows a screenshot of the page at that point in time. Hover your mouse over the FPS, CPU, or NET charts. Whenever you see the CPU maxed out for long periods, it's a cue to find ways to do less work.įigure 6: The CPU chart and Summary tab, outlined in blue
#GOOGLE WEBTOOLS FULL#
The fact that the CPU chart is full of color means that the CPU was maxed out during the recording. The colors in the CPU chart correspond to the colors in the Summary tab, at the bottom of the Performance panel. In general, the higher the green bar, the higher the FPS.įigure 5: The FPS chart, outlined in blueīelow the FPS chart you see the CPU chart.
Whenever you see a red bar above FPS, it means that the framerate dropped so low that it's probably harming the user experience.
Users are happy when animations run at 60 FPS. The main metric for measuring the performance of any animation is frames per second (FPS). Once you've got a recording of the page's performance, you can measure how poor the page's performance is, and find the cause(s). Don't worry, it'll all make more sense shortly. Wow, that's an overwhelming amount of data. DevTools stops recording, processes the data, then displays the results on the Performance panel. DevTools captures performance metrics as the page runs.Ĭlick Stop.
#GOOGLE WEBTOOLS HOW TO#
Take a recording in the Performance panel to learn how to detect the performance bottleneck in the un-optimized version. Why is that? Both versions are supposed to move each square the same amount of space in the same amount of time. When you ran the optimized version of the page, the blue squares move faster. The blue squares move slower and with more jank again. If you add too many blue squares, you're just going to max out the CPU and you're not going to see a major difference in the results for the two versions.Ĭlick Un-Optimize. Note: If you don't see a noticeable difference between the optimized and un-optimized versions, try clicking Subtract 10 a few times and trying again.
0 kommentar(er)
