You have a new visitor on your website – 7 things happening on the background

August 21, 2016 , , , , ,

So you have a new visitor on your website: he comes from some search engine or just wrote the Domain Name in the address bar and jumped in. Can you name 10 things happening on the background until the user sees your page?

We spend so much time optimizing code here, SEO there, but do we have a clear understanding of what’s happening on the background? How many things happening under the hood you can name?

 

1- User types the URL in the Browser address Bar

Or come from a Search Engine like Google – anyway, the user opens your website.

 

2- DNS lookup to find the Server IP

If you’re trying to open viewlike.us, you’ll be aiming to reach an address on a specific server where the website is hosted. However after the first time you visit the page, the IP might have been saved somewhere in the process and in this particular order:
1. Browser Cache
2. OS Cache
3. Router Cache
4. ISP Cache

Because you can clean your Browser and OS Cache’s, you can’t force the ISP to clean theirs, and that’s the reason you sometimes need to wait up to 24 hours before you can see a DNS change applied.

 

3- Browser initiates a TCP connection with the server

This is a basic connection between the client and server allowing data to be transferred.

 

4- Browser sends a HTTP request to the server

The Browser sends a GET request to the server over the HTTP (or HTTPS) protocol.

http_request

In the example above, we’re trying to do a GET to www.viewlike.us, there are a few components involved:

User Agent – The properties of the client, in this case, the browser (Mozilla)
Host – What hostname we’re trying to query
Cookie – Meta information stored at the client side containing previous browsing session information for the same website in the form of key-value pairs, like login information
Accept Encoding – specify the type of responses it will accept, in this case: gzip, deflate

 

5- Server handles the incoming request

At this point the server is trying to handle the HTTP request using an installed web server like Apache, NodeJs, nginx or IIS. Then the web server will pass the request to a web service handler, like PHP, ASP or Phyton.

 

6- Browser receives the HTTP response

http_response

The response starts with the Status Code from the server.

Content-Type – Informs browser about the type of content it has to show;
Content-length – Length in bytes of the response
Content-Encoding – Informs browser about the encoding it should use to decode the blob data made available in the response

 

7- Browsers displays the html content

Rendering HTML content happens in phases: First comes the html wire-frame and then it sends multiple GET requests to the server in order to obtain other elements like images, JavaScript and CSS files. This type of static files are normally cached to avoid unnecessary loading next time as they don’t change that often.

 

Note: The full example is true for non-cached resources. If it’s not the first time you’re visiting the same website, it’s likely that your browser makes you jump from number 1 to 7 directly.