Automate Page Performance Test with WPT

About the Article

In this article you will learn about importance of page performance and how to measure the page speed using WPT tool. The article will cover following topics:

• Introduction
• Impact of Substandard Performance
• Performance facts
• Measuring Page Speed
  — WPT Tool
• Running Web Page Test
  — Manual Page Test using WPT Portal
  — Automate Page Test using PowerShell script

Introduction

Page Performance refers to how quickly page content loads and renders in a web browser. Performance plays a major role in the success of any online venture. High-performing sites engage and retain users better than low-performing ones.

Impact of Substandard Performance

Low conversion rate

The rate at which users complete a desired action. A number of companies have found that a decrease in page load time of a few milliseconds increases conversions.

• Retailer AutoAnything experienced a 12–13% increase in sales after cutting page load time in half
• Walmart discovered that improving page load time by one second increased conversions by 2%

High bounce rate

The bounce rate is the percentage of users who leave a website after viewing only one page. BBC discovered that they lost 10% of their total users for every additional second it took for their pages to load.

Low SEO ranking

Google tends to prioritize getting relevant information to users as quickly as possible, site performance is an important factor in Google search rankings.

Poor user experience

Long page load times, and poor response times to user actions, create a bad user experience.

Performance facts to blow your mind

• Once your page loads, users form an opinion in .05 seconds
• Nearly 70% of consumers admit that page speed influences their likeliness to buy
• Only 15% of websites operate at an acceptable page speed
• 57% of visitors leave a site if it takes longer than 3 seconds to load
• Three of the top four SEO UX signals are page-speed-dependent
• Average page speed from industry to industry in US

Measuring Page Speed

To measure a page we have lot of tools but we would talk specifically about WebPageTest (WPT)

Why WPT ?

• It is Open-Source tool
• Public Instance is available for all at https://www.webpagetest.org
• Pre-Configured Image available on Cloud to run as Private instance (AWS/GCP)
• It is Platform independent can be installed on Windows and Linux
• Availability of API to integrate with CI/Automation tool

Running Web Page Test

Manual Page Test using WPT portal

To run a test go to webpagetest.org or the Private instance URL as in this case.

Enter details as outlined below

• Enter your website URL — make sure you enter valid URL exactly how it should be
• Test Location — choose the area that is closest to where your visitors may come from.
• Select A Browser — select from different browser options available

• Advanced Settings — this is OPTIONAL, but we like to run 3 tests
• Connection — this emulates the type of internet connection your visitor may have. You can play around with this option, but lets keep it set to Cable since that is pretty standard.

• Click Start Test

You will see many other tabs and options which can be utilized based on testing needs.

Performance Results

The results are shown as AVERAGE load times of the 3 tests we ran with Optimization Grades of the page.

Automating test using PowerShell

WPT provides an API to automate the page test. We will submit a page test to a Private WPT server by doing a POST request in the following PowerShell script. In return we will get an XML response.

We start the script by Initialization the Server URL and the API Key. API Key is required to Authenticate with the Private Instance.

$APIKey   = '<API Key>'
$ServerURL  = "<Private WPT Server URL>"

Once the Authentication parameters are set, we define test configurations like browser, Network speed, Number of Test and Result type median/average etc.

• Browser: Choose from Chrome, Firefox and IE 11, the list differs based on Agent and Region.
• Set appropriate network simulation from available options FIOS, Cable, 3G, 4G. The options differ from region to region and based on WPT Agents.
• URL2Test is the actual URL being tested.

$Browser  = 'Chrome'
# FIOS = 20 Mbps, Cable = 5 Mbps
$Connection  = 'FIOS'
$URL2Test  = 'https://medium.com/globant'
$NumberOfTests  = 3

Define Additional settings as per requirement in a new variable called OtherOptions, there are a lot of tweaks but we are using very few like keeping the test result private, capturing the entire page load as Video and scraping all header details so sensitive data aren’t stored as part of results. We also want to consider the median result hence we set the median metric to 1.

$OtherOptions = '&private=1&video=1&noheaders=1&medianMetric=1'

Once all the Test configuration is defined, create the request URL “TestRequest” by concatenating the parameters as per the standard API format of WPT.

# Setting Location parameter as per the URL syntax
$Location = $TestRegion + ':' + $Browser + '.' + $Connection
# Creating the Request URL
$TestRequest = $ServerURL + "runtest.php?url=$URL2Test" + "&f=xml&runs=$NumberOfTests" + "&location=$Location" + "&k=$APIKey" + $OtherOptions

