+91 77362 71566 admin@gotmenow.com

One of the most important tools we use to help our clients is WebPageTest. There are several other options for page speed testing, but this is the one we use the most!

What is WebPageTest.org?

Webpagetest is a free tool that can help you identify why your WordPress website is slow and help you fine-tune it to be as fast as possible. It offers a variety of options to help you understand where you have bottlenecks in your speed and what visitors are experiencing on their first visit as well as repeat visits.

Importance of Page Speed!

You should always be concerned with the speed of your website because it directly affects your user experience which in turn can affect your ranking. Google has also announced that they use site speed as a ranking factor. This has been disputed by some – but whether it is a direct ranking factor or not – it is IMPORTANT!

webpagetest

Keeping Things Simple

As you can imagine this is a topic that we can go on for hours about! We are ONLY giving you an overview of everything we think you should know and will focus deeper on ONLY the areas we think it is necessary.

This is a very technical topic – but we promise to do our best to make it as easy to understand as possible.

Why We Love WebPageTest.org

Webpagetest.org is our go-to for speed tests because of its flexibility and custom settings that allow you more accurate results. For this post, we are primarily working with the default settings with just a couple of tweaks.

They also recently added a security score which I am confident will help website owners see where they are at risk. You can visit our guide on WordPress Security Headers to help you ace their security score.

The other thing that sets it apart is that you can take multiple speed samples from your website – so for example if you take a 3 test run you will receive a 1st, 2nd, and 3rd run. Then the results summary will provide an average of those 3 tests. In a perfect world, your 3rd run should be faster than your third because some of your content will be cached on that 3rd test – if you find your 3rd is slower than your 1st you may have some other issues going on.

Running WebPageTest

To run a test go to webpagetest.org and enter your details as outlined below:

  1. Enter your website URL – make sure you enter your URL exactly how the default URL is. If you are HTTPS – then make sure you use that so you get the most accurate information. If you use www, then make sure you use that as well
  2. Test Location – choose the area that is closest to where your visitors may come from. We are in NJ so we typically use New York, NY. Dulles, VA is the default option so you can use that one – sometimes there are too many tests waiting for other areas – Dulles seems to be the fastest in most cases.
  3. Select A Browser – different test locations may have different browser options available – we typically stick with Chrome as our browser choice but IE is also a common option. Dulles, VA is their default test location and that has options for all the browsers Webpagetest works with so choose Dulles if you want all the options that are available.
  4. Advanced Settings – This is OPTIONAL, but we like to run 3 tests and then see the First View and Repeat View – you can uncheck capture video for now too just to speed things up a bit.
  5. Connection – this emulates the type of internet connection your visitor may have. You can play around with this option, but we typically keep it set to Cable since that is pretty standard.
  6. Keep Test Private – this just keeps it from showing on the webpagetest.org website as a “recently tested website” – we usually keep this checked.
  7. Click Start Test
You will see many other tabs and options – but we are not going to address those here since they are very technical. What we have outlined above is enough for a general overview of your website.

Webpagetest Testing Setup

Reading the WebPageTest.org Results

THE A, B’s & C’s

Once the test is done you will be taken to a screen that has a variety of results for you to review. For this post we are only concentrating on the top area which shows letter grades and then a table with Performance Results.

Below is the top of the results page with the letters grades, let’s dig a little deeper to understand what this means.

Letter Grade Results WebpageTest

The A, B and C’s – truth is, we do not even look at these, but if you are one who needs to have all A’s — then you can take a peak and then work on your page to improve it. Your goal is to make your website fast – not get pretty green A’s!

Here is what each of those alphabetic items means:

First Byte Timethe time it takes for the server to respond to a user navigating the page, this is most commonly the backend time needed to build the page, and often hosting plays a big part in this being too slow.

Keep Alive Enabled – in simple terms it is a communication that happens between the web server and browser that says “hey, you can grab more than one file at a time” – this allows multiple files to be retrieved at once otherwise one file would be downloaded at a time which would make it even longer.

Compress Transfer – basically, this is a signal as to how big/small your file sizes are. If you have GZIP compression enabled you should be good.

Compress Images – images are one of the biggest issues on most websites and by compressing them you are making the website smaller and removing image metadata which can greatly improve speed.

