A robust and efficient content delivery network (CDN) can help you in many ways to improve the performance of your website. Problems such as slow loading and delayed requests can mar the user experience of your website. This article explains how CDN can improve the performance and user experience of your website.
However, some analysis of the current performance of your website is in order before moving on to a more efficient CDN. A look at a waterfall graph of your website will help you get a basic idea of how your website has been performing. You can view the waterfall graph for your website by going to your browser’s developer tools. However, it is necessary to clear the cache memory before executing the waterfall graph.
So what does the waterfall graph show and how can you interpret it? Basically, the purpose of a waterfall graph is to show every file that the system downloads to display a web page. Loading a single web page on the system of a visitor involves the loading of several files. Each file is represented by a separate line on the graph. Because each of the files is of a different type, different colors are used to indicate the type of file, e.g. blue for HTML files, green for CSS files, and so on. The time required to download a single file includes a relatively lengthy latency period and a relatively shorter transfer time.
A waterfall graph indicates poor performance caused by a number of problems. One of these problems is that each file is downloaded one after the other instead of being downloaded simultaneously. Obviously, this results in a lot of time being wasted and poor service being experienced by the visitor.
This happens for two reasons. Firstly, every browser follows a procedure that helps it to avoid overloading the server with simultaneous requests. At the most, 4 or 5 requests can be processed simultaneously to prevent the system from becoming overwhelmed. Another reason is that the pages are not downloaded by type; hence, the browser might receive the CSS or JS files before the HTML files that tell it how to use or display them on the client’s system.
Another problem that leads to poor performance is simply the presence of a large number of files to be loaded. Generally, the more complex the design of a website the greater the number of files required to load it. Concatenation is a suitable response to this problem, but it can be very complex for amateur website owners or those with limited technical skills. Concatenation works well with JS and CSS files. One of the drawbacks of concatenation is that it increases the burden of maintenance on the website administrator. Hence, the owner or administrator is in a difficult situation because simplifying the design of the website reduces the attractiveness and functionality of the website.
The third problem relates to the latency issue. Each file has a long latency period before the actual transfer from server to client takes place. Several issues are involved in this problem. Conducting a DNS lookup to identify the IP address of the destination computer takes time. Moreover, if the browser is dealing with a large number of requests, it will address those one by one, which creates further delay. Time is also spent as the request travels across the Internet depending on the distance between the two servers. Additional time is then spent in processing the request before it can be executed. Depending on the complexity of the script, processing each request takes a different amount of time. Files written in simpler scripts require negligible processing time and can be processed relatively fast. Finally, time is spent in transferring the data bytes along the network to the destination.
A CDN helps people by overcoming the need to use a single server to transfer all the required files to load a website. A network of servers is used instead. Each of these servers is called an edge node. When a person visits your website, the request is sent to an edge node that is nearest to their computer. As a result of this simple action, the latency time is reduced drastically and the files are loaded in a fraction of the normal time. Remember the maximum number of requests that a browser can process? Well, with CDN that limit extends to each edge node in the network. So each server has a different limit of requests that can be processed, meaning that more requests can be executed by the CDN. The CDN also uses bandwidth more efficiently and saves even more time.
Using a CDN is very simple. It is already part of the infrastructure provided by Google Analytics that uses an external domain. Also, when you use webfronts from a domain hosted externally, you are making use of a CDN to load CSS files. To load custom files including CSS, JS and other images, you need to have your own CDN. MaxCDN is a tool that can help you set up your very own CDN very conveniently.
- Define a pull zone to map requests to your domain name.
- By using AnyCast network methodology, a user’s request for a specific page or site is routed to the nearest edge node of the CDN.
- The edge note acquires the file from its cache or from the source directly if the file is being requested for the first time.
- All PHP, HTML, CSS and JS files can be referenced in the same way.
MaxCDN is extremely easy to set up and operate and takes almost no time at all. For a static website, an additional step is required where you modify the URLs for image, CSS and JS files. With a normal CMS the system takes care of the installation and setting up process. All you need to do is enter the URL of the pull zone. The procedure might be minutely different for different types of browsers. However, MaxCDN offers several tutorials to explain the procedure.
Leave a Reply