Understanding networks is imperative to the ongoing success of integrators, so what exactly happens when you load a web page? Geoff Meads explains.

Network traffic is a big concern for smart home integrators.

The argument for changing from 1GB to 10GB networks is in-play with some commentators insisting it’s the only way forward while others make the case that content is becoming more compressed and no more bandwidth is needed.

Either way the additional cost of a 10GB needs to be considered carefully before making a recommendation to a client.

It’s actually pretty difficult to predict real numbers as the size of content delivered over the network is so variable. Control messages between keypads and control boxes are pretty small whereas streaming video is pretty big.

To try and get some understanding of the situation, let’s take a look at the request and download of a simple web page.

As an example, we’ll choose ABC Australia‘s website (https://www.abc.net.au) – all figures quoted are correct at time of writing (7 February 2020).

Let’s Get Started

First, let’s assume you type the Unique Resource Identifier (URL) of the website containing its domain directly into your web browser (we’ll bypass a Google search for now).

The network – both Local Area Network (LAN) and Wide Area Network (WAN or ‘the internet’) – doesn’t use URLs natively. Actually, the network works with IP addresses to locate websites so first we’ll need to look those up, using the URL.

For that we need something called the ‘Domain Name System’ (DNS). This is a global telephone directory that, when quizzed with a URL, returns an IP address. There are hundreds of thousands of DNS servers around the world. These include servers at your ISP and your mobile phone operator.

Because DNS requests are so common, various devices store frequently requested addresses in a local cache. So, if you’ve visited a site before, your browser may have that address in its cache. If not, maybe someone in your building has, in which case your router may have the information. If not, the request goes all the way to your ISP for an answer.

Now we have an IP address for the webserver we need, let’s send a request for the web page…

HTTP

Websites, along with web interfaces for IP cameras, network equipment, apps and all manner of other services, use the Hyper Text Transfer Protocol or ‘HTTP’ to request and receive data. In fact, many services now use a more secure version of HTTP called HTTPS (the ‘S’ standing for ‘Secure’), which is encrypted. Even the DNS request we made earlier uses HTTP.

So, we send a request to the URL in question for the data we need, in our case a web page, and, assuming it’s live, it responds in one of a few ways:

• ‘200’ – this is the good news as the destination server has the information you need and it proceeds to send it back.
• ‘404’ – the server can’t find what you’re looking for.

There are other response types, but we’ll leave those for today.

HTML

A web page will usually consist of many files and file types to build the rich content that we have come to expect. The initial HTTP response will consist of HTML code which the browser will use to form the basic content of the page. However, it will also include links to other files which will need to be requested separately (and DNS enquires made if the files are from other domains).

Let’s take a look at some of the other file types the browser will need to fetch.

CSS

CSS files (or ‘Cascading Style Sheets’) tell the browser what its basic content should look like.

There are often many of these files to be fetched, each controlling a different part of the page to style. The type of information includes things like colour, font, font size, element widths and heights, background colours, and how those elements might change it for you, for example, hover your cursor over a button.

In a modern website, CSS will also be responsible for telling the browser how to relay or re-order content on a smaller screen or one with a different orientation (a laptop screen vs. a mobile phone, for example).

Our example of ABC Australia uses four separate CSS files while others, like Amazon Australia, use many more.

Javascript

Javascript files define interactivity. If you visit a website with a scrolling header image or one where sections open and close, should you click on elements, then this is Javascript in action. Another big part of the job of Javascript is in validating form entries before you send your name, address and phone number to a website server for processing.

ABC.net.au uses 31 external files plus embedded Javascript within the HTML.

Images

It might come as a surprise, but image files are all loaded separately too. Images are typically much larger in file size than the HTML, CSS and Javascript files, so, sometimes arrive later giving the impression of a web page slowly ‘filling up’. If an image file is too large for one packet of information (150KB) then multiple IP packets will need to be sent from the webserver to your browser for each picture.

Our example of ABC.net.au includes eight initial image files with loading of more files deferred until the user scrolls down the page.

Fonts

While there are a number of ‘web-safe’ fonts that your browser already has loaded, any additional fonts will need to be loaded from an external server. Google Fonts is just one example of this type of service, supplying live web fonts in this way.

Again, looking at ABC.net.au, two external fonts are loaded. In this case, from the same domain but a different sub-domain, meaning a new DNS request.

I hope this insight into a simple web page illustrates that understanding network bandwidth needs is pretty complex stuff, with even a simple web page, making a large number of network requests for each page load.

Worth remembering if you find a website that’s not quite as quick as normal at loading. The poor browser and network have a lot to do!