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
#Best browser fps for mac 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.
#Best browser fps for mac 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)
