What happens when you type “google.com”?

As a web developer, you should have a thorough understanding of how the web works to create seamless web applications. So, let’s understand what happens when we search any URL in the browser.

Let’s open the network tab and observe -

When we searched for google.com we got a 200 status code from the server indicating that the request was successful -

And we got an HTML document in response -

Now, the HTML we received needs other dependencies (CSS,js, images) to render the web page and for that, the browser makes other network calls to get those dependencies.

Let’s dig deeper now, and understand what happens behind the scenes before we get the HTML document.

So, let’s assume a scenario that you are at your home and you want to order a pizza and you have your friend who would pick up the order for you.

Now, when you ask them to get you the pizza, they would ask where to bring it. Since there are multiple pizza stores in your area, you would’ve to tell them the store address with the area pincode where you have placed the order. Now, they can go to that location and bring the pizza to your home.

Similarly, in our case, we have the client (us), the server (pizza store) and the internet (our friend). Now, when the client requests google.com, the internet needs some address from where to get it. Here comes the concept of IP addresses which you might have heard of.

Every device which is connected to the internet has a unique IP address, with the help of which it can communicate with other devices on the internet.

Now, the question is that when we type google.com, how come the internet gets the IP address of the server from where it has to get the response?

Here comes the DNS (Domain Name System), a database where domain names (for ex- google.com) are located and translated into IP addresses.

When the client requests for google.com our request travels from cell towers to DNS at the end and gets back the IP address in response from the DNS. Now, the client again sends the request with the server IP address from where it has to get the html document to display our web page.

Now, you know what is an IP address and DNS. Let’s dig a bit deeper now and understand how DNS works internally and how all these devices are connected, shall we?

Let’s carefully observe google.com, here you see there are two parts in the url, google and Com. What does it mean?

The DNS has a hierarchy in which it resolves an URL. In the below picture, we can see that there are some top-level domains (like com) that the DNS filters out and then it moves to second-level and third-level domains. Finally, the DNS provides us with the server IP address after going through all the combinations of these different levels.

So, if any one of these levels is different then we will have a different IP address (for ex- download.microsoft.com and sales.microsoft.com will have different IP addresses).

Now, let’s understand how these devices are connected.

So, our device is connected to the router and the router in turn is connected to our ISP (internet service provider). The ISP gets the IP address from the DNS and now, the ISP needs some medium to connect itself to the server which may be located thousands of miles apart and needs to get it within seconds. For that, we use fibre optical cables in which data travels approximately at the speed of light. Now, how do we connect the cables throughout the world?

For this we have fibre optical cables laid out underwater since 71% of Earth’s surface is covered by water and through which we can connect different geographical locations.

You can check the live fibre cables map from here submarinecablemap.com.

Now, there are multiple ISPs present (local, regional, global) which govern how and from where the data travels according to protocols and policies applied by different countries, and states.

As you can see, if you request something from a server which is thousands of miles apart then there might be some delay since it has to go through so many stages in between thereby impacting the user experience. To solve this problem, nowadays, many companies have started tying up with ISPs to store their data so that they can deliver a seamless user experience.

Now, once the client gets the server IP, how does the connection is established between the client and the server?

So, as we can see in the image above, after DNS lookup, there is a TCP handshake to establish a TCP connection between the client and the server for data transfer. Further, to establish a secure connection a SSL handshake is done between the client and the server. Now, a secure connection is established to transfer data between the client and the server and they can now communicate with each other using HTTP. Now, as we know that the whole data is never sent at once, it is broken down into multiple tiny units known as packets and those packets are sent using the TCP protocol.

Here, if we notice carefully the first response size from the server is just 14KB. This is an important thing to note because if we can ensure that the critical data (the least amount needed to show the web page), is somehow under 14 KB then we can load the web page with just the first packet we receive from the server. The subsequent requests get more and more data in response.

Now what happens after we have received the HTML document?

Let's explore that in the next blog, stay tuned ...