Performance in web-apps: the tools
One does not simply choose a tool to measure your performance in web apps. Here we have a list of tools and opinions about them! Do you have your own list?
Before being able to perform an improvement on your performance you should know your app: which are the strong points and which of them have a very large list of improvement opportunities.
Why don't we go for a speed test?
The ways I know of analyzing your app is using specialized tools. Luckily for us, there are plenty of them and they come in a lot of flavors or colors: since browser add-ons (Chrome even has the performance monitor integrated with the developer tools by default) until some very sophisticated (an expensive) tools. In between, you have reliable sites with open source projects.
I strongly recommend https://webpagetest.org, that it is also an open source project, which allows you to setup your own private instance to monitor your web app if desired. Take a look at: https://github.com/WPO-Foundation/webpagetest-docs/blob/master/user/Private%20Instances/README.md
A list of tools
If you like having options, I have collected a list of an interesting set of tools that you might want to look at (ordered following my own criteria):
- WebPageTest: https://webpagetest.org
- Chrome DevTools: https://developers.google.com/web/tools/chrome-devtools/evaluate-performance
- Lighthouse: https://developers.google.com/web/tools/lighthouse/
- SpeedCurve: https://speedcurve.com/about/
- TestMySite: https://www.thinkwithgoogle.com/intl/es-419/feature/testmysite/
- GTmetrix: https://gtmetrix.com/
- Pingdom: https://www.pingdom.com/
I want to stress something here, it is very important to have history of your performance metrics, so you should invest some time to setup a tool that automatically collects and processes the results and it also stores the old results.
Remember that performance depends on too many factors and you cannot be in control of all of them. Also it is not only one metric what you need to measure (please refer to Performance in web-app: the objective post for a better explanation). There are a huge amount of tests with a nice variety of scenarios (connection speed, region, device) that are interesting to monitor.
My review
Inside the chaos, however, choosing the right tool is very important, but you probably would need to test many of them to find the one that feels right for your situation.
Please remember to search for more tools and use them to complete your own evaluation. In my experience I've found that:
- WebPageTest: is one of the most complete tools. It is not gentle with new users and may imply an interesting learning curve. Despite that, it gives you everything you may need, it is very flexible (you can set up quite complex scenarios) and links to other tools to continue the analysis. I have already mentioned this but you have a free web online tester available and you can contribute since it is an open source project. You can even setup a custom installation for your own usage.
- Chrome DevTools: you probably already have it and haven't realized. It is useful because you can even monitor your local environment and test if a new feature/change/idea is improving or degrading your experience. At least for me it has always been very useful, especially the Waterfall and the Network views.
- Lighthouse: now it is also integrated to chrome dev tools. I love how this tool presents the results and suggests improvements. Also, the good and the bad is that it gives you a magic number that is so easy to track and optimize to improve it. Why is that bad? Because it is a standardized set of rules which might not be right for your business case. Something to mention here, Lighthouse also provides you scores plus suggestions to improve other aspects of your site, such as accessibility, which I strongly recommend you to follow.
- SpeedCurve: an awesome complement to webpagetest, it improves the presentation of the data all in one, provides you with the history, custom graphs, automatic alarms if you want, summaries, a quite simple way to configure tests and also you can see the full report of each of them. “Gise, if it is so amazing why it is not the number one on your list?” Well, because it is not free and it is definitely not cheap, my dear friend.
- TestMySite: very good for a very fast check, you can only enter an URL and it shows you an overall result. If you want a little more of information it generates a report that it can send you via email.
- Gtmetrix: similar to webpagetest but with less features, it has a cleaner UI and combines improvement suggestions with a very good waterfall view. For me it is good to start with if you are not familiarized with performance, but after a while you’ll need to move to a more complete tool (like webpagetest).
- Pingdom: quite similar to SpeedCurve (even cheaper), it is also a paid one. I haven't used this tool a lot so I cannot explain a lot more. Even though, I wanted to mention it because as far as I’m concerned, it looks like a nice solution between free tools (without story) and an expensive solution with everything integrated, so promising for a middle stage of the art.
Please feel free to comment about your very own experience with these or other tools. Before I was able to write the summary above I've read this: https://developers.google.com/web/fundamentals/performance/speed-tools which also helped me to have a general overview.
Lost in charts?
Don’ t worry about the reports, the next post of the saga is about reading the reports and showing how we can extract informations and conclusions from that! But before that, have you read what do we want to measure? and Why?