DEVELOPMENT

How to Test Your Website Speed

In Part II of our W3 Total Cache series we explain some basic concepts about speed tests, and also explain how to carry out a Speed Test on your Website.

This tutorial is the second part of a series relating to W3 Total Cache, the popular WordPress Cache Plugin. This part of the series will talk about some of the basic concepts you need to know when carrying out your website speed test, as well as how to use one of the many free tools available for testing website speed.

In Part II of the series, we will look at the following:

  1. Why Carry out a Website Speed Test?
  2. Website Speed Concepts
  3. Why Website Speed Test Scores Should Only Be Used as a Guide
  4. List of Website Speed Test Tools
  5. Final Thoughts

Part III will look at how to install the W3 Total Plugin. You can see a list of all parts of the series in the sidebar.

(Part III is due to be posted on or before the 20th November, with subsequent sections following each day or two after that. In the meantime, please check out our old tutorial (which this is meant to replace) here.)

1. Why Carry out a Website Speed Test?

why-carry-out-a-speed-test-on-website In the context of this tutorial series, it is very useful to obtain a website speed test before installing W3 Total Cache. This allows you to see just how much quicker your website has become after completing the tutorial.

Testing your website speed can also suggest other improvements such as image optimization, the need for a Worldwide CDN, or the need to remove problematic scripts or plugins. We will cover these in a related series at a later date.

Here are some of the most common reasons to use speed test tools on your website:

  • Investigating load time issues, including checking scripts, fonts, and plugins.
  • Checking minification of your scripts
  • Analyzing images to find large non-optimized images causing load time issues
  • Checking whether you have any render-blocking JavaScript or CSS
  • Testing Time to First Byte (TTFB)
  • Analyzing total load times, page sizes, and number of server requests
  • Checking load times from different locations around the world
  • Checking for issues in different browsers
  • Analyzing HTTP Headers (for example to check caching is working, whether cache is public or private etc.)
  • Checking your Content Delivery Network is configured correctly.

2. Website Speed Concepts

website-speed-concepts To fully understand your speed test results there are a few concepts that you need to know.

By learning a few basics, you should be able to tell the difference between the time it takes for the website page to start displaying, and the time for all the assets (images, JavaScript) to load. For a website to feel fast the user the page has to be substantially loaded with a small Render Time, not necessarily fully loaded.

Time to First Byte (TTFB)

Time to First Byte indicates the time it takes for your browser to start receiving information from the server after first making the request from the browser. A slow TTFB can indicate issues with your server, server configuration or server network. It may also indicate that the server is located some distance from your location as the browser request has to travel further.

Choosing a server location close to your users, and using a Content Delivery Network can improve the TTFB.

Page Load Time

"Page Load Time" is the time it takes for the webpage to load fully, with all associated CSS, JavaScript, and image files so that full interaction with the website is available by the user. For example, the time between the server receiving a request to load the webpage and the browser fully loaded that webpage.

Page Rendering Time

Unlike the Page Load Time, Page Rendering Time measures the time it takes for the webpage to be ready for the user to interact with. Some webpage assets, such as images, or scripts (such as social share scripts, Google Analytics scripts, etc.) will load after the page has begun to render. However, the user is still able to interact with the website while these are loading.

With Web pages being much larger, and loading many different CSS and JavaScript files, the Page Load Time is not always the best way to measure website speed. Sometimes page speed testing services can give what we call a "false reading" by implying that your website is slow, but in reality, may be loading very quickly.

Example of Page Rendering Time

If you take our homepage here, the total load time reported by Pingdom Tools shows 1.49 seconds. However, our page starts rendering after just 0.2 — 0.3 seconds. You can see when the page starts rendering with the red box below:

Website speed test

Just from this one example, it is clear that the total load time is not an accurate representation of our website speed.

Render-Blocking JavaScript & CSS

Before a page can be loaded it has to prepare and parse the page. If it encounters an external script (such as a JavaScript file or CSS file) that prevents the parsing of the page, then it has to wait until those scripts before it can continue. Each time it encounters such as script, the browser has to contact the server where that script is located, thus delaying the Page Rendering Time.

You can use W3 Total cache to prevent scripts from being "render-blocking", and we will go into this in more detail later in the Tutorial Series.

Minification of Resources

By using minification, you can remove unnecessary characters from your HTML, CSS, and JavaScript. Examples of such characters include:

  • White spaces
  • New lines
  • Comments (comments embedded within the code)
  • Block delimiters

This reduces the size of the files that need to be loaded from the server, thus saving bandwidth and causing the files to load faster.

HTTP Requests

When your browser fetches data from a server, it does so using HTTP (HyperText Transfer Protocol). For each file that requires to be loaded, a request to the server needs to be made. Unfortunately, browsers can only handle so many requests simultaneously. The limits on number of simultaneous requests a browser are as follows:

