How CDN Improves your UX? - ArvanCloud

ArvanCloud Blog

Read more about ArvanCloud news,
updates, products and services in ArvanCloud weblog.

How CDN Improves your UX?

30 Jul 2019
How CDN Improves your UX

Content Delivery Networks (CDNs) are vital solutions for the Internet businesses all around the world. When your website has thousands of daily visitors, the main infrastructure should be able to handle the traffic. High traffic means a large number of simultaneous requests from users that expect fast loading. Any latency can result in the loss of visitors, decreased revenue for your business, and damage the reputation of your business.

A smart method of maintaining a high traffic website reduces the load from a high number of visitors, and guarantees the highest performance for your website. While designing and updating your website, consider such important factors in order to create the best possible user experience.

In this article, we introduce different methods of optimizing the end user experience with CDN.

Contrary to popular opinion that using cache is the only factor that improves the end user experience in content delivery networks, a high-tech content delivery network uses a combination of various methods to achieve this goal. This article tries to explain the most important among these features.

 

How does CDN Improve Load Time and the User Experience?

All Internet users have actually experienced the benefits of a Content Delivery Network (CDN). Most large tech companies like Google, Apple and Microsoft use content delivery networks to reduce packet delivery latency when loading web content.

Content delivery networks often place servers on various internet exchange points or IXPs. IXPs are the main points that various internet service providers use to give each other links and be able to access the resources of various networks. In addition to internet exchange points, content delivery networks place servers in data centers all over the world in strategic traffic heavy locations to move traffic as fast as possible.

The main benefit of CDN is its ability to deliver content quickly and efficiently to end users.

CDN performance optimization can be divided into the following four general categories:

  • Reducing Data Reception Route
  • Reducing Data Transfers
    • Reducing HTTP Requests
    • Compressing Files
    • Optimizing Cache
    • Minification
    • Image Optimization
  • Optimizing Route
  • Optimizing DNS

Previously, an article called “What is CDN” provided explanations for “Reducing Data Reception Route”. This article will explain the other techniques.

 

Reducing Data Transfers

Content delivery networks use various methods to reduce the total data transferred between their own servers and clients to improve page load time. Reducing total transferred data will also reduce packet reception latency as well as used bandwidth. Pages are therefore opened faster and the bandwidth cost is decreased. Some key components of this reduction are explained in the upcoming sections.

  • Reducing HTTP Requests using HTTP2

The HTTP2 push server allows servers of some resources, including images, JS, CSS, or other files to be sent to the client before the request, which increases file accessing speed.

This technology is not a mechanism for sending notifications from the server to the client. Whenever the client sends a request to the server, the need is identified and the required files are sent before the request. In some cases, however, the client may not use the sent files, which could waste bandwidth.

For example, consider a website that has three files, index.html, styles.css, and script.js. When the user enters the website’s home page with the browser, the index.html page is automatically loaded for the user. When the browser analyzes this HTML file, it finds out that the script.js and styles.css files, which are mentioned by the index.html file, are also required for displaying this website.

At this moment, the browser requests those other two files so as to be able to display the website’s content. It therefore sends requests to display the website correctly and completely.

However, rules can be specified to the server using the HTTP2 push server so that it knows what files to send before it encounters certain requests. In the previous example, the server knows that anyone who sends the index.html request will also need styles.css and script.js, so the server will also send the other two files before the client’s request while responding to the index.html.

Due to removing requests, analyzing the index.html and displaying the website is therefore done faster by the browser.

  • File Compression

Your website’s individual pages are comprised of a collection of HTML, JavaScript, CSS, and other code files. The more complex the web page, the larger the code files, and the longer the loading time.

Compressing files is essential to reducing packet reception latency and using the required bandwidth for transferring the data over the internet. Gzip is one of the most common compression methods, and is also known for being the best method for transferring web pages. Many CDN providers activate Gzip by default, but how effective are the savings from Gzip compressions?  Compressed files are often 50 to 70 percent smaller than original ones.

Almost all content delivery networks have automatic compression and use Gzip to compress code files (like CSS and JavaScript) before presenting them to visitors.

  • Cache Optimization

Caching is at the heart of content delivery network (CDN) services. Similar to how the browser cache save files on the hard drive for faster access, content delivery networks also transfer your website’s content to powerful proxy servers that are optimized for fast content delivery.

The Caching function selectively saves website files on the content delivery network’s cache proxy servers, and allows visitors to quickly access the website from close locations.

HTTP cache headers also plays an important role in how websites receive content; and browsers use headers to specify which items are cached on the computer and for how long.

Caching is to save static files, which are often your largest files, outside your server (or on the local drives of visitors or the close CDN). This greatly improves your website’s loading speed.

The downside is that manual header management can be a tedious and inefficient task. In addition, caching mechanisms often encounter problems while managing dynamic content that are created at the time of execution (such as Ajax objects as well as HTML files that are created dynamically) or when the page starts to load.

Many content delivery networks provide user friendly dashboards for cache management. These dashboards provide you with the ability to set site-wide policies, manage caching rules for individual items, or even set policies for entire file groups according to criteria such as file type and location (for example, always cache images in the “/blog/” folder for 1 day).

  • Minification

Minification is a process through which code block sizes are reduced by removing parts that only make them easier to understand by humans. While engineers divide their ideas by name, space or logical variable comments to makes code blocks legible and maintainable, computers can execute such codes successfully without these characters.

Here, you can see the same code block before and after summarization.

Eight lines of code before summarization:

One line of code after summarization:

Now that the code snippet has been reduced from eight linesdown to one, the overall file size has also been reduced. This means that transferring the file takes less time and therefore, the packet reception latency is also reduced and content is loaded faster.

