Reading time 5 min

The internet seems like a relatively simple place to navigate, but if you knew everything that went into building and running the internet behind the scenes, you would realize the complexity of loading a simple web page. At its core, the internet is essentially a “network of networks”; users connect to these networks through an Internet Service Provider (ISP). ISPs connect to each other while also avoiding a connection hierarchy through Network Access Points (NAP). What we end up with is a giant network of interconnected networks that can move data rapidly across the world.

How Does Data Move?

Most data over the internet moves by packet switching, where data is broken up into small pieces called packets that are delivered to their final destination independently. Once there, they are reassembled into human digestible content such as text, images, or video on a webpage.  Packet switching is more efficient than the little-used and dated process of circuit switching, where temporary circuits form between networks to allow all of the data to pass through at once, often blocking up entire chunks of the network.Packet vs Circuit Switching

Servers and Clients

Some computers act as huge filing cabinets or storage drawers for holding data; these machines are referred to as servers. There are different servers for each type of internet function, such as: mail servers, web servers, file servers, etc. Any computer that gets information from a server is referred to as a client. For example, when accessing a website from your desktop, your computer connects to the internet through an ISP and requests information from a web server where the website content is stored. In this scenario, your desktop is the “client” and the web server is the “server.” Even when transferring data among peers, such as sending an email, there is a server/client relationship. For example, in the sending email example, the computer sending the email is acting as the server, while the computer accessing the email is the client.

IP Addresses, DNS, and TCP

IP addresses and TCP (transmission control protocol) are usually grouped together because they work together to establish the rules for how information travels across the internet. While the IP address is the home address of every machine, TCP acts as the delivery service between two systems guiding packets of data from one machine to the other and controlling the size, the rate of data exchange, and network traffic congestion between the client browser and a web server. More information about TCP can be found here.

Every website has a domain name, which is essentially a human-friendly version of an IP address. The DNS (domain name system) allows machines to look up domain names and associates them with the corresponding IP address that enables the TCP to know where to take the packets of data.

URL Format

A URL (uniform resource locator) gives the specific location of a resource or site on a computer network and specifies how to fetch the site. URLs contain two main parts: the protocol type and the domain name. Protocol type is the first thing displayed in the URL format. Ftp, mailto, and JDBC are three types of protocol, but HTTP protocol is the most common used, especially when referencing web pages. HTTP (hypertext transfer protocol) is the foundation of data communication for the World Wide Web and is the protocol to exchange hypertext. The domain name, which we have already discussed, would consist of what users commonly refer to as the web address For example, is the domain name for this website.

How a Web Page Loads

Once a domain name is typed into an address bar or clicked from Google, the browser takes the URL and finds the protocol, host, port, and path for that domain. From there it forms an HTTP request and finds the IP address using a DNS lookup. Upon connection to the host, the client sends an HTTP request to the host. The host forwards the request to the server software. The server inspects the request, and uses a server plugin, such as Java, to handle the HTTP request. The plugin has complete access to the request and it forms an HTTP response.

To form an HTTP response, a database search is made for the path of the request. That data, along with information from the plugin, are combined to form an HTML string of text. The HTML combined with meta data is sent back to the browser as an HTTP response. The browser analyzes the HTML once it receives the response. A good bit of the HTML is broken when the response is received, so a document object model (DOM) tree is formed with the broken HTML.Dom Layout Tree

From there, new requests are made and the same process is followed for the new resources that the browser finds in the HTML, such as images or JavaScript files. Stylesheets are analyzed and information from them is attached to matching nodes in the DOM tree. JavaScript is analyzed and executed, which may move DOM nodes and update style information. The browser puts together the page on the screen in accordance to the DOM tree and the style information carried in each node. Each request, whether it’s a JavaScript request or a request for any other piece of information, must be processed before the entire page is loaded.dom_types

Why Does This Matter?

There is a lot going on behind the scenes to load a web page and a lot of reasons a website can appear slow to a user. Front-end optimization is the process of making sure that everything loading on the client side (within a browser) is optimized to provide the fastest and most reliable experience for a web application’s end users.

There are several ways to optimize the structure and content of a web page to make it load faster or even appear to load faster to users. A helpful way to understand the bottlenecks for latency and causes of downtime is through analysis of a HAR file. A common visualization of a HAR file is a waterfall chart. These charts help users analyze the structure of a webpage and identify areas that need to be optimized to improve the overall performance of the site. There are plenty of free tools that can generate a waterfall in chart real time for any website, such as Free Performance Report. There is a lot that goes into building a web page and knowing how it all fits together can help you create a better experience for your users.

Suggested Blog Posts

The Perception Gap for Poor Web Performance

E-commerce revenue continues to grow,as consumers turn away from shopping in brick-and-mortar stores to shopping online.  However, many businesses are not prepared for this growth because they do not fully understand the market and how to invest in...

Read More

Using Browser Trends to Maintain a Better Site

Because of the multifarious nature of web clients today, it’s important to consider the usage statistics when designing, implementing, and managing your site. However, misconceptions often arise when determining what browsers to design...

Read More

Finding Causes of Intermittent Errors from Google Webmaster Tools

Google Webmaster Tools is a web service that allows webmasters to view the status of their sites as seen by Google and the Googlebot crawlers. In addition to indexing your site structure and content, the Googlebot crawlers also record data on perform...

Read More

Optimization Options not Always Optimal

Web designers and developers are always looking for ways to speed up their page load times. Yahoo has an excellent article written on the best practices for speeding up your page. How do you know if implementing one of their suggested practices will...

Read More