How many concurrent requests can a browser send to different domains at a time? What has this got to do with parallelization of request/downloads? — Quora

  • Opera 9+ and Safari 3+ — 4 downloads per hostname
  • internet Explorer 8, Firefox 3, and Chrome 1+ — six downloads per hostname
There are many ways you can reduce the number of requests such as:
  • Combining your CSS and JavaScript files
  • Inline any small snippets of JavaScript
  • Using CSS Sprites
  • Reducing assets such as 3rd party plugins that make a large number of external requests

Also, by using a CDN you can increase the number of simultaneous requests as the restrictions are per Hostname. By spreading the downloads over multiple hostnames allows for faster page load times.

Also, HTTP/2 is now starting to be rolled out which do not have these restrictions. You can read more about HTTP/2 here (coming soon).

3. Why Website Speed Test Scores Should Only Be Used as a Guide

Every website is different and as such, no set of website optimizations will work the same on every website. Here are some examples why:

  • Incompatibility issues with Optimizations techniques — Some websites contain JavaScript or CSS that when combined will cause display \ styling issues
  • Some optimizations reduce score — Some services such as CloudFlare reduce your website speed test score despite improving the load time of your website
  • Exceptions to the rule — Occasionally (but most likely NOT) combining files can cause the website to load slower (or at least make the Page Render Time slower, even if the Total Page Load time is faster). For example "sometimes" downloading one 150kb JavaScript file can load slower than two 75kb files as the two 75kb files can be downloaded simultaneously. This depends on how the page renders, and how many HTTP requests there are in total. Despite that, you would get a lower speed test score for the latter because it does not follow best practices.

Therefore, when optimizing your website, you should carry out speed tests to determine the improvement in both webpage Load time and Render time after each optimization. Remember to clear your cache before testing, though!

In essence, worry more about the speed, than the score. The score is helpful as a guide for "suggestions" only. Our favorite tool for measuring actual page speed is Pingdom Tools (see below), but many other tools are useful for giving insight also.

4. List of Website Speed Test Tools

You will find below a list of the most popular webpage Speed Test tools that we think you will find useful:

Google PageSpeed Insights

PageSpeed Insights Google PageSpeed Insights is a service free by Google that measures the speed of your website for both desktop and mobile versions of your website. The score gives a range between 0 and 100, with the higher score being better. Google indicates that a score of 85 or more means the page is performing well. The report produced shows detailed recommendations and insights on how you can improve your PageSpeed score, along with an indication of importance.

PageSpeed Insights measures performance on two things:

  • The time until the page begins to render
  • The time until the page is fully loaded

A mobile report includes the results of a Mobile Friendliness test, as this is now part of the Google Algorithm. This includes checking your viewport configuration, the size of your tap targets (buttons and links), whether buttons are too close to hinder tapping, and also eligible font sizes.

Pingdom

Website speed test pingdom

Pingdom is probably one of the most popular website speed test tools, and the one we use the most ourselves. To use Pingdom Tools you just enter in your website address, and then it will summarize your webpage performance at the top with four metrics:

  • Performance grade.
  • Requests.
  • Load time.
  • Page size.

Below the summary you will find further information divided into four different sections:

  • Waterfall breakdown
  • Performance grade
  • Page analysis
  • History

The page analysis offers an excellent overview of additional information such as a size analysis, size per domain (you can easily compare your CDN assets size vs. your domain), the number of requests per domain, and what type of content had the most requests.

GTmetrix

gtmetrix speed test website

GTmetrix is a little more detailed than Pingdom Tools, and for that reason, many people prefer it over other tools. GTmetrix provides the following information:

  • PageSpeed and YSlow scores — The GTmetrix score is an average of the PageSpeed and YSlow scores. The arrow next to the score indicates whether you are faster than other websites analyzed by them.
  • Recommendations — You will receive a full list of actionable recommendations, prioritized by importance \ potential gains.
  • Page Load Details (time, size, the number of requests) — These give a great overview of your page speed. Also, the results are color coded so you can see how you compare with other websites.
  • Waterfall, Video, and Report History — This allows you to see \ determine how your page assets load and troubleshoot any delays. The history allows you to see how any changes you make have affected the website speed.

To get the most out of GTmetrix, we highly recommend you register with them for free. By doing so, you will get access to more features, including testing using different browsers, connection types (i.e. see how your website loads with a slower connection).

One feature we particularly like is the video playback option. This allows you to playback your page load, at your chosen speed, so you can see precisely where any bottlenecks occur.

WebPageTest

WebPagetest speed test

WebPageTest was a first created as an internal tool for AOL, and subsequently made open source in 2008. As such the interface is a little more dated, and the speed of the test is a bit sluggish, especially if you get stuck in a queue behind other users.

