Hovering over the First Meaningful Paint metricīelow Metrics is a collection of screenshots that show you how the page looked as it loaded.įigure 13. Hover over a metric to see a description of it, and click Learn More to read documentation about it.įigure 12. For example, First Contentful Paint tells you when content is first painted to the screen, which is an important milestone in the user's perception of the page load, whereas Time To Interactive marks the point at which the page appears ready enough to handle user interactions. Each metric provides insight into a different aspect of the performance. The Metrics section provides quantitative measurements of the site's performance. Later, as you make changes to the code, you should see this number rise. The number at the top of your report is the overall performance score for the site. A report that errored # Understand your report Chrome Extensions in particular often interfere with the auditing process.įigure 9. This ensures that you're running Chrome from a clean state. If you ever get an error in your Audits panel report, try running the demo tab from an incognito window with no other tabs open. The Audits panel's report of the site's performance After 10 to 30 seconds, the Audits panel shows you a report of the site's performance.įigure 8. Disable this setting when you want the repeat-visit experience.Ĭlick Run Audits. Leave this setting on if you want to audit how first-time visitors experience your site. Enabling this checkbox clears all storage associated with the page before every audit. setting, on the other hand, actually throttles your CPU and network, with the tradeoff of a longer auditing process. Instead, it just extrapolates how long the page would take to load under mobile conditions. It's called "simulated" because the Audits panel doesn't actually throttle during the auditing process. Setting to Simulated Fast 3G, 4x CPU Slowdown simulates the typical conditions of browsing on a mobile device. Disabling categories slightly speeds up the auditing process. You can leave the other categories enabled, if you want to see the types of recommendations they provide. Disabling a category prevents the Audits panel from running those audits, and excludes those audits from your report. Setting to Desktop pretty much just disables the Mobile changes. Setting to Mobile changes the user agent string and simulates a mobile viewport. Here's an explanation of the different options: Match your audit configuration settings to those in Figure 7. There's a Lighthouse on this panel because the project that powers the Audits panel is called Lighthouse. It may be hidden behind the More Panels button. The baseline is a record of how the site performed before you made any performance improvements.Ĭlick the Audits tab. You can do this by pressing Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, ChromeOS) to open the Command Menu, typing Undock, and then selecting Undock into separate window.įigure 6. Chrome DevTools opens up alongside the demo.įor the rest of the screenshots in this tutorial, DevTools will be shown as a separate window.
Press Command+Option+J (Mac) Control+Shift+J (Windows, Linux, ChromeOS). It may take a while for the site to load. This tab will be referred to as the demo tab. Later on, you'll make changes to this code.Ĭlick Show Live. You now have your own editable copy of the code. The name of the project changes from tony to some randomly-generated name. The menu that appears after clicking tonyĬlick Remix This. This tab will be referred to as the editor tab.įigure 3. You should be able to complete the tutorial still, just keep in mind that your UI may look different than the screenshots. If you're using an earlier or later version, some features may look different or not be available. Go to chrome://version to check what version of Chrome you're using.
0 kommentar(er)
