Waterfall Analysis with Google Chrome Devtools tool

Website performance analysis is one of the basic tasks we do in site speed projects. One way to evaluate and detect the slowness of a website is to look at individual requests, which is called waterfall analysis. There are many tools for this, including Chrome DevTools, WebPage Tools, Pingdom and GTmetrix, which can be very useful in understanding how the site works and how to accurately identify problems, as this awareness chart They give you valuable information about how asset files affect page speed and user experience. In fact, cascading analysis is the same as analyzing site speed.

Of course, we have used cascade analysis in various online tools many times on the SEO teaching site. We have done a very comprehensive work on the Gtmetrix site cascade experience and analysis, and in this post we are going to analyze the cascade in Chrome DevTools.

 

Waterfall Analysis

A cascade chart, also known as a cascade graph or cascade chart, provides a visual representation of how elements are loaded on your website. These elements include CSS, JavaScript, HTML, images, plugins, fonts, and more. Another important point is that cascading charts allow you to see the order in which elements are rendered in the browser. Since these elements can include a variety of things, from CSS blocks to FOIT problems, the order of loading is very important, which we will mention later.

There are many online site speed testing tools that you can use to create cascading charts. Below is a typical cascade diagram created with Google Chrome’s own tool, Chrome DevTools. You can see that the total download time of the SEO teaching site is 2.97 seconds, there are 31 HTTP requests and a total of 966 KB of data has been transferred.

Sometimes all the colors, lines and columns together can be confusing. Here are some of the most important parts of a waterfall chart. In addition to the total load time, there are more items in the cascade chart. Also keep in mind that depending on the browser or tool you use, the following feature names may be different, some of which we have mentioned in previous posts.

1 – DNS Lookup / DNS

When accessing a webpage, the browser identifies all the resources that require DNS Lookup and must wait until the lookup is complete. DNS lookup is based on hostnames. For example, if you add Google Analytics to your website, it will do DNS lookup not only for your domain but also for google-analytics.com. (If you do not know about DNS Lookup, read this section)

Be sure to watch our post on how to reduce DNS lookup because in this section we fully discussed how to reduce DNS lookup.

Reducing DNS Lookup helps a lot to speed up the site, which is why it is always recommended to put more intermediate elements on the CDN as this will reduce DNS lookup requests. You should also note that on many tools, if you run speed tests multiple times, they will cache DNS, which means that you will not see this information in later tests. But the lookup is still done for new visitors who enter your site. WebPageTest, which in my opinion is the best tool for analyzing http requests as well as cascading site analysis, has a good solution called First View and Repeat View to solve this problem. This way you can see a better overall picture.

You can also use resource hints such as DNS prefetching, which allows the browser to perform DNS lookups on a page in the background while the user is using the browser. This reduces the latency of the DNS lookup when the user clicks on a link. See the following example:

<!– 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 communication, known as TCP communication and communication in some tools, is the total time required to establish a TCP communication. This is used to establish a connection between a user or local host and the server, and is a three-step method that requires the user and the server to exchange packets before exchanging information.

Reducing TCP time is a bit more difficult. The best place to start is to make sure your site is hosted on a fast web host with low latency. This handshake occurs by sending data by the user during SYN, thus allowing connections to be exchanged during handshake.

Also do not forget preconnect, which allows the browser to establish initial connections before actually sending an HTTP request to the server. The following example shows how to enable preconnect.

<link href=’https://cdn.seo-teaching.com’ rel=’preconnect’ crossorigin>

3 – SSL / TLS

SSL, also known as SSL negotiation in some tools, is the browser’s total time to run an SSL / TLS handshake. You will typically see this when your CDN or host is enabled on HTTPS.

Here are some ways to speed up sites running on HTTPS.

  1. HSTS stands for HTTP Strict Transport Security, a security booster that only allows browsers to access HTTPS only. This tool helps speed up your website by removing unnecessary HTTP and HTTPS redirects.
  2. Early termination is very important in reducing SSL / TLS handshake latency. By distributing content with the help of CDN, you reduce the delay of each round trip between the user and the server. A CDN allows you to communicate more closely with the user.
  3. OCSP stapling is an alternative approach to determining whether an SSL document is valid or not. This approach allows the web server to verify the validity of the certificates, eliminating the need for the user to request a certificate and reducing the other request. OCSP is automatically enabled when dealing with HTTPS.
  4. And of course we have HTTP / 2, which is the second major HTTP protocol update since HTTP1.1. Functional features of HTTP / 2 include improved web browsing speed as well as increased security.

4 – TTFB / Waiting

