How to measure Performance of Images on your website

Dmitry Pokidov
Mar 26, 2018 · 6 min read

Performance Testing best practices

Before we dive into measurements let’s iterate through some common rules that are relevant for any performance testing:

  • Conditions of the tests must be the same. Every time you are running tests make sure nothing changing externally. Some examples of external conditions could be the Internet speed, load of test server, etc.
  • Keep source data of load tests. If your input data is based on the end figures you are computing then it’s better to save source files as well. It might become important if you realize that your calculations are wrong or there is a missing metric.
  • Create test report. At the end of your tests you should have a report that you can store along with source data. That’s what you can use to compare results.
  • Run tests regularly. Performance testing shouldn’t be one time thing. Ideally you will want to run them on every change or on every release.

Tools

In performance testing methodology is usually goes hand by hand with the tools. Sometimes those tools can be very expensive. But I will show you how to measure performance thoroughly and efficiently using open source tools and free apps.

  • HAR
  • JQ

Google Chrome Dev Tools

Our main tool would be Google Chrome which has some powerful developer features that can tell us a lot about what is going on.

Export to HAR feature

But instead of do it manually we can use another feature of Google Chrome Dev Tools — export to HAR:

JQ command line tool

That’s where JQ comes into a game. JQ is a command line tool that can process JSON files using special filters. It’s quite powerful and complex in the same time. For instance, if we want to print all images that has been loaded then we would write this in command line:

Setting up tests

Let’s see how we address all the requirements described above:

  • Setup network throttling in Chrome Dev Tools, so that our tests won’t depend on the Internet speed.
  • Store all our measurements in a table that we will push to the repo with sources. A report will include all metrics, date and other parameters like visual breakpoint/device.
  • Store all HAR files along with the report.

Metrics

Now, when we have a source data and tools we can do actual testing. We are ready to define our metrics.

  • Javascript/CSS scripts
  • 3rd party analytics or marketing scripts
  • On page script execution.
  • Total transferred size of images. This is a number of bytes that had been downloaded. It’s a good metric, and in most cases it can be improved really well by optimizing images or giving them a correct size (resizing or cropping).
  • Time taken for all images to load. This one shows us how long it takes for all images to load. It doesn’t take into account the fact that images load in parallel, but just if they would load sequentially. This metric also exclude queuing time that browser been waiting to start loading a resource.
  • Total time with queuing. This is the same as above but including queue time. Queue time can be reduced by using some techniques, for example, you can move all your assets to separate domain, so that browser can use different thread pool for loading your images.

Let’s Do It

I prepared some (what scripts, define please!)JQ scripts that we will be using.

Improving Images

And I’ll tell you how we can do this in the next article :)

Conclusion

I hope this would be useful for you, so that you could see some real numbers before and after optimization. There are many manual steps in the process and I’m currently working on automating them all by running headless Google Chrome in the Docker. Feel free to contribute to a git branch.

pixboost

Website Performance Optimization

Dmitry Pokidov

Written by

I’m a CTO of pixboost.com — boosting performance and conversion of your online store.

pixboost

pixboost

Website Performance Optimization