Cache

What is Cache and how do we work with it?

When you visit a website via your browser, a lot happens behind the scenes. We will talk a little about it and then dive a little deeper into how we work with cache and why it is important.

Website in the browser
For communication between computers (in this case your computer and a server somewhere) over the network, some form of identification is needed so that the computers can communicate with each other. An IP address. If you do not know what it is, you can compare IP address with a regular home address, it tells you where you live somewhere, it tells you where your network is located.

When you enter a domain name in the browser, let’s take webbpoolen.se as an example. Then the browser will first need to translate the domain name to an IP address before it can establish a connection to the server where the website is located. This is done with the help of DNS, which is responsible for the translation of domain names into IP addresses. So your computer first needs to send a request to a DNS server to translate the domain name into an IP address. In order for your browser not to have to make the same request for the same domain name several times over a short period of time, the translation is cached from the domain name to the IP address at several different levels along the way. It is cached in your computer, among other things. The next time you want to access the website, it will retrieve the IP address locally from your computer.

When the IP address is available, the browser begins to establish a connection to the server where the website is located. Let’s say that the website is on a server in Germany and you try to access it from a computer in Sweden, well then data will need to flow between the server in Germany and your network in Sweden. It may sound like it should be unsustainable to have a website on a server in Germany with mainly Swedish visitors, but the fact is that the time it takes to send data that distance does not have to take that long after all. On the way to the server in Germany from your network in Sweden, the data will pass through a variety of networks, in addition, the medium the data will travel through will be different between nodes along the way. When data travels through the air (radio waves), we reach a speed of 300,000 km / s (yes, the speed of light).

Now we imagine that the request from your browser has arrived at the server down in Germany. Now the server will start preparing a response which it will then send back to you in the form of one or more files. For websites, the server first sends an HTML file. Then your browser requests the remaining resources in the form of style sheets (CSS), javascript and images. Normally, there can be up to 80 requests for files and images between server and client (browser).

Let’s say that the website you are visiting consists of 20 images with a total size of 20MB (20 million Bytes, or 160 million bits), then you understand that it is a lot to send over the network. Without any kind of cache, the server would have had to send the same resources over and over again every time you refresh the page in the browser. Most browsers automatically cache / save images and other resources to reduce network load. Let’s say it took 10 seconds for the data transaction (6 seconds just to download the images). The time it takes depends, among other things, on the download speed of your network, and what upload speed the server itself can assist with (it is important to choose a web host with care).

We have now significantly reduced the network load by saving resources in the local browser. We can go a few steps deeper to increase the speed. Now that the server does not have to send the same files over and over again, it still needs to process your request again when updating the page in the browser.

Let’s say then that the website is created in WordPress and you use a variety of plugins and a slow theme so that it takes the server 2 seconds (2 seconds is LONG time for a computer) to just chew through the code before data is sent out to your browser again. Here we can implement cache on several different levels down at the server level to speed up the process.

The action that provides the fastest response times is to simply not let the server chew through the same code over and over again just because you are updating the browser window. Instead, we generate a static HTML file that is sent out. As long as no change is made to the content, the static file will remain as it is. If the server does not have a lot of other things to do, that is to say that it is correctly load balanced, now the time it takes for the server to process your request and start sending out an HTML file can come down in as little as 10ms (10 thousandths of a second) ).

Now we have come so far that the server sends a static file even though the website itself is built in a powerful CMS, but we are still doing unnecessary steps. If the HTML file has not changed anything between the page calls, do we not need to resend it every time? No, we are instructing the browser here to cache / save the HTML file locally. The next time you update the browser, the server still needs to process your call, but this time it responds to the browser instructing that no change has been made so that the browser can load the HTML file already saved. This response can also be saved on a network closer to you so that the connection does not have to go all the way between Sweden and Germany every time.

It is possible to dive deeper than this, but now we hope that you have a basic understanding of why cache is important. Choose us as a supplier if you want a supplier who has a deep understanding!