Performance Test for CDN Evaluation with WebPageTest

By Valerie YJ Lee, Solutions Architect

When evaluating the performance of a CDN or a current website, you may need to measure it directly without any tools. In this article, I will describe how to perform these tests for a website with the WebPageTest tool.

How Does It Work?

Desktop

Image for post
Image for post
  • Real browsers
  • Different locations
  • Shaped traffic speeds

Mobile

Image for post
Image for post
  • Real Devices
  • Single location
  • Not mobile networks (this is possible to set up on private instances)

Running the test

We’ll be testing a website’s performance using http://www.webpagetest.org A simple test can be run using:

  • URL
  • Location
  • Browser

Interpretation of Results

Optimization Grades

WebPageTest has some indicators for web page performance like network speed, CDN effectiveness, compressions, and so on.

Image for post
Image for post

High Level Metrics

You can see high level stats on page performance with WebPageTest. Repeat view is also shown here if selected.

Image for post
Image for post
  • Load Time
    The time from when the user started navigating to the page until the Document Complete event (usually when all of the page content has loaded)
  • First Byte Time
    The time from when the user started navigating to the page until the first bit of the server response arrived. The bulk of this time is usually referred to the “back-end time” and is the amount of time the server spent building the page for the user
  • Start Render
    The time is the first point in time that something was displayed to the screen. Before this point in time the user was staring at a blank page
  • Speed Index
    A calculated metric that represents how quickly the page rendered the user-visible content (lower is better). More information on how it is calculated is available here: Speed Index
  • Dom Elements
    The count of the DOM elements on the tested page as measured at the end of the test

The metrics grouped together under the Document Complete heading are the metrics collected up until the browser considered the page loaded (onLoad event for those familiar with the javascript events). This usually happens after all of the images content have loaded but may not include content that is triggered by javascript execution.

Waterfall

Waterfall is a graphical representation that shows how the page and it’s object loaded

Image for post
Image for post

Render Timings

It shows how the page and its object loaded. In the figure below, you can see two items highlighted: the paint and render times. First paint is usually what other end-user monitoring tools will give you.

Image for post
Image for post

What to look for in the waterfall
1. Gradient

Image for post
Image for post

2. Gaps

Image for post
Image for post

3. Long Bars (any colour)

Image for post
Image for post

4. Length

Image for post
Image for post

Caching

  • Browser caching important of we are honoring origin
  • Note, we may be doing something that’s not shown here
  • CSV dump of all data available
Image for post
Image for post

Conclusion

If you want to check your web site performance before or after using CDN, WebPageTest tool will be helpful as an instant test. Synthetic monitoring tool is good for checking up site availability and performance trend by geo location, but the price is quite expensive. There are free and cool tools with good quality like WebPageTest, so just try to find more useful clues on your website. Have fun!

Reference:https://www.alibabacloud.com/blog/performance-test-for-cdn-evaluation-with-webpagetest_594656?spm=a2c41.12741399.0.0

Written by

Follow me to keep abreast with the latest technology news, industry insights, and developer trends.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store