Dan D Kim

Let's share stories

Test slow network performance with Chrome Devtools

2019-08-05 Dan D. Kimdebugging

For the majority of web developers, we can have a very different experience from building websites vs using them on a normal basis.

For example, I’m always testing my website on the localhost. This is great for seeing immediate feedback on whatever changes I am making, but it doesn’t reflect the variety of ways people could access my website. What if someone is accessing the website via a slow 3G network with an older device?

To be honest, I had like 100 other things I needed to get done, so I didn’t think much about it.

That is… until I found this fun little feature in Chrome DevTools.

There is an option to simulate any kind of network. Go to Developer Tools > Network > “No throttlings” (if you have never changed it) and you will get a drop-down menu.

Chrome Devtools Network Throttling Option

You can simulate fast, slow, offline, or a custom speed of your choice.

Chrome Devtools Network Custom Throttle Option

With this tool, I am able to see how my website behaves on slower (or any kind of) networks.

For me, I was able to verify that my caching was working properly. Images were taking a while to load on a slow 3G connection. However once they were loaded, they didn’t have to be loaded again while navigating through my different posts and menus. This showed me visually that the images were being cached.