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, Chrome OS) 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, Chrome OS). 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. It gives you actionable tips on what changes will have the most impact.īut first, you need to set up the site so that you can make changes to it later:.It creates a baseline for you to measure subsequent changes against.Whenever you set out to improve a site's load performance, always start with an audit. Tony has asked you to help him speed the site up.įigure 1. His fans love the site, but Tony keeps hearing complaints that the site loads slowly. He has built a website so that his fans can learn what his favorite foods are. You don't need to know anything about load performance.You should have basic web development experience, similar to what's taught in this Introduction to Web Development class.