TTFB, which stands for time to first byte, is the amount of time it takes for a user to create an HTTP request and receive the first byte of data from the web server. In Pingdom this is known as wait time. TTFB is an important aspect of website optimization because the faster TTFB, the faster the requested source is sent to the browser. On average, anything with a TTFB of less than 100 milliseconds is fantastic. Anything with an average TTFB of 200 to 500 milliseconds is standard and between 500 milliseconds to 1 second less than ideal, and anything with a TTFB greater than 1 second should probably be considered. Be sure to read the additional and interesting points about TTFB in the article What is TTFB.

One simple way to improve TTFB is to implement server caching. For example, if you use WordPress, the WordPress Cache Enabler plugin can create a static HTML cache file on your server. This allows users to avoid the resource compression process, so the page is delivered faster with TTFB.
And of course, using a CDN can greatly improve your TTFB. In this article, we have fully explained the reasons for using CDN and the benefits of CDN.

TTFB before CD

Here is an example of a TTFB test without using a CDN.

TTFB with CDN

In the following, we repeated the previous example using CDN.

As you can see, the TTFB value was halved using the CDN. Of course, these will be different depending on the location of the server and POPs. Other ways to speed up TTFB include updating Nginx and Apache, as well as managing server resources such as CPU and IO, as well as installed scripts and plugins.

5 – Content Download

Downloading content is exactly what its name implies, it takes a long time to download the content you want. The larger the assets and file sizes, the longer it will take.

Image compression plays a big role when it comes to when to download content. According to the HTTP Archive, as of June 2017, images account for an average of 61% of the volume of websites. Our comprehensive articles on photo optimization can help you a lot

And of course, using a CDN can be one of the easiest ways to reduce the time it takes to download content, because that way you get content from POPs close to users. Using CDN also reduces TTFB.
Other ways to reduce download time include using javascript and css only when needed and Gzip compression. To compress files by server, refer to our comprehensive article on how to enable gzip.

6 – Uploaded DOM content

DOM stands for Document Object Model. When you use Chrome or Firefox inspector, it has a tab called elements. In fact, this tab is viewing the visual profile of the DOM, Chrome DevTools displays the HTML or javascript after manipulating the DOM page. You can also view it as parsed HTML.

When looking at the speed of web pages, you should always keep in mind the things that may block the DOM and cause a load delay. These are considered render blocking resources, such as HTML, CSS, and JavaScript. Most site speed testing tools display the total content of the DOM, while this time differs from the total load time.

7 – Load Time / Fully Loaded

Load Time, also known as Fully Loaded in some tools, is the total time to finish downloading, rendering and displaying to the user. This is a very important criterion to be considered because this time in Devtools is more real than online testing tools, because site speed testing tools do not have the location of Iran and you can use your browser a site speed testing tool Be in Iran.

There are several things you can do to increase your loading speed. In addition to the points mentioned above, we recommend that you read the articles related to gtmetrix training.

8 – Data Transferred / Bytes In / Page Size

Data Transferred In Devtools Chrome (data transferred), known in WebPageTest as Bytes In, and in Pingdom as Page Size, the total size of all assets (all files attached to the html document) on a web page. The smaller the value, the better. Follow our tips on how to reduce the loading time of the content above, and instead your Data Transfer will be reduced.

Until 2016, the average page size was a little over 2 MB, which is very large. Web page size increased by 317% from 2010 to 2016 and reached 1530 KB. We recommend that you consider at least 1 MB or less for your website page size. However, this is not possible in all environments.

9 – HTTP requests

Requests show the total number of HTTP requests generated on your website. Each attached file (CSS, JavaScript, Image) generates its own request. In general, the more HTTP requests your page has, the longer the upload time will naturally be.

There are many ways to reduce the number of requests, including:

  • Insert small JavaScript code inline
  • Reduce assets such as intermediate scripts and plugins that generate a lot of external requests.
  • Do not use intermediate frameworks that you do not need.
  • Decrease the code.
  • Combine css and javascript files.

But if you want to get more and more complete information about http requests and how to reduce these requests, be sure to read our article Make a fewer HTTP requests.

10 – Status Codes

Status Codes, also known as Error Codes and Server Response Codes, are messages that contain complete status information requested between the user and the server. The user sends the request to an HTTP server that hosts a website, then the server returns the response message in the form of a code.

If there is a problem with an HTTP request, there is a list of status codes that the browser uses to notify you so that you can find the source of the problem. The way the browser manages the response depends on the code and the header field. For example, a Not Found 404 error means that content no longer exists or has been deleted.

in the end

As you can see, tools like Chrome DevTools, WebPageTest, Pingdom, and GTmetrix provide a variety of valuable information about how pages load and the reasons for delays. Understanding the meaning of each piece of data can help troubleshoot site performance issues. Note that optimizing the site speed has a direct effect on increasing the site’s ranking in Google and other search engines, and apart from this, it also has a crucial effect on the user experience and visitor satisfaction.

We hope you find this article useful and that other times you do Waterfall Analysis, fortunately some of the tips above can help you.

Leave a Comment