![]() These performance results show an overwhelming amount of data, but it will all make more sense shortly. DevTools stops recording, processes the data, then displays the results in the Performance tool. DevTools captures performance metrics as the page runs.Ĭlick Stop. Take a recording in the Performance tool to learn how to detect the performance bottleneck in the unoptimized version. Why is that? Both versions are supposed to move the icons the same amount of space in the same amount of time. When you ran the optimized version of the page, the blue icons move faster. The blue icons move slower and with more sluggishness again. If you add too many blue icons, you could max out the CPU, and then you might not observe a major difference in the results for the two versions.Ĭlick Slow. To better display a difference between the optimized and unoptimized versions, click the Remove elements button a few times and try again. The blue icons should move faster and more smoothly. On a high-end machine, you can click it about 20 times.Ĭlick Optimized. The following section lets you customize the demo to make sure that your experience is relatively consistent with the screenshots and descriptions.Ĭlick the Add elements button until the blue icons move noticeably slower than before. The demo doesn't work well with 6x slowdown, so it just uses 4x slowdown for instructional purposes. If you want to ensure that pages work well on low-end mobile devices, set CPU to 6x slowdown. DevTools throttles your CPU so that it's 4 times slower than usual. DevTools reveals settings related to how it captures performance metrics.įor CPU, select 4x slowdown. Whenever you profile a page, use CPU Throttling to simulate how your page performs on mobile devices.Ĭlick Capture settings ( ). Mobile devices have much less CPU power than desktops and laptops. Press Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS) to open DevTools:įor the rest of the screenshots, DevTools is shown undocked to a separate window. Source code: MicrosoftEdge / Demos > devtools-performance-get-started. For more information about InPrivate, see Browse InPrivate in Microsoft Edge You'll profile this page, which shows a variable number of icons moving up and down. To do that, right-click the link and then select Open link in InPrivate window. Open the Sluggish Animation demo page in your InPrivate tab or window. In the following tutorial, you open DevTools on a "Sluggish Animation" demo page and use the Performance tool to find a performance bottleneck on the page. Optimize website speed using Lighthouse.You can see these Core Web Vitals in the Performance tool. 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 skills you learn in this tutorial are useful for analyzing loading, interactivity, and visual stability of your web content, which are also key indicators for Core Web Vitals. The following tutorial teaches you how to use the DevTools Performance tool to analyze runtime performance. Runtime performance is how your page performs when it's running, as opposed to loading.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |