[et_pb_section fb_built=”1″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_row _builder_version=”4.9.10″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]
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!
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]
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.
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]
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!
[/et_pb_text][et_pb_image src=”https://blog.gotmenow.com/wp-content/uploads/2021/10/webpagetest-test.png” alt=”webpagetest” title_text=”webpagetest” _builder_version=”4.9.10″ _module_preset=”default”][/et_pb_image][et_pb_text _builder_version=”4.9.10″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]
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.
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]
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.
[/et_pb_text][et_pb_button button_url=”https://bit.ly/gotmenow-whatsapp” url_new_window=”on” button_text=”Connect With Us” button_alignment=”center” _builder_version=”4.9.10″ _module_preset=”default” box_shadow_style=”preset1″ box_shadow_color=”#0C71C3″][/et_pb_button][et_pb_text _builder_version=”4.9.10″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]
Running WebPageTest
To run a test go to webpagetest.org and enter your details as outlined below:
- 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
- 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.
- 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.
- 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.
- 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.
- Keep Test Private – this just keeps it from showing on the webpagetest.org website as a “recently tested website” – we usually keep this checked.
- Click Start Test
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]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.
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]
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.
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]
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!
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]
Here is what each of those alphabetic items means:
First Byte Time – the 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 Content – content 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.
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]
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!
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]
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!
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]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.
[/et_pb_text][et_pb_image src=”https://blog.gotmenow.com/wp-content/uploads/2021/10/SNTAgf6dC7C8co56AkTJf7.jpg” alt=”webpagetest” title_text=”webpagetest” _builder_version=”4.9.10″ _module_preset=”default”][/et_pb_image][et_pb_text _builder_version=”4.9.10″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]
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!
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]
Accessing The Waterfall
- Run your page speed test as outlined above.
- 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.
- 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.
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]
How to drastically improve website speed? Using nginx and varnish
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]
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!
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]
Understanding The Colors
As you can see in the image below everything is color-coded and every color has significance.
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.
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]
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!
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]
Let’s review what we are seeing here:
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.
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]
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.
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]
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.
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.
[/et_pb_text][et_pb_button button_url=”http://www.gotmenow.com/” url_new_window=”on” button_text=”Visit Us” button_alignment=”center” _builder_version=”4.9.10″ _module_preset=”default” filter_saturate=”147%” filter_brightness=”61%” box_shadow_style=”preset1″ box_shadow_horizontal=”11px” box_shadow_color=”#0C71C3″][/et_pb_button][et_pb_text _builder_version=”4.9.10″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]
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.
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]
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.
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.10″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_post_slider posts_number=”5″ include_categories=”2″ _builder_version=”4.9.10″ _module_preset=”default”][/et_pb_post_slider][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.10″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_social_media_follow _builder_version=”4.9.10″ _module_preset=”default” text_orientation=”center”][et_pb_social_media_follow_network social_network=”facebook” url=”https://www.facebook.com/Gotmenownrp” _builder_version=”4.9.10″ _module_preset=”default” background_color=”#3b5998″ follow_button=”off” url_new_window=”on”]facebook[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”twitter” url=”https://twitter.com/Gotmenow3″ _builder_version=”4.9.10″ _module_preset=”default” background_color=”#00aced” follow_button=”off” url_new_window=”on”]twitter[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”linkedin” url=”https://www.linkedin.com/in/gotmenow-soft-solutions/” _builder_version=”4.9.10″ _module_preset=”default” background_color=”#007bb6″ follow_button=”off” url_new_window=”on”]linkedin[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”instagram” url=”https://www.instagram.com/gotmenow_soft_solutions/” _builder_version=”4.9.10″ _module_preset=”default” background_color=”#ea2c59″ follow_button=”off” url_new_window=”on”]instagram[/et_pb_social_media_follow_network][/et_pb_social_media_follow][/et_pb_column][/et_pb_row][/et_pb_section]