That being said, it does have some great features such as being able to choose from over 40 locations around the world, over 25 browser types. It also tests the page speed twice, so you can see what effects (if any) a DNS lookup will have on your initial page load. On completion of the test you will be assigned a grade from A to F based on the following:

  • First Byte Time
  • Keep-alive Enabled
  • Compress Transfer
  • Compress Images
  • Cache Static Content
  • Effective Use of CDN

The things they test for is somewhat limited, and not as comprehensive as some of the above tests mentioned.

WebPageTest also has more advanced features as well such as video capture, disabling JavaScript, ignoring SSL certificates, entering authentication to test password protected pages, and spoofing user agent strings among other things.

DareBoost

Web Performance Report

DareBoost is one of the newer tools on the market, and having tested it for the first time while writing this article is now one of our favorites. You will need to register for free to make full use of the tool.

Dareboost makes various checks (over 100 in total) in each of the following areas:

  • Accessibility — Checks for Descriptions in form fields, noscript tags (i.e. if something is readable when the user has JavaScript disabled), if "lang" is specified (for screen readers), etc.
  • Browser Rendering — Tests whether JavaScript is deferred, slowest resources, duplicate scripts, etc.
  • Cache Policy — Checks for Expire Headers, inline script lengths, query strings on static resources, etc.
  • Compliance — Checks for correct Font formats, Silverlight plugin usage, flash resources, etc.
  • Data Amount — Checks for things like optimized images, minification, page size, etc.
  • Number of Requests — Checks whether you could combine JavaScript files, redirects, unreachable resources, etc.
  • Quality — Looks at HTML code quality
  • SEO — Checks for basic SEO matters, such as H1 tags, number of links on page, meta description, etc.
  • Security — Checks whether you are protected against popular malicious web attacks, such as XXS attacks. It also checks SSL issues.

Each test is given a score between 0 and 100 so you can get an indication of how well your website is doing.

UpTrends

Website Speed Test Uptrends

Uptrends is a very basic speed test that allows testing from over 35 locations around the world.

Their report is broken up into two sections:

  • Waterfall — This enables you to see how the website resources load, and determine any problematic files.
  • Domain groups — This classifies each resource as either 1st party, statistics, CDN, social, ads, first party overall, and third party overall. If you click on the resource, you can view the request and response headers, which is useful for checking caching, encoding, etc.

We prefer Pingdom Tools over Uptrends as you get a much better summary.

Dotcom-Monitor

Website Speed Test Dotcom Monitor

Dotcom-Monitor is a simple tool that offers the ability to test your website speed from 23 different locations simultaneously. You can also choose from multiple web browsers.

Their reports are divided into five different sections, which can be accessed when you click on the Waterfall link next to your selected location:

  • Summary
  • Performance
  • Waterfall chart
  • Host
  • Errors

The information is quite clear, but no recommendations for improvements are given.

PageScoring

PageScoring speed test

PageScoring is a very basic tool, which gives you a summary report showing the following information:

  • Domain lookups
  • Connection Time
  • Redirection Time
  • Page Size
  • Download Time

After the initial summary, it will then list your files and specify the content type, size, and time taken to download. This is great if you want a quick list, but we find the Pingdom Tools summary much more detailed, but also a much clearer layout.

Yellow Lab Tools

Yellow Lab Tools

Yellow Lab Tools is a little different, with both good and bad aspects. Firstly it doesn't give you a choice of locations from where it conducts the webpage test, and nor does it specify a location.

On the other hand, it has an excellent JavaScript timeline that shows you the interactions during the loading of the page. You can see a screenshot of this feature below:

Yellow Lab Tools javascript profile

The Yellow Labs Speed Test Tool also gives you a score based on the following:

  • Page weight
  • Requests
  • DOM
  • Bad JavaScript
  • Bad CSS
  • Server Config

If you click on any of the entries in the result, it will go into more detail and suggest where improvements can be made. Overall it does a fairly decent job at this.

5. Final Thoughts about testing your Website Speed

There are many different speed test tools to choose from, each with their own features and functionality. Many of the tools now reference the Google Page Speed Insights, and some tools give great explanations as to how you can improve your website speed based on the results.

Our personal preference is Pingdom Tools, and Google Page Speed Insights. That being said, we were impressed with Dareboost for how it explains the test results, as well as dotcom-monitor that allows testing from multiple locations at the same time.

Of course, as we previously said, the Speed Test Tools should only be used as a guide. We hope to expand more on some of the other things (apart from W3 Total Cache) that you can do such as Optimizing Images, Reducing HTTP Requests, Using a CDN, etc. in a future series.

(Part III is due to be posted on or before the 20th November, with subsequent sections following each day or two after that. In the meantime, please check out our old tutorial (which this is meant to replace) here.)

Related tags
Check out our top user-rated host: SiteGround
Need help choosing a hosting provider?
Check out our top user-rated host: SiteGround