 Whether you're an experienced programmer or you're a newbie, you can learn to check your site for the most common speed issues. Once you get the hang of it, it's pretty straightforward. Often you can speed up your site a whole lot without much effort. Today, we're going to teach you how to use Chrome DevTools to see what's actually getting loaded when your site loads. What you learn here will be useful for all the other videos in this series. First, let's open up DevTools. In Chrome, just go to the View menu, select Developer, and select Developer Tools. Or you can just use a keyboard shortcut. Just press Ctrl Shift I on Windows and Linux machines or Command Option I on Macs. Next, let's set up DevTools to see how our site would load on a mobile device. Chrome can simulate a lot of different devices from phones to tablets. To do that, first, just toggle to Device View. Then click Responsive at the top center to select a device. Users often visit the same site multiple times. So to avoid loading the same resources again and again, browsers cache them. This means if a browser loads something, it keeps it around for when it's needed again. This makes your site faster on subsequent loads, but here we want to see the site as it loads when someone views it for the first time. So we'll go to the Network tab and disable that cache. Chances are that your computer's on a faster connection than a typical mobile device. Conveniently, Chrome can simulate a real world mobile network. Click Online and choose a speed like Fast 3G. Or if you're especially brave, Slow 3G. Chrome can also record a film strip that shows the screen as the page loads. To turn that on, just click the little movie camera. Now, we follow the instructions to reload the page. Let's see what we've got. First, here's the film strip. Clicking any screenshot enlarges it and shows everything that it loaded until that screenshot happened. You can see that our images and our JavaScript take a while to load. Beneath that film strip, the network panel shows you every resource that the browser has requested and loaded. The type column indicates whether a resource is a style sheet, CSS, an image, JavaScript, a font, or something else. Clicking a header sorts by that column. And clicking a resource type shows you just resources of that type. For example, clicking IMG shows you just the images. The size column tells, you guessed it, the size of each resource. Sorting by size shows you in an instant which resources are largest. That's our goal here because the largest resources will take the longest to load and they're probably making our sites slowest. Our site's biggest resources are its large images. This is typical. It's easy to fix. And in another video, we show you how. Note also that we've got some large JavaScript files. Another video will show you how to fix those. The time column tells you how long each thing took to load. Of course, generally speaking, larger things take more time. On the far right is a column called waterfall. This is the chart that shows what loaded when. If you click the word waterfall, the chart will sort by time. Now we can see what loaded first and what loaded last. Notice that on our site, until these JavaScript files were done loading, none of the images even began to load. In other words, the scripts delayed what the user sees. We'll fix that in another video. If we filter by resource type, the waterfall gets filtered too. Let's try JavaScript and sort by size. Now it's easy to see which JavaScript files took the longest to load. Now you should go try these techniques yourself. It's easy. Like other browsers, Chrome does change frequently. Some of the things in this video may look slightly different. Thanks for watching and see you next time. Check out our other videos for more tips to make your site even faster.