Simulating Network Conditions

[00:00:00]
>> Another thing, before we get into Lighthouse, is that dev tools can do some really cool stuff simulating conditions. So I'm gonna go ahead and open the Element Inspector. So on the Network tab, if we go to these settings down here, I'm sorry, where is this? There it is.

[00:00:16]
Sorry, it moved it. So on the Network tab, this little drop down here, you can throttle network conditions. So you can look at, for example, all the way to offline, but you can look at a slow 3G connection or a fast 3G connections. So we can see my site loads pretty quickly almost instantly, but then on a slow 3G connection, you can see it kind of spinning and spinning here.

[00:00:36]
So that can be a really cool thing. You can simulate these connections and see, well what is somebody going to experience if they're on a really bad network? The other thing they can do is in the Performance tab, under their settings, you can actually do CPU throttling, too, which is really cool.

[00:00:51]
If you remember in the network lesson we talked about how bites over the wire isn't the only thing. Parse time can also be hugely important for page load. So what if you are worried about parse time? You can come into the Performance tab, you can set a CPU throttle, and then you can reload the page there, and you can see how long it actually takes to parse all your JavaScript on a slower connection.

[00:01:12]
So that's really cool. So you can, yeah, you can throw out the network and you can throw out all the CPU. Very, very useful if you want to get a little bit of that empathy of what users will see on slower connections. Another aside I wanted to make is that let's say you have kinda trimmed your code down, so it is what you need it to be.

[00:01:35]
Moving things around so that, while it will load slowly it loads well, can be very important. So, for example, sites that are entirely client side rendered, like a react site where you just render a div main from the server with nothing in it, then React boots up and then React populates it.

[00:01:52]
What if you put a nice static HTML file and instead, so that was a really slow connection, while React is parsing, the user at least get some good HTML and some CSS, stuff like that, and this can be done in a number of ways, but the network throttling can be really cool to watch how your site loads, and it can give you some ideas into things that you can do to at least make the experience better, even if people do have to wait a few seconds for the whole thing to load.