{"id":502251,"date":"2017-11-28T14:00:19","date_gmt":"2017-11-28T13:00:19","guid":{"rendered":"https:\/\/wp-rocket.me\/?p=502251"},"modified":"2021-07-29T10:18:57","modified_gmt":"2021-07-29T08:18:57","slug":"the-2-minute-speed-test-analysis","status":"publish","type":"post","link":"https:\/\/wp-rocket.me\/blog\/the-2-minute-speed-test-analysis\/","title":{"rendered":"The 2 Minute Speed Test Analysis: How to Read a Waterfall Chart"},"content":{"rendered":"

A waterfall chart probably is the most valuable piece of data you can get from a website\u2019s performance review. But it also is one of the bulkier ones. It sometimes scares off inexperienced users and even pros need some time to analyze waterfall charts. In this article, I\u2019ll show you 7 tricks with which you will rock your next website analysis in just a couple of minutes. You’ll easily learn how to read and analyze a waterfall chart.<\/p>\n

Performance, page speed, website load time\u2013\u2013all these terms describe one of the most important aspects of any web project. Loading time can influence Google\u2019s rankings, and it also determines user engagement. Especially on mobile devices. Google\u2019s latest Performance Tool, Test My Site, is a great example of the importance of website loading speed: If you analyze your website with Test My Site, Google will tell you how many website users you will probably lose due to your website\u2019s loading speed.<\/p>\n

\"\"<\/p>\n

For raidboxes.io, Google predicts a 19 percent visitor loss due to our five-second loading speed.<\/p>\n

A fast-loading and well-optimized website is an important precondition for a web project\u2019s success\u2013\u2013be it selling products, sharing opinions and information, or raising money for your business or a good cause.<\/p>\n

Data by Google<\/a> shows that the probability of a mobile user leaving your website prematurely increases, the longer your site takes to load. If, for example, your website loads in about six seconds, the probability of a visitor leaving your website early is 106 percent higher than in the control group.<\/p>\n

\"\"<\/p>\n

Therefore, analyzing the perceived load speed of a website is an important but sometimes tedious task. Since we analyze dozens of WordPress websites every week, we not only automated the process but also came up with some handy hacks for you to use in order to speed up your own analysis tremendously.<\/p>\n

Just a few tools provide you with the performance info you need<\/h2>\n

But first things first: There are a plethora of tools out there that can measure your website’s performance in some way. Basically, there are two kinds of tests: Optimization Audits and Performance Audits. The former shows you how well your WordPress website is already optimized and how it can be improved even further. Google PageSpeed Insights<\/a>, Google Test My Site<\/a>, and Yahoo\u2019s YSlow<\/a> are well-known examples. What these tools basically do is compare your website to a set of rules. The more rules your website complies with, the better your test result.<\/p>\n

Performance Audits, or speed tests, \u00a0on the other hand actually measure how long it takes your website to be rendered in a user\u2019s browser. Webpagetest<\/a>, Pingdom<\/a>, and GTMetrix<\/a> are three well-known (and free) examples. These are the tools you want to use. Because only Performance Audits provide you with the data you need to properly optimize a website and measure your success.<\/p>\n

And Performance Audits will provide you with one of the most valuable pieces of data: The waterfall chart. This chart will show you exactly what happens when a user visits your website, when it happens and how long it takes your webserver to do it.<\/p>\n

What’s a Waterfall chart and why it can look complex (it\u2019s just shapes and colors)<\/h2>\n

The chronological structure is what makes a waterfall chart so valuable. It allows you to understand exactly what your website does and enables you to identify potentially harmful processes and elements that slow your website down.<\/p>\n

No matter which tool you use, the waterfall chart always has four identical characteristics, that you need to know:<\/p>\n

    \n
  1. The x-axis (horizontal) is the time axis. It indicates how long it takes to load every single element of your website.<\/li>\n<\/ol>\n

    \"\"<\/p>\n

    GTMetrix displays your website\u2019s load time in the bottom right corner of the waterfall chart.<\/p>\n

    \"\"<\/p>\n

    Pingdom\u2013\u2013which probably has the prettiest waterfall charts\u2013\u2013displays the load time in the middle of the lower edge of its waterfall views.<\/p>\n

    \"\"<\/p>\n

    Webpagetest doesn\u2019t display the overall loading time of your website on the lower edge of the chart. But it contains a whole scale, making it easier to read.<\/p>\n

    2)\u00a0 The y-axis (vertical) contains every single request and resource that is needed in order to fully load your website.<\/p>\n

    \"\"<\/p>\n

    Waterfall charts depict your website\u2019s requests in chronological order. If you click on a requests, you will additional information about the corresponding resource that is loaded.<\/p>\n

    3)\u00a0A code of some kind shows what type of resources are loaded (image, CSS, JavaScript etc.)<\/p>\n

    \"\"<\/p>\n

    Webpagetest for example uses this color code to identify images, JavaScript, CSS etc.<\/p>\n

    \"\"<\/p>\n

    Pingdom on the other hand uses these symbols to identify the different types of resources.<\/p>\n

    4) An additional coding system shows how individual requests are executed (how long it takes to connect to the web server, how many connections need to be opened and whether or not HTTPS is used)<\/p>\n

    \"\"<\/p>\n

    Pingdom uses colors to indicate the different phases of an HTTP requests.<\/p>\n

    Every tool has its own logic, when it comes to color codes. But basically they all use the same four elements in their waterfall charts. Once you understand that, an analysis really is child\u2019s play \ud83d\ude09<\/p>\n

    The 2-Minute Waterfall Chart Analysis<\/h2>\n

    Now that you know how to read a waterfall chart, it\u2019s time to show you the 7 hacks we came up with that allow you to analyze any webpage in 5 seconds or less. These tricks will help you understand how and how fast your website loads. And they will show you where the potential lies to make your project faster and better.<\/p>\n

    Rule #1 \u2013 Size matters: The shorter, the better<\/h3>\n

    The longer your waterfall view, the more requests need to be rendered and the slower it may be. However: A \u201clong\u201d waterfall view isn\u2019t always a bad thing. Since you need certain features and external resources on your website\u2013\u2013like a support chat plugin, a Google Map or Google Analytics\u2013\u2013it may have to have a certain length after all. And if you use HTTP\/2, which is only possible if your website loads via HTTPS, your website can also profit from parallel loading and server push. This technology mitigates the negative effects of too many HTTP requests.<\/p>\n

    In our experience, there is no direct correlation between the length of a waterfall chart and the actual loading speed. There is a limit though: 100 requests seem to be the threshold. If your website produces more requests, you should take a closer look at it and try to reduce the number of HTTP requests, e.g. by getting rid of some external resources.<\/p>\n

    \u2013\u00a0If your waterfall view is longer than 100 requests, take a closer look at it and try to reduce the number of requests.<\/p>\n

    Rule #2 \u2013 Total load time<\/h3>\n

    The maximum value of your x-axis is crucial for your analysis. It will show you how long it takes until your website is completely rendered. The smaller the count at the end of your x-axis, the better.<\/p>\n

    If this value is larger than 10 seconds, using the fully loaded metric (the default in GT Metrix), you should definitely look into your website\u2019s loading speed.<\/p>\n

    \u2013\u2013 The overall loading speed count should be <10 sec.<\/p>\n

    Rule #3 \u2013\u00a0Green and blue: What the user feels<\/h3>\n

    As an internet user and website visitor, you do not care about a website\u2019s speed \u201con paper\u201d. All that matters is how fast you perceive a website to be. As a webmaster, you can anticipate this fact by using caching and a CDN.<\/p>\n

    The fact that users act on what they perceive\u2013\u2013not on what you measure\u2013\u2013is all the more important when you analyze a website\u2019s page load speed. Webpagetest is the only free test tool we know, that actually differentiates between a technological loading speed and a perceived loading speed. The whole waterfall chart, or the \u201cFully Loaded\u201d value, represents the less important technological loading speed. The blue and green lines in your waterfall view, however, represent what users perceive, when they visit your website.<\/p>\n

    \"\"<\/a><\/p>\n

    The time period where your users actually see rendering on your website is marked by the space in between the green and blue line.<\/p>\n

    These two lines need to be as far to the left and as close to each other as possible. The green line represents the \u201cStart Render\u201d event, which is the point in time when your website starts loading its first visual element. The blue line marks the point in time, when users perceive a website as fully loaded, meaning that they are very likely to interact with it.<\/p>\n

    As I said: Webpagetest is the only free test tool we know that differentiates between those two values. Other test tools, like the Pingdom Tools or GTMetrix, don\u2019t. Ergo, this rule only applies for Webpagetest\u2019s waterfall charts:<\/p>\n

    \u2013 The green bar should appear around 2-3 seconds from the baseline and the blue bar shouldn\u2019t be further away than 6 seconds from the baseline.<\/p>\n

    Rule #4 \u2013 Detecting HTTP\/2<\/h3>\n

    Those first three rules basically come to mind very naturally: Few requests, short periods of time, small distances etc. This fourth one too is very easy to detect. With it you can check whether or not your hoster uses HTTP\/2\u2013\u2013a standard that speeds up your website tremendously compared to HTTP\/1. Note that HTTP\/2 only works, if your website is loaded via HTTPS.<\/p>\n

    One of the most important improvements, compared to HTTP\/1.1 is parallel processing. Your website is able to request and load several resources from the server at once. And this process is clearly visible in your waterfall view.<\/p>\n

    \"\"<\/p>\n

    On the left, you can see the first requests of raidboxes.io loaded via HTTP. As you can see, the individual requests are loaded chronologically. On the right you see the same section loaded via HTTPS. In this case, the individual requests are loaded in parallel and rendered faster.<\/p>\n

    So, if consecutive requests load in parallel, your website benefits from the new, faster standard. If it doesn\u2019t, you should check in with your hosting provider. But remember: HTTP\/2 can only be used if your website is equipped with a valid SSL certificate.<\/p>\n

    If you\u2019re not sure, you can also use a tool like this to check for HTTP\/2<\/a><\/p>\n

    Note<\/strong>: If your website does not load in parallel, it doesn\u2019t use HTTP\/2<\/p>\n

    Rule #5 \u2013 Your images could be smaller<\/h3>\n

    Images probably are the single most important performance factor of your WordPress website<\/a>, after caching. Because for every image you upload, WordPress creates a whole bunch of images for your site, the so-called featured images, or thumbnails. Therefore, image compression is one of the most powerful methods to reduce your website\u2019s size.<\/p>\n

    Images are very easy to detect in your waterfall chart: They are represented by violet bars (in Webpagetest, in Pingdom they are represented by an icon, GTMetrix doesn\u2019t highlight images). And if those bars are suspiciously longer than your website\u2019s other requests (meaning that it takes them significantly longer to load), you should take a look at your images in detail.<\/p>\n

    \"\"<\/p>\n

    \"\"<\/p>\n

    Caption: These two websites are a great example of uncompressed vs. optimized website images. The images on the first website need up to 8.5 seconds to render. That\u2019s way too long. The second example has well-optimized images but as you can see still lacks use of HTTP\/2.<\/p>\n

    In our experience, about 30 percent of the websites we tested, have the potential to compress their images even further.<\/p>\n

    \u2013 If your image bars are significantly longer than other website elements, try and reduce your images\u2019 size or improve their compression.<\/p>\n

    Rule #6 \u2013 Identifying redirections<\/h3>\n

    A waterfall chart is a great tool for understanding your website. It shows you which elements are loaded, whether your website encounters problems or errors while loading and it also shows you how many redirections are set and where they point to.<\/p>\n

    \"\"<\/p>\n

    Caption: As you can see here, several HTTP requests of raidboxes.io are redirected to other URLs. Every 3xx-response is marked with a yellow row.<\/p>\n

    Every redirection is highlighted and includes the redirection type. More than once we were able to detect unnecessary or harmful redirections on customer websites with the help of a waterfall chart.<\/p>\n

    \u2013 \u00a0Yellow rows are redirections. If one doesn\u2019t make sense, look into it.<\/p>\n

    Rule #7 \u2013 Identify errors with one glance<\/h3>\n

    Sometimes, the components of your website are not rendered properly. For example an AdSense frame, a map, or a font. With a waterfall chart, you can easily identify these components: Every red row is an error of some kind.<\/p>\n

    \"\"<\/p>\n

    Caption: This website is producing several 4xx-errors. Again the test tool also shows you which kind of error it encountered.<\/p>\n

    The above website is producing several 404 errors. An analysis of the requests shows that they are all linked to a missing theme license. Once renewed, all the 404s disappeared.<\/p>\n

    \u2013 \u00a0Red rows indicate 4xx-errors.<\/p>\n

    <\/div>\n\t