Understanding The Waterfall Diagram To Improve The Speed Of Your Website

To improve the performance of a page, we need to understand what each phase means. In order to know how a website's resources are loaded, we need to first know the colors and what they mean.

• Dark Green = DNS Lookup: Before the browser can connect to a server, it must first do a DNS lookup to convert the hostname into an IP address.
• Orange = Connecting: After the browser is able to connect to the server, it has to send a request by first creating a TCP connection.
• Purple = SSL/TSL Negotiation: When a page is loading its resources using a secure SSL/TLS, this color represents how long the browser spends to set up the connection.
• Green = Time To First Byte (TTFB): This is the time taken for a request to travel from the browser to the server, and for the server to process it.
• Blue = Downloading: This the time it takes for the browser to download the resource.

A Website Or Web Platform Essentially Consists Of Two Major Components:

1. Backend Which Is The Database And The Business Logic Centered On I/O, File Reads, Lookups, Information Storage And Update, Analytics, Processing, Service Calls, And Others.
2. Frontend Which Consists Of Technologies Around Rendering The Web Page. It Includes Network Time To Download Resources Such As CSS, Images, And JavaScript Files.

The Waterfall May Show Only A Simple Chart, But It Shows A Lot More Than It Seems.