Praise Adanlawo Praise is an Infrastructure and cloud engineer with good hands on knowledge building CI/CD pipelines, automation, infrastructure as code (terraform), source code management and source code containerization

Using CDNs to optimize website performance

5 min read 1497

Using CDNs Optimize Website Performance

Recently, we have seen website deployment take a new shape, moving from traditional hosting methods to cloud servers. However you choose to host a site, there is a constant need for optimization. One way to achieve this is through content delivery networks (CDNs).

What are CDNs?

CDNs are a geographically distributed group of servers, configured to work together efficiently to provide fast delivery of internet content. According to Builtwith, it is estimated that CDN’s serve 69 percent of websites viewed on mobile devices today.

There are three types of CDNs: private, public, and hybrid.

  • Public CDN: public CDNs involve using a CDN provider’s server infrastructure to fulfill your content delivery needs. We’ll talk more about CDN providers as we progress through this article
  • Private CDN: a private CDN requires developing and hosting your website on your own servers. Benefits range from control over your CDN locations to increased security and privacy. Challenges include having the required technical skills and acquiring sufficient IT infrastructure
  • Hybrid CDN: hybrid CDNs are a blend of hosting some of your site on a private CDN, as well as leveraging public CDN providers

If you are familiar with website deployment, you might think to yourself, “how is this different from a typical web host?” Let’s take a look.

CDNs vs. traditional web hosting

Traditional web hosting services allocate space on a provided server for your website to store files, code, images, etc., thereby allowing your website to be available publicly via the internet. That’s all there is to web hosting!

In most cases, there is no offer for security, faster performance, or high availability, which some CDNs provide by default. This usually leaves websites prone to malicious attacks (specifically DDoS) and without any optimization.

CDNs, on the other hand, provide caching. They do not host web content and cannot replace the need for the traditional web hosting services. However, they cache a copy of the website content on the network edge thereby making it more accessible, and in turn improving website performance. You can read more about caches here.

Further down this tutorial, we will go into more detail of what CDNs are and how their benefits can be maximized.

How do CDNs work?

Enough of the buzz, how do I get my website connected with a CDN?

CDNs use something called a point of presence (POP). POPs are servers with multiple geographical locations where cached versions of your website content is stored.

We made a custom demo for .
No really. Click here to check it out.

For a CDN to work, it needs to be the default inbound gateway for all incoming traffic. This requires modifications to the DNS configuration of the website.

Today’s CDN vendors offer step-by-step instructions to get you through the activation and configuration phase. They also provide assistance via their support team. The entire process comes down to a few copy and pastes, and voila: we have a website configured with CDNs.

What problems do CDNs solve?

Latency. That’s the million-dollar answer.

Latency is the annoying delay that occurs between the moment you request to load a webpage and the moment its content appears on screen. This can be caused by a number of factors ranging from poor internet connection to how the webpage was developed.

However, one major cause is the delay in fetching the requested content from the hosting servers, which could be a long way from where you, the user, are located.

So how does the CDN reduce latency? The primary goal of a CDN is to shorten the distance between the user and the web hosting server, improving content rendering, speed, and performance. Note that while the CDN is pulling content from the web hosting server, it stores (caches) a copy of this content, making it faster for the next user within the same location.

Benefits of using CDNs

Aside from optimization and improving load time by caching content, CDNs have tons of other benefits.

Increased availability

Availability is a measure of how long your website and its content stays accessible over a given period of time. In a website where a CDN is not used and traffic is being served directly from the web server, as more traffic hits the site, servers must be scaled up in order to handle these demands as they come. In the event that the traffic overwhelms the capacity of the servers, the site goes down.

When CDNs are used (and the website content is being cached on the CDN edge servers), as traffic increases, the content is being served from the CDN, hence little to no traffic gets to the server directly. Also, if by any chance the web servers are down, users would still be able to access content that is cached on the CDN

Improved website load time

A highlight of CDNs is that they bring your website content physically closer to your users. It allows faster loading times, thus reducing bounce rates.

Improved website security

Because CDNs are the first point of contact for all incoming traffic, they are also the first point of contact for malicious attacks and therefore the first line of defense against them.

CDNs provide standard security features by default that can prevent malicious attacks to a certain degree, with optional advanced security add-ons like DDoS protection and firewalls.

How is the CDN cache updated?

One major factor that helps CDNs optimize speed is their ability to cache content for long periods of time. For this reason, it is important to know how to regulate the content in the CDN edge networks so that your website visitors are always getting the most up-to-date version of your site. How then do we ensure that the content of the CDN is a mirror of what we have in our server?

Let’s look at an example. In an ecommerce store, the website utilizes a CDN and has cached a couple of clothing items and shoes that users typically search for. Soon, this ecommerce store will be running a discount sale for only 24 hours. But the retention period set on the cache is 72 hours.

If the cache is not forced to refresh, many users would miss out on the sale because they are served from the CDN that now holds the outdated data. How do we update the content?

Different CDN providers have different settings and configurations to help with this, but typically we can use the following:

  • Cache control headers: these are headers passed within the configuration to control the behavior of the CDN
    Cache-Control: max-age=3600;
  • The expires header: here we set a specific date and time when the content of the cache is no longer valid
    Expires: Mon, 25 May 2021 21:31:12 WAT
  • Purge the cache: some providers have an option where you can call their APIs such that if there is a change between what is on the web server and on the CDN, the cache should be purged

CDN providers

To properly configure and integrate your website with a CDN, you need a provider. Here is a list of some providers that can make setting up a CDN relatively simple without breaking the bank.

  • Cloudflare combines novice-friendly ease of use with expert-level features and functionality. With this setup, you just need to update the name servers to point to Cloudflare
  • Fastly is a highly configurable CDN in the sense that it can be tweaked to fit most, if not all, of your site’s specific needs. However, setup can be tricky
  • KeyCDN offers very low prices, and with free SSL, this is a great provider for experimenting with CDNs
  • Akamai has impressive performance and wide coverage, however it isn’t so beginner-friendly

Please note this list is not exhaustive, nor based on any particular sentiment or interest.

Should your website use a CDN?

With what we’ve learned so far, it can be tempting to say yes! But that isn’t always the case.

If yours is a small business that operates solely within a particular region and your user base is local, a CDN might be overkill.

For example, you’re a knitter based out of Singapore and you make cardigans for sale with local shipping only. You set up a website so your clients can see new designs and place their orders. In this case, your business operates from a localized website and your user base is also concentrated around where your website is hosted.

Implementing CDNs in this scenario would be unnecessary because a local server will already provide efficient service to your clients.

Conclusion

CDNs are amazing and can be a useful part of your web development toolbox. CDNs help with scalability, which leads to user retention and return. A survey carried out by KeyCDN on website latency shows that websites with CDNs have an 83 percent decrease in latency. Ultimately, this means more first-time or returning customers are retained, and your business makes more money.

I hope this tutorial has clarified in detail what you need to know about CDNs and whether or not they are a good choice for your websites.

: Full visibility into your web apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

.
Praise Adanlawo Praise is an Infrastructure and cloud engineer with good hands on knowledge building CI/CD pipelines, automation, infrastructure as code (terraform), source code management and source code containerization

Leave a Reply