In this post I will show how to use webpagetest.org to collect performance metrics for a web application.
The test application for this experiment is a medium size Angular application. I have bundled the same application using the Closure compiler and Webpack.
Let's see how the two applications compare according to webpagetest.org.
Here are the two versions of the application under test:
For the purposes of this experiment I am only interested in measuring JavaScript performance.
I am not evaluating other resources like css and dom since it remains constant across both versions.
The first thing we notice is the difference in gzipped bundle size.
The Webpack bundle weighs in at 160k and the Closure bundle at 107k. This amounts to a difference in size of about 33%.
On a fast network this difference is too small to matter, but on a slow network it could be perceived as a performance difference.
webpagetest.org
I have run tests against both versions at webpagetest.org. To make things more interesting I ran the tests against a legacy mobile device (iPhone 5c iOS 9).
As a reference, I am including the test reports below:
Here are the results:
One of the metrics that interested me the most was how much time the browser spends evaluating JavaScript once it receives it over the wire.
Uncompressed the bundle sizes are 569k and 326k between Webpack and Closure compiler respectively. This is a difference of roughly 43%, which is an increase of 10% from the gzipped versions.
The uncompressed size makes a difference since it's ultimately what the browser will execute.
We see this difference play a role in the time spent evaluating JavaScript.
The numbers are 530ms for Webpack and 295ms for Closure.
Webpagetest.org runs the tests three times by default, but the numbers will likely fluctuate between different test runs. However the numbers seem reasonable based on what I know about Webpack and Closure compiler bundling.
To be honest I only completed one test run (three tests) per bundle, but you are welcome to repeat the experiment and compare numbers.
Webpagetest.org is free to use, but you may have to wait a while for a test server to come available.
To make this more scientific we probably have to run the experiment multiple times and calculate an average/median.
The point of this though is not really to do a perfect Webpack/Closure comparison. I am more interested in showing you Webpagetest.org as a great way to run performance tests on your Webpage.
I have included more details about the code for this article here.