Now make the POST request with the Request URL created in the previous step. In return we get an XML response which has the Test ID, URL for results in Human readable format and raw JSON format.

# Invoking the Post method to start Test
$ExecuteTestRequest = Invoke-WebRequest -Uri $TestRequest -UseBasicParsing
$TestID = ([xml]$ExecuteTestRequest.Content).response.data.testId
$HumanReadableURL = ([xml]$ExecuteTestRequest.Content).response.data.userUrl
$JsonURL = ([xml]$ExecuteTestRequest.Content).response.data.jsonUrl

The test takes a few minutes to complete depending upon the Test Agent availability, Page size, Region and Network selection. Wait for the Test to complete which is indicated by response code 200.

$ExecutionStatus = $ServerURL + 'testStatus.php?f=xml&test=' + $TestID
Do {
Start-Sleep -Seconds 30
$TestResult = Invoke-WebRequest -Uri $ExecutionStatus -UseBasicParsing
} while (([xml]$TestResult.Content).response.statusCode -ne 200)

After the Test is completed, Request the WPT server to generate a Video of the entire test recording and download it once it is generated.

$RequestVideo = $ServerURL + 'video/create.php?tests=' + $TestID + '-r:1-c:0&id=' + $TestID +'.1.0'
# Request WPT server to make video available for downloading
Invoke-WebRequest -Uri $RequestVideo -Method Get -UseBasicParsing | Out-Null
# Download the Video file
$VideoURL = $ServerURL + "video/download.php?id=$TestID" + '.1.0'
Invoke-WebRequest -Uri "$VideoURL" -OutFile "PerfTest_Video.mp4" -UseBasicParsing

Additionally download the Optimization Checklist which consists of recommendation and acts as a guide for improvement of the Page performance.

$OptimizationCheckListURL = $ServerURL + '/results/'  + $DateFromTestID + $($TestID.Replace($TestID.Split('_')[0],"")).replace('_','/') + '/1_optimization.png'
Invoke-WebRequest -Uri "$OptimizationCheckListURL" -OutFile "OptmizationCheckList.png" -UseBasicParsing

OptmizationCheckList.png

To fetch detailed results we will download the Raw JSON data and pick few properties that will be used to send out notification.

Invoke-WebRequest -Uri $JsonURL -Method Get -UseBasicParsing -OutFile "PerformanceResult.json"
$ResultJsonData = ConvertFrom-Json -InputObject (Get-Content -Raw -Path "PerformanceResult.json")
$ResultJsonData = $ResultJsonData.data.median.firstView

For the last part we want to extract data such as Overall load time, Time when page started rendering, Total number of resources on page and resources not found error, We will create an Object with above mentioned properties which will be used by Slack notifier in the next step. Note that the results are denoted in Milliseconds.

$SlackHook = "<Slack Hook>"
$SlackNotitificationContent =@"
TestedURL            : $URL2Test
fullyLoaded          : $($ResultJsonData."fullyLoaded")
render               : $($ResultJsonData."render")
requestsFull         : $ResultJsonData."requestsFull"
responses_404        : $ResultJsonData."responses_404"
"@

Finally send the results as slack notification using POST request and Slack hook for authentication with slack.

# Sending Slack notification
$body = ConvertTo-Json @{
pretext = "URL: $URL2Test"
username = "<SlackUsername>"
text = "$SlackNotitificationContent"
channel = "<Channel to Notify>"
}
Invoke-RestMethod -uri $SlackHook -Method Post -body $body -ContentType 'application/json' -UseBasicParsing

Conclusion

Web performance is all about making web sites fast. Ensuring site loads quickly, allow users to start interacting with it quickly. We have reached end of the story leaving with example of what Impact performance has on business.

• Rebuilding Pinterest pages for performance resulted in a 40% decrease in wait time, a 15% increase in SEO traffic and a 15% increase in conversion rate to signup.
• COOK reduced average page load time by 850 milliseconds which increased conversions by 7%, decreased bounce rates by 7%, and increased pages per session by 10%.

In the upcoming article, we will cover different testing options and analyze the performance results in detail.

References

• https://www.2dogsdesign.com/how-to-webpagetest
• https://www.bluecorona.com/blog/how-fast-should-website-be