FTC disclaimer: This post contains affiliate links and I will be compensated if you make a purchase after clicking on my link.
Have you ever tested your website performance and its correlated factors? No, then you are really missing out something very important.
If you are an SEO professional, you might be aware of the fact that website performance and user experience (UX) plays a vital role in search engine ranking. The Moz has already researched and documented how a website speed actually impacts search engine ranking.
Whenever, someone’s talking about a best website performance tool, the first name that strikes their mind is WebPageTest.org. Google has already suggested site owners, webmasters, web authors to evaluate the speed of their site using WebPageTest.org.
Understanding WebPageTest definitely solves the critical aspect associated with your site speed performance. You can do web performance testing and even analyze situations that is hampering your site speed.
You can even generate website performance report by using website performance metrics for better understanding. In this post, we’re going to figure out how to measure and improve your website performance using WebPageTest
Before we move on to Website performance metrics in detail, I’d like to point out something very important about WebPageTest. You should know that WebPageTest is an open source platform for public usage. The WebPagetest was originally created by AOL but it was maintained and run by Pat Meenan.
The WebPageTest is currently available under two heads:
2. WebPageTest Private instance:
If you want to run your site optimization test privately, then you have to download WebPageTest code repository to track web performance
The benefit of WebPageTest Private instance is that, you can run a site speed optimization test in your own development environment as well as store the result on your own web server. You can download the official repository of WebPageTest here and for WebPageTest Private instances, documentation click here
WebPageTest key Website Performance Metrics
Before we discuss further, let us know what are the key website performance metrics used by WebPageTest.
Time To First Byte (TTFB):
Time To First Byte measures the amount of time it takes for your browser to receive the first byte of response from a web server, when you request a web page. In other words, TTFB is a key website performance metric for determining the responsiveness of a website server and its network latency.
Network latency determines the time it takes while sending and receiving a request between a browser and web server. So, you would like to know what would affect network latency? Network latency may get affected by the speed of user’s network, the distance of web server and any interruption in the connection between the web browser and web server.
So, now it’s obvious that Time To First Byte (TTFB) may get affected both by web servers and network latency.
What’s the key process involved in TTFB process?
There are only three steps involved:
1. Firstly, Web browser sends a request to the web server – Any delay in webserver connection, DNS lookup, user network and web server distance, can greatly impact the end user experience.
2. Web server Process request and generating response back to the browser – Your web server response, greatly depends upon database connection, interpretation of web scripts, other network connections, hardware resources and even server side code.
So, now the question arises, how to optimize Time To First Byte?
You can easily optimize web server responsiveness by including caching of web pages (If you’re WordPress user, you can go to WordPress Cache Plugin) and upon migrating to a better web server (like migrating from shared hosting to WordPress managed hosting or VPS hosting).
3. Lastly, the browser receives the response from a Web server.
If you want to improve the first and third steps, I would recommend the use of a CDN (Content delivery network).
Start Render:
Start renders is another Website performance metric that determines the time it takes to render a web page (non white screen).
You would have noticed or come across a website that is fully loaded but still white screen is appearing. It means, the website is not yet rendered properly. So, in result of that, the user interaction with your website get affected and it’s counted in poor user experience (UX).
Document Complete:
Document complete is the time taken to load a page before you start interacting, clicking or entering data. It may be possible that all your content are not yet rendered fully but still you can easily interact with your web page.
Document complete metric includes the time it takes, request it performs and bytes get downloaded.
Fully Loaded:
Fully loaded measure the time it takes to get fully rendered and to download complete images, advertisement, analytics tracker. Fully loaded including all the background stuff you see to fill in as you move down the page.
Load Time:
Load time is determined by the measurement of document complete time or fully loaded time. It points to the user, you’re ready to interact with a website. Now, you can perform scrolling of a website, interact by clicking and entering data.
Speed Index:
Speed Index is another WebPageTest metric that measures the average time it takes to display the visible part of the web page and how quickly user experiences the visible screen.
The measurement is taken in seconds, which depends upon the size of the viewport (what is a viewport? Refer this page for more insights).
How to test your website with WebPageTest?
WebPageTest basically measures how your web page loads. When a page loads, it captures lots of useful metrics and display in various charts and tables.
The above listed WebPageTest metrics gives clear indication of visual discrepancy and how to sort out most of the problem associated with your Website load time. But, you need to understand how to run your test, control as many aspects, and take benefits of specific options.
So, let’s dive in!
1. Basic Setting:
Go ahead and visit www.WebPageTest.org. Feed your website URL and look for a set of configuration below, which is not a big task.
Test Location: WebPageTest supports up to 24 locations to run a performance test. But, I’d recommend you to use Dulles, VA, USA because it support as many options.
Browser: As you can see, the default browser is Google chrome but I would suggest not to use Google Chrome. Google Chrome has been already a fast browser because it uses powerful V8 JavaScript engine, which help in loading faster. I prefer Internet Explorer 10, as it is latest and updated version, using very new advanced technology. It’s interesting to see, how it works on IE10.
2. Advanced Setting:
For more advanced setting, tap on your first tab – test setting.
Connection: As you can see, the default would be cable, but I’d recommend you to select DSL. As, DSL is most common and popular in the household.
Number of Test to Run: I’d suggest to have at least 3 tests, though it supports up to 9. Your test would be based on medium on the number of tests you run.
First test, not necessarily would give you most appropriate number. It may possible, test results got hampered due to network latency. So, it’s recommended to have as many possible tests to understand your website performance better and to have a clear idea about the test result.
Repeat View: Here, opt for first view and repeat view and stick with it.
Capture Video: Keep capture video checked and leave other option as it is.
You would be wondering, why I have selected first view and repeat view? So, let’s understand what fist view and repeat view means in WebPageTest.
First view: First view tells you about someone who has never been to your website before (or has cleared their cache).
Repeat view: Repeat view tells you about someone who visited your same web page again.
Repeat view load time will always be less compared to first view if you are caching your website. Try to use good caching plugin which will reduce your load time to a great extend.
I’d recommend WP Rocket, though it’s a premium plugin, but I love it on my blog, simple, elegant and powerful. If your website uses shared hosting, then WP Rocket drastically improves your speed. It’s not a claim but proven.
If you can’t afford WP Rocket, though it’s not costly, then go for W3 Total Cache, best free plugin.
Let’s return to the topic! I prefer to leave the other tab untouched. If you still want to go more in depth and want to know how other aspect can impact your speed. You’re free to go. But, generally in test result, you can grab most of it.
How to analyze Web Page Test Result
The WebPageTest may take 20-30 seconds or even more depending upon your selected options and work queue.
When the test has completed, an intimidating screen of information will be presented. Don’t get scared off, this information will help you to analyze the web page performance.
Upon completion of your test, you will see performance results in a summary tab. The result is divided into two views, First view and Repeat view. Each view reflects useful metrics, which were captured during the test.
As we have captured more than one test, the result shows the medium value. Let’s see how each WebPageTest metric defines the test result.
Load Time – The load time indicates how long it took your website to load. The greater the number it means you’re running too many scripts, DNS lookup, other network connection, images and codes are not optimized.
First Byte – This is the Time To First Byte (TTFB) which I’ve described before. TTFB measurement helps you to understand the responsiveness of your server with the base HTML. If your website takes more than 500ms, then you need to optimize it and if it is more than 1s then you’re running a serious issue. Your focus should be to improve your first byte value. Time To First Byte is generally taken into consideration while ranking your website by Google.
Start Render – This metric indicates how long it took before something was visually displayed to the end user.
Document Complete – This metric number tells us, now you’re ready to interact with your website. At this moment, your website has downloaded all the initial components. It may include HTML DOM, scroller, form element, and even images. But, you still find some images, script and other background part are continuing to load. It may not necessarily affect your user experience (UX).
Fully Loaded – This is the point when your website is fully loaded. It means all the script, background process and extra stuff got loaded properly. This metric will not impact your SEO and user interface, but as a developer point of view this is an important metric.
Speed Index – This metric refers to the average load time of visual element. The number may solve the discrepancy between the calculated value and the actual value (what the user perceives). Typically, if you’re interested, you can even dive more, how this cool stuff was calculated.
DOM Elements – The DOM Elements metric is the measure of DOM elements on the tested page. Again, from a developer point of view, one should keep this number as low as possible. When you plumb your website score on another website performance tool, this metric may surely affect your score.
WebPageTest Grades:
Next, you would be curious to know how WebPageTest grades works, which lies at the top of the results.
Anything below A or B is not considered to be good, it means you need to look at those grades to fix it.
The grades has been prioritized from left to right, it means left being the most important.
Clicking on the grade will take you to a list of resources which help you to analyze the one that has a greater impact on site performance.
WebPageTest Waterfall View:
Next, we will move on to the detail tab that shows the waterfall view. Waterfall view plots the list of resources that were loaded from the network to display the page.
Again, the list of resources that were plotted on waterfall view are prioritized with the occurrence at the time of loading.
The time taken by the resources are plotted horizontally in waterfall view. Each of the rows in the waterfall view has multiple component marked with colors and the order of the components is always same.
The green and blue are the most common in every resource. The green color indicates a request time, which measure the time it took a browser to seed a request.
The blue color tells about download time took by browser the server provided. The orange color indicates the socket connect whenever the browser opens a new connection to the server.
The gray color shows the DNS lookup time. The DNS lookup, figure out the IP address associated with a domain name and adds another server request.
While analyzing, you should know that if the bar is longer, more time has been taken to process the request and if it contains multiple color, it shows multiple request has been processed. You should also keep in mind that parallel downloading is good, while stair step downloading is bad.
So, once you have identified the weak area underlying in waterfall view. Next is to emphasize the weaker area, fix it and repeat the test to measure the progress.
WebPageTest Video Capture:
Do you want to know how your website loads?
If you remember, you have already opted for capture video on advanced setting. On request, WebPageTest has captured filmstrip showing exactly how it would appear to your end user.
To access your video, click the Summary tab on your test result. Now, you have to scroll down and click the watch video.
It definitely gives you a clear picture about how your web page loads.
Even, you can compare your website with a competitor. Yes, you can do! WebPageTest’s offers “Visual Comparison” feature that is ideal for A/B testing.
For this you need to test your competitor website as you have tested yours. Once tested, click on Test History and choose the option to compare it side by side.
Conclusion:
Hope this tutorial would help you to measure the speed up your website and correct flaws!
As learned above, WebPageTest provides a wealth of information about Web performance of a site. So, it’s foremost important to establish a habit of site performance test.
The WebPageTest is one of the best free and open source website performance testing tool out there in market that helps you to gauge Site performance, analyze web performance.
Want to explore more, check their capabilities offered with WebPageTest, get in touch with WebPageTest Forum and feel free to ask any questions or remarks.