Cache Static Contentcontent on your website that does not change often – like images, javascript files, etc. can be configured so that the browser that the USER is using can store them so when they come back to your website they can just use the copy stored in their cache instead of waiting for your website to load it. This is incredibly helpful on return visits.

Effective Use of CDN – if your website is using a CDN (Content Distribution Network) it will be reflected here.

Understanding Your Performance Results

Performance Results (Media Run)
This table gives you the AVERAGE load times of the 3 tests we ran and returns the averages for the First View and Repeat View.

First View is emulating a test of a person visiting your website with a browser that has its cache and cookies cleared out, it is basically a person visiting your website for the very first time.
Repeat View is done right after the first view and represents what someone would see and how fast it would load for someone who came to your site – left and came right back. The repeat view SHOULD be faster than the first!

Reading Speed Test Results Webpagetest

Understanding the speed performance metrics above:

Load Time or Document Complete Time: First View: 3.468s  /  Repeat View  1.252s
The point at which enough is loaded to have some sort of interaction with the page – most images and code are loaded and users can scroll and interact with the page.

This page took 3.468 seconds to load all the content it needed to render the page including CSS files, images, Javascript files, 3rd party scripts, etc. on the first visit and 1.252 seconds on the repeat visit. The lower time on the second visit is what we want to see!

First Byte: First View: 1.250s  /  Repeat View  .9777s
This is the time taken on the server side to display your web page. This has nothing to do with your files on your website – it is strictly a server related result. You would want this to be no more then 200-400s

Request: First View: 32  /  Repeat View  2
This is the number of images, JS and CSS files and other elements that the server needs to pull in to display the website. While there is no right or wrong number – typically the lower the better.

You can see on the repeat view only 2 request were made – this is because of “caching” where most of the content is stored in the users browser.

Start Render:First View: 3.191s  /  Repeat View  .874s
How long it takes for the browser to start to pull and display the content of the page or the point where a white page is not longer showing.

Fully Loaded: First View: 3.562s  /  Repeat View  1.252s
The full loading time of the page. This includes all tracking code, ads etc.

Speed Index: First View: 3381  /  Repeat View  1122
How fast your site is – a lower score is better – this is not a metric we focus on too much but we have seen that a target goal is under 1000.

webpagetest

What Is A Waterfall Diagram?

The waterfall diagram on any page speed testing tool gives you an easy to read view of every resource on your website in a list format, in the order in which those resources were loaded along with the time it took to load each resource.

It is critical to analyze this information to ensure your website is running at top speed and find the reason(s) it isn’t.

As you can imagine this is a COMPLEX and very TECHNICAL tool – we can get really deep into the who, what, where, when, and why – but because we focus on writing easy-to-understand tutorials we won’t be doing that.

We are ONLY going to tell you what you need to understand to read the waterfall.

We will do future posts that outline how to fix items. But for now, we just want you to understand what the waterfall is telling you!

Accessing The Waterfall

  1. Run your page speed test as outlined above.
  2. The waterfall results will load under the performance results table. Click on any FIRST VIEW waterfall result that is returned on the page after the page speed test is complete. FYI, We typically look at the waterfall for the slowest loading view time.
  3. The resulting page will show several items including waterfall view, connection view, request details, and request headers. For this post, we are only focusing on the waterfall view.

Below is a screenshot of a piece of a waterfall.

What is shown above is OVERWHELMING! We get it. So we will do our best to make it as easy as possible.

Basically, the waterfall is a cascading chart of each resource loaded by a browser – and in a nutshell the shorter the horizontal lines are the better!

Sample Waterfall WebpageTest

Understanding The Colors

As you can see in the image below everything is color-coded and every color has significance.

Waterfall Color Chart

DARK GREEN – DNS: In order for the browser to deliver your website, it has to look up your DNS to be able to deliver the IP address properly to let the website be seen.

ORANGE – CONNECT: A TCP connection must be created before the browser can deliver your website – this should only appear on the first few rows of the waterfall.

DARK PURPLE – SSL: Any resources that are loading from a secure website will need to be processed as such – the purple will signify how long it is taking to connect to that SSL item.

The above are items that are a little more complex and may require more technical resources to fix.

The OTHER colors that appear above the actual waterfall – blue, orange, green, purple, green, red, and gray are all reflective of the type of content on your website.

For example, if you see a red line in a row – you will know that is a font file is loaded, if you see green – then you know it is a CSS file that is being loaded.

Reducing Waterfall Line Widths

For each line item in your waterfall you want it to be as low in width as possible – simply put, the less wide the waterfall is, the faster your website will load.

In viewing a portion of a waterfall for the website Playful Kitty – who we would like to thank for being a “subject” for us – we can see some really short rows – and some really long ones.

Playful Kitty is actually using Cloudflare with her website which makes things a bit more interesting! There is a lot of complexities to Cloudflare or any CDN since the content is delivered based on location so results of visits to her website will range based on location. Because this is a beginner’s guide, we are keeping things simple and will not go into too much detail on that – just wanted to make you aware!

Let’s review what we are seeing here:

Waterfall Issues Example

Light colors versus Dark colors:  The lighter time is the time from when the browser sends the request out on the web until the first byte comes back and makes a connection. The darker color is the time it takes to download the resource.

ISSUE #1 – First time to byte is almost 4 seconds! This is one of the more common issues which should actually get a post of its own. But typically it is a server-related issue if you are seeing the blue as it is shown here.

ISSUE #2 – You can see a lot of purple in her waterfall – lots of light purple and then small dark purples at the end. The light purple as noted above is the website calling to deliver the image – the dark is how long it took to download the image.

THE GOOD: On the good side her waterfall is left aligned – all the bars start pretty close to the left side of the waterfall which means all the resources are being loaded concurrently as opposed to waiting for one resource to load and then starting a new load.

Red and Yellow Highlights

You may see a HIGHLIGHTED row in your waterfall – and it can be yellow or red as shown in the below image.

Webpagetest Yellow Red Highlights

RED lines usually reflect a 404 as seen in the example above and simply means your website is calling something that does not exist. The best thing to do is to remove the call for the element that is missing if it is not something that is needed – or add the item back to your website if it is needed.

YELLOW lines are signs of redirect issues and are commonly shown as 301 or 302 redirects. This means you are calling the resource at one URL (maybe http://thiswebsite.com) – but the resource has moved to a new URL (maybe https://thiswebsite.com). With more sites moving to https this is becoming a more prominent issue for page speed.

Both of these can greatly impact page performance, so these should be addressed as quickly as possible.

Checking Out Your Image Sizes

One of our favorite tools that we recommend to help website owners is the “View All Images” tool. This link is at the bottom of your waterfall as seen in the image below.

You can simply click on that link and you will see all of the images that are in your waterfall — but as actual images with the sizes that are reflected on the website as well as the size it could be if compressed.

This is a great way to easily see which images you need to resize or compress for faster download.

View All Image Webpage Test
View all images link below the waterfall

WEB DESIGN AND DEVELOPMENT COMPANY IN BANGALORE

WEB DESIGN AND DEVELOPMENT  Gotmenow Soft Solution is a top-notch cloud solution provider with an outstanding SEO team. To help you expand your business and fulfil your goals, we create an original and successful website that captures your brand, improves conversion...

The State of SEO in Google Lightning Talks

The most recent video in Google's Lightning Talks series is a  comparison status of SEO in 2020 to 2019. Web search engine optimization status shows details on how the website complies with traditional SEO standards, according to the video and title of Google's...

Website Speed: Why It Matters & How to Improve It

Have you ever had your credit card in front of you, wanting to make a travel reservation, but the website is painfully slow to load, or worse – it never loads at all? In the age of abundant options, most of us simply make that reservation on a competing website....

How to Improve Your Website Page Load Speed for Better SEO

Website page load speed is the amount of time it takes for a specific page to display content. Google uses page speed to rank pages. Search engines penalize a page with low load speed both on desktop and mobile devices. You can analyze the load speed of your website...

How to improve website load speed

Improving the speed of your website can improve conversions! Visitors expectations have grown to the point where a slow website can mean you lose their business. Think of it this way your website load speed is the visitors first impression of you! That’s why it’s...
Share This

Share This

Share this post with your friends!