Find your biggest website problems quickly with Chrome DevTools

Find your biggest website problems quickly with Chrome DevTools

August 20, 2019 15 By Bernardo Ryan


SPEAKER: 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. And 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 of the other videos
in this series. [MUSIC PLAYING] 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 Control-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 the 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
visits 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 had 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 site 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. So some of the
things in this video may look slightly different. Thanks for watching,
and see you next time. And check out our other
videos for more tips to make your site even faster. [MUSIC PLAYING]