Waterfall Analysis - Diving into Your Website's Requests
Analyzing website performance is something we do on a daily basis here at KeyCDN. One way we benchmark and troubleshoot slowness is by diving into the website's individual requests and doing what we like to call a waterfall analysis. There are numerous tools out there like Chrome DevTools, WebPageTest, and Pingdom which will generate a waterfall chart of your website. Understanding how they work can help you to better pinpoint performance issues as they provide valuable insights about how specific assets affect your page speed and the user experience.
There are dozens of tools out there you can use to generate a waterfall chart. Check out our post on 15 different website speed test tools. Below is a typical waterfall chart generated by Chrome DevTools on the keycdn.com website. You can see that the total load time was 966 ms, there were 28 HTTP requests, and a total of 435 KB of data transferred. What you really want to aim for is what we at KeyCDN call a nice looking waterfall. We will go more into what that means and how to achieve it later on in this post.
Sometimes all the colors, lines, and bar can be quite confusing at times. So below we will break down some of the most important pieces of a waterfall chart. There is a lot more to a waterfall chart than just your total load times. Also remember that depending on what tool you are using the names for these attributes below might vary slightly.
1. DNS lookup
Upon accessing a web page, the browser finds all resources which require a DNS lookup and must wait until the lookup completes before it can download anything. The DNS lookup is based on hostnames. So for example, if you include Google Analytics on your website, it will have to do a DNS lookup not only for
yourdomain.com but also to
Check out our post on how to reduce DNS lookups. This is why we always recommend hosting as many third party assets as possible on your CDN because this will mimize your requests to a single DNS lookup. Also, it is important to note that with many tools, if you run speed tests multiple times, it will cache the DNS, meaning you won't see this information on additional tests. But the lookup still occurs for new visitors that hit your site. WebPageTest has nice solution for this as they provide what they call the "First view" and "Repeat view". This way you can see a better overall picture.
You can also utilize resource hints such as DNS prefetching, which allows the browser to perform DNS lookups on a page in the background while the user is browsing. This minimizes latency as the DNS lookup has already taken place once the user clicks on a link. See example below:
<!-- Prefetch DNS for external assets --> <link rel="dns-prefetch" href="//fonts.googleapis.com"> <link rel="dns-prefetch" href="//www.google-analytics.com"> <link rel="dns-prefetch" href="//cdn.domain.com">
2. Initial connection / Connect
The initial connection, is also referred to as the TCP connection and or connect in some tools, is the total time required to create a TCP connection. This is used to create a connection between a local host/client and server. It is a three-step method (three-way handshake) that requires both the client and server to exchange packets before actual data communication begins.
Reducing TCP connection time can be more tricky. A good place to start is to ensure you are on a fast web host with low latency. Reducing your TCP connections can also help (the less connections the better). TCP Fast Open is another option which helps reduce the additional network latency time this handshake incurs by having the client send data during the initial SYN, thus allowing connections to take place during the handshake.
And don't forget about preconnect, which allows the browser to set up early connections before an HTTP request is actually sent to the server. The example below shows what it looks like to enable preconnect for the Zone Alias link for KeyCDN.
<link href='https://cdn.keycdn.com' rel='preconnect' crossorigin>
3. SSL / TLS
SSL, also referred to as SSL negotiation in some tools, is the total time for the web browser to perform the SSL/TLS handshake. Obviously you will only see this in your tests if your website and or CDN is running over HTTPS. Make sure to read our post on what is the difference between HTTP and HTTPS.
Below are a few a ways you can speed up sites running over HTTPS.
- HTTP Strict Transport Security (HSTS) is a security enhancement that restricts web browsers to access web servers solely over HTTPS. It helps your performance by eliminating unnecessary HTTP-to-HTTPS redirects.
- Early termination is very important in decreasing the latency due to the SSL/TLS handshake. By serving your content from a CDN, like KeyCDN, you are reducing the latency cost of each round-trip between the client and the server. A CDN allows you to terminate the connection closer to the user.
- OCSP stapling is an alternative approach to determining whether an SSL certificate is valid or not. It allows the web server to check the validity of it's certificates and eliminates the need for the client to contact the certificate authority, reducing another request. OCSP stapling is automatically enabled when you server content with KeyCDN over HTTPS.
- And of course we have HTTP/2, which is the second major version update to the HTTP protocol since HTTP/1.1. Performance features of HTTP/2 include multiplexing, HPACK compression, one connection per origin, server push, and the ALPN extension.
Are you running over HTTP/2 yet? Use our free HTTP/2 Test tool to check your web host and CDN provider. KeyCDN has supported HTTP/2 for all customers since October 2015.
4. TTFB / Waiting
TTFB, which stands for time to first byte, is the amount of time it takes from when a client makes an HTTP request to it receiving its first byte of data from the web server. In Pingdom this is also known as the wait time. TTFB is an important aspect of website optimization since the faster the TTFB, the faster the requested resource can start being delivered to the browser. On average anything with a TTFB under 100 ms is fantastic. Anything between **200-500 ms **is standard, between 500 ms - 1 s is less than ideal and anything greater than 1 s should likely be investigated further.
One of the easiest ways to improve your TTFB is to implement caching on your server. For example, if you are running on WordPress, KeyCDN's WordPress Cache Enabler plugin creates a cached static HTML file on your server. This allows users to avoid the backend resource intensive processes, thus being able to deliver the page with a faster TTFB. You can see example here where simply implementing Cache Enabler reduced the TTFB by over a whole second.
Using a CDN can also drastically improve your TTFB. See our examples below.
TTFB before a CDN
Here is an example on a test domain of our TTFB without a CDN.
TTFB with a CDN
Here is an example on the same domain with KeyCDN running. As you can see, the TTFB was cut in half simply be enabling our CDN. This will vary of course based on server locations and POPs.
Some other ways to speed up TTFB include making sure Nginx and Apache are updated to the latest versions, as well as verifying your origin server isn't reaching its capacity when it comes to CPU, IO, etc.
5. Content download
Content download is exactly what it sounds like, this is the time it takes to download all of your content. The larger your assets and file sizes are, the longer the time will be.
Image compression plays a big role when it comes to reducing your content download time. According to the HTTP Archive, as of June 2016, images on average make up 61% of a website's page weight. Check out our recent case study where we compared JPG to WebP. WebP resulted in a 85.87% decrease in average image size. So it is very important to compress all of your images and as well as using the srcset and sizes attributes for mobile devices.
And of course, implementing a CDN can be one of the easiest ways to decrease the content download time because you will be serving assets from POPs located within closer proximity to your visitors. This helps decrease TTFB as well.
6. DOM content loaded
You can read our more in-depth post on what is blocking the DOM and how to fix some of those render blocking resources. There is also the preload directive which offers more control over how particular resources are fetched for the current navigation. Here is an example of preloading fonts.
<link rel="preload" href="https://example.com/fonts/font.woff" as="font" crossorigin>
7. Load time / Fully loaded
The load time, also referred to as fully loaded in some tools, is the total time for your webpage to finish downloading, render, and be shown to the visitor. This is of course a very important metric and generally one that is probably used the most when benchmarking websites.
There are many things you can do to speed up your load. Besides following the tips we have already mentioned above, make sure to check out our speed up guides if you are using one of the following platforms:
- How to Speed up WordPress
- How to Speed up Magento
- How to Speed up Drupal
- How to Speed up Joomla
- How to Speed up XenForo
8. Data transferred / Bytes in / Page size
Data transferred, also known in WebPageTest as Bytes In, and in Pingdom as Page size, is the total size of all your assets on the web page. The smaller the better. Follow our recommendations above on decreasing content download time which will in turn decrease your total data transferred. As of 2016, the average web page size is a little over 2 MB, which is way too big. Web page size has increased by 1,530 KB or 317% from 2010 to 2016. We recommend aiming for at least 1 MB or less if you want to see decent performance. Although this might not always be possible in every environment.
9. HTTP requests
There are many ways you can reduce the number of requests such as:
- Reducing assets such as third party scripts and plugins that make a large number of external requests.
- Don't use third party frameworks unless they are absolutely needed.
- Use less code!
- Combining your CSS and JS files. (Remebmer, with HTTP/2 concatenation becomes less relevant.)
10. Status codes / Error / Server response codes
Status codes, also referred to as error codes and server response codes, are messages that contain completion status information, such as
HTTP/1.1 200 OK. The client sends a request message to an HTTP server (after the TCP handshake) which hosts a website, the server then replies with the response message.
If there is a problem with an HTTP request there is a list of status codes which inform your browser so that you can better troubleshoot what the problem might be. The way the user-agent handles the response depends upon the code and the response header fields. For example, a
404 Not Found error means the the content either does not exist or has been moved.
As you can see, tools like Chrome DevTools, WebPageTest, and Pingdom provide us with all sorts of valuable insights about how are pages are loading and what might be causing delays. Understanding what each piece of data means can help you better troubleshoot and diagnose performance issues on your site. The next time you do a waterfall analysis, hopefully some of the tips above can help you.