Measuring Web Performance Tools 101
Measuring performance is a tricky feat. and can sometimes be a tad overwhelming finding out where to start. I have compiled a list of tools I frequent that help me dig into the intricacies of measuring Web Performance in my applications. This list covers the tools I frequent but not what the data points mean. For more information on the data points you should care about, check out my article Web Performance Metrics Everyone Should Care About.
Lighthouse
Lighthouse is one of my favorite tools when measuring performance and a host of other important data points in my web applications today. This tool is open-sourced and has been incorporated into Chrome DevTools Audit tab since Chrome 60. Simple open your DevTools, navigate to the Audit tab, check Performance, and click Run audits.
When running Run audits with the Performance , Lighthouse will generate a report similar to this. The number in the upper right serves as a score(out of 100) and a color to show you where your application stands(Green=Great, Orange=Some improvements, Red=Just set it on fire and walk away). The rest of the data points provide insight on why you received your score. It is important to dig into most of these pain points starting at the largest offenders.
WebpageTest
Although a the UI is a bit outdated, WebpageTest is tested and true. This tool gives amazing insights, is open-sourced, and can be self-hosted. WebPageTest gives you the ability to test from different hosted locations to see how your application performances geographically.
Your test would look something like the image below. The data points in the table at the top are some of the more important. The remaining shows a waterfall chart for processes during each run. Typically WebPageTest will run tests against your application three times.
Chrome Dev Tools
Chrome DevTools can be the source where you can dig in the most for specific performance problems you may be having. Here are some tools I find the most helpful.
Coverage Tool
This tool will analyze your JS and CSS files and identify percentage of code actually being used by your application. This helps you identify if you are shipping more code than you need to. Typically you use these percentages to set acceptable thresholds, this way you are only delivering what is important.
To get to this tool you can either type CMD + SHIFT + P in your devtools window and search Coverage or click the 3 dot icon in the upper right and navigate to More Tools -> Coverage.
Performance Tab
This tab is very granular and takes some time to get used to. I recommend this as a last effort approach to find things such as Long Tasks and CPU Max periods. The general performance chart consists of three general sections: General Rendering timeline, Flame Charts, and Rollup Reports .
Moving Forward
There is not a ‘one size fits all’ for performance tools. It is important to start out simple and optimize your application in bit-sized chunks. Performance optimizing is an iterative process however these tools can lend a hand in finding your large offenders. Good luck!
Resources
Lighthouse
Google Performance Getting Started
WebPageTest