Content delivery networks are completely capable of summarizing codes automatically. Since this is an edge service that summarizes the codes of most website contents beforehand, the content delivery networks can execute all JavaScript and CSS files on time, and summarize them while sending them to users’ browsers.

Although summarizing and compressing code may appear unnecessary, combining these two methods provides the best results. So, summarizing file codes before compressing them leads to over 5 to 10 percent reductions in file size.

  • Image Optimization

Caching and compression are two of the most popular image optimization methods. Caching is considered to be more effective, since unlike code files, all image formats are precompressed.

To further reduce image file sizes, image data should be modified by cleaning some information headers or reducing the original image’s quality. This is referred to as lossy compression.

 

Note: While removing data or further reducing resolution is not recommended, lossy compression can be beneficial for some high resolution images, since our eyes cannot perceive the full range of visual information present in such images.

For example, lossy compression can remove color grading without a noticeable impact on image perception, and reduce pixel complexity.

Content delivery networks are among the most suitable image caching methods, and are purchased mostly for this purpose. Furthermore, some CDNs also help automate the image compression process and let you choose between page loading speed and image quality.

More advanced content delivery networks also provide an option for progressive rendering, which makes the original lossy image compression concept more advanced. With progressive rendering, the CDN loads the pixilated version of the image faster. Then, the CDN gradually replaces better and better versions of the image until it is ready for loading.

Progressive rendering is useful due to its ability to reduce perceived load time without sacrificing image quality.

Types of progressive rendering:

Route Optimization

Modern content delivery networks (CDNs) have multipurpose solutions that can help solve some of the most prominent challenges in information technology. Although these networks are evolving, they keep their main function, which is to improve connectivity and present a faster and safer experience to end users.

Caching and content delivery network front end optimization (FEO), as well as their advantages, were discussed previously. This section discusses methods to improve the performance of content delivery networks “using Anycast for localizing content delivery” and “providing permitted access to an Internet backbone”.

  • Using Anycast for Localizing Content Delivery

Anycast routing allows content delivery networks to be able to get the content closer to users. The best way to describe Anycast is to compare it with Unicast (its more basic alternative). The “Anycast Routing” article provides explanations in this regard.

Regional Anycast

Regional Anycast is considered an improvement over the original version. This model is suitable for global networks, such as global content delivery networks.

Regional Anycast helps divide the network to virtual clusters, each representing a specific geographic region. Regions with the same IP are only advertised to that region’s nodes, not the rest of the network.

Cluster topology makes it possible to control the routing options of local internet service providers. By restricting the number of options, local internet service providers should redirect traffic to closer nodes, even if they have been forced to perform another task as a result of suboptimal configuration or momentary decisions.

Today, most commercial content delivery networks rely on regional Anycast to speed up content delivery.

  • Tier 1

Internet service providers are categorized into three types based on connections and payment arrangements:

  • Tier 1 providers are a select group of operators that are considered representatives of internet backbone. Tier 1 providers manage their networks themselves and don’t pay for bandwidth. They also have contiguous (peer to peer) connections with other tier 1 providers.
  • Tier 2 and Tier 3 providers are smaller operators that purchase IP transits from tier 1 ISPs and sell to their users. Normal tier 2 providers are local operators that have a number of peer arrangements. Tier 3 includes providers that are even smaller than private networks (such as university networks).

Among these 3 groups, tier 1 providers provide the best network performance. They have more presence, better peering arrangements, and direct control over traffic flow.

Furthermore, many tier 1 networks have global coverage. They therefore facilitate effective end to end routing on both transnational and intercontinental traffic.

 

Commercial CDNs use their funds and bargaining power to purchase transit directly from tier 1 providers. Your website’s visitors will benefit from these arrangements as CDN peers. Users will have direct access to your website with the least hops and a very low risk of packet loss through the internet backbone.

Content delivery networks’ caching and FEO capabilities has been the center of much attention, but it is direct access to tier 1 networks that often has the best result in improving performance. This solution can revolutionize the loading speed and responsiveness of your website’s pages, especially if you are dealing with a global audience.

 

DNS Optimization

For the CDN to function, the default input gateway should be set for all input traffic. For this purpose, you should change the DNS settings of root domain (e.g., domain.com) and subdomains (e.g., www.domain.com or img.domain.com).

You should change your root domain’s A record to point to a CDN IP range. For each subdomain, changing the CNAME record (alias) to point to the subdomain address provided by the CDN (e.g., ns1.cdn.com) is sufficient. In both cases, the DNS will redirect all visitors to the CDN instead of the main server.

 

Some CDNs have a more complex DNS structure than others that can negatively impact the speed with which users access the website’s content. Even if you are able to reduce website loading time, when the DNS Response Time is high, the end user may see your website with high latency due to the DNS latency he/she experienced.

 

As a CDN provider, ArvanCloud provides you with a complete set of products and services so that you are able to provide your users with a suitable and high quality service without worrying about providing or maintaining infrastructure.

You can read more about ArvanCloud’s CDN here.

 

Notes

[1] Internet Exchange Point: Points where internet service providers and content delivery networks exchange internet traffic between their networks.

References

https://www.incapsula.com/cdn-guide/front-end-optimization-feo.html
https://www.incapsula.com/cdn-guide/route-optimization-anycast.html
https://www.incapsula.com/cdn-guide/what-is-cdn-how-it-works.html
https://www.cloudflare.com/learning/cdn/performance
https://www.globaldots.com/content-delivery-network-explained
https://support.rackspace.com/how-to/what-is-a-cdn

 

 

 

 

No comments

Labels:




دیدگاه شما