Each frame is probably well below the target of 60 FPS. In the Frames section, hover your mouse over one of the green squares. This isĬalled 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. Hover your mouse over the FPS, CPU, or NET charts. 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 The fact that theĬPU chart is full of color means that the CPU was maxed out during the recording. The colors in the Summary tab, at the bottom of the Performance panel. The colors in the CPU chart correspond to In general, the higher the greenį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ĭropped so low that it's probably harming the user experience. 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 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 TakeĪ recording in the Performance panel to learn how to detect the performance bottleneck in the 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. Squares, you're just going to max out the CPU and you're not going to see a major difference inĬlick Un-Optimize. Versions, try clicking Subtract 10 a few times and trying again. Note: If you don't see a noticeable difference between the optimized and un-optimized The blue squares should move faster and more smoothly. High-end machine, it may take about 20 clicks.Ĭlick Optimize.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |