Posted

2 minutes read

Try the free website speed testing tool https://loadfocus.com/website-speed-testing, gives you page load time, performance score, insights tips, numbers and sizes of resources for CSS, JS, images files.

Performance testing the page load time of a web application can be a little tricky but pretty useful for simulating what the user experience of your customers.

The following solution uses the PhantomJS headless browser for measuring the needed timing information,
Google charts for visualizing the results. The solution can also be used pretty much as it in the continuous integration
environment based on Jenkins or any other system.

For what can I use this solution ?

  • page load time testing
  • size and number of resources retrieved for URL call
  • load time for each resource

The solution described below is composed of the following scripts and executables:

1. PhantomJS headerless browser
2. load.sh script: script used for running the starting PhantomJS and the performance measuring script
3. loadreport.js: script used for retrieving the timing information needed for performance measuring

Steps to make the solution work for you (Linux OS as this is what I have , similar on MacOS or Windows).

1. Install PhantomJS

  • browse to http://phantomjs.org/download.html
  • open a terminal window and issue
     wget https://phantomjs.googlecode.com/files/phantomjs-1.9.1-linux-x86_64.tar.bz2 
  • wait for PhantomJS to be downloaded and issue the command ”
     tar -xvjpf phantomjs-1.9.1-linux-x86_64.tar.bz2 

  • now PhantomJS is installed

2. Create the load.sh script and add the code from below (or git clone fromhttps://github.com/loadfocus/pageloadtime.git)

3. Create the loadreport.js script and add the code from below (or git clone from https://github.com/loadfocus/pageloadtime.git)

4. Running the load.sh script

  • got to the directory where the load.sh script is located and issue the following command in the terminal:
  • run script:
     sh load.sh url_to_be_measured number_of_requests_to_be_made path_to_phantomjs 
  • example:
 sh load.sh http://www.google.com 20 /home/user/tempphantom/phantomjs-1.9.1-linux-x86_64/bin/phantomjs 

5. Visualizing the results
– after the test finishes in the same directory you will see:
results.html which contains the chart with the results
reports directory which contains the json file with the actual results
– open results.html in the browser of your choice

The results should look like below:

load_graph_loadfocus slowest_resource_loadfocus largest_resource_loadfocus resource_loaded_with_size_loadfocus


Thanks for reading. I hope you learned something interesting about React!
If you found this article useful, please share it with others. Don’t forget to subscribe to get notified for the upcoming articles.