Day 3 of⚡️ #30DaysOfWebPerf ⚡️: Network profile
Learn tips and the basics of the Chrome Dev Tools network tab.
Day 3 of⚡️ #30DaysOfWebPerf ⚡️— Sia Karamalegos (@TheGreenGreek) November 5, 2019
Let's dive into the Network tab of @ChromeDevTools! 💻
The Network tab shows us our load waterfall including timings for each asset, which files depend on other assets, and how the layout changes during the load: pic.twitter.com/YfdDGqdbGA
Quick tips:— Sia Karamalegos (@TheGreenGreek) November 5, 2019
- Disable the cache to mimic initial load.
- Re-enable it to mimic repeat visits.
- Throttle the network connection to emulate a lower connection speed.
- Edit the settings to show screenshots.
- Click on a row to see that resource's detailed timings
All your fun Chrome extensions can pollute your network and performance profiles 🗑️😿...— Sia Karamalegos (@TheGreenGreek) November 5, 2019
Create a new Chrome profile without extensions just for profiling pages. 😃
Incognito can work for initial page load profiles, but you won't be able to test the cache. 🕵️♀️
Hi, I'm Sia.
I'm a freelance performance engineer and web developer, and I'm available for your projects.Hire me