Issues

Integrating Cloudflare CDN with Umbraco Websites - Part 1: What Is a CDN and Setting Up Cloudflare

In today's fast-paced digital landscape, ensuring optimal website performance and reliability is paramount for online businesses seeking to deliver exceptional user experiences. Content Delivery Networks (CDNs) have emerged as indispensable tools in achieving these goals by providing efficient content delivery, enhanced scalability, and robust security features.

In this series of articles, I’m going to explain how to use Cloudflare CDN for your Umbraco websites so that you can create faster and more secure websites for your clients.

In Part 1, I'll give you details about CDNs and how they work. Then I'll walk you through how to set up Cloudflare CDN for your website.

In Part 2, I'll show you the key features of Cloudflare, and show you how to use Cloudflare CDN for full-page caching of your Umbraco website while using Cloudflare API to purge the CDN cache for the Umbraco pages that have been published, unpublished or deleted.

What is a Content Delivery Network (CDN)?

At its core, a CDN is a geographically distributed network of servers and data centres strategically positioned around the world. These edge servers work in tandem to cache and deliver web content, such as images, videos, CSS files, and JavaScript, to users based on their geographic location. 

A CDN hosts servers at the exchange points between various networks to enhance speed and connectivity. These exchange points, known as Internet exchange points (IXPs), are where different Internet providers interconnect to provide each other access to traffic originating on their networks. By having a connection to these high-speed and highly interconnected locations, a CDN provider can minimize costs and transit times in delivering high-speed data.

CDNs offer many optimizations on standard client/server data transfers, in addition to just placing servers in IXPs. CDNs strategically place Data Centers across the globe, enhance security, and are designed to withstand various types of failures and internet congestion.

When a user requests content, such as a webpage or a video, the CDN routes the request to the nearest server. By serving content from the edge server closest to the user, CDNs significantly reduce latency and minimise the time it takes to load web pages, resulting in faster and more responsive browsing experiences. 

The CDN caches copies of the content in multiple locations, ensuring faster access for subsequent requests. By distributing the load across its network, a CDN enhances reliability and scalability while reducing the burden on the origin server, thus optimizing content delivery globally.

What are the primary benefits of using a CDN?

Improving website load times

One of the primary advantages of CDNs is their ability to handle high volumes of traffic and sudden spikes in demand effectively. By distributing incoming requests across multiple servers and leveraging load-balancing algorithms, CDNs ensure that websites remain available and responsive even during periods of peak activity. 

This scalability feature is particularly crucial for e-commerce platforms, media streaming services, and other high-traffic websites that experience fluctuations in user demand.

By distributing content close to website visitors, a UK web user is served using a UK CDN server while a US web user is served using a US CDN server for the same website. 

Reducing bandwidth costs

CDNs offer bandwidth savings by optimizing content delivery and reducing server load. By caching frequently accessed content at edge servers and minimizing the need to retrieve data from the origin server, CDNs help lower bandwidth usage and infrastructure costs for website owners. 

When a website is accessed for the first time, and if the content is not already cached, the content is served from the origin server. After serving the content, the CDN caches it, and all subsequent requests are served from the cached content.

Increased content availability and redundancy

Due to the distributed nature of CDNs, they can handle more traffic and withstand hardware failure better than many origin servers. It is no surprise that most major websites like Facebook, Netflix, and Amazon use CDN. However, a CDN is not the same as a web host and it can not replace it and it can’t fix things like server errors.

Improved security

CDNs offer robust security features designed to protect websites and web applications against various cyber threats and attacks. 

From Distributed Denial of Service (DDoS) protection to Web Application Firewalls (WAFs) and SSL/TLS encryption, CDNs help mitigate the risk of data breaches, unauthorized access, and malicious activities, safeguarding sensitive information and preserving user trust.

A shocking relationship between page load times and conversion rates

In February 2012, the multinational retailer Walmart conducted an analysis to understand how website page performance affects e-commerce conversion rates. The study focused on Walmart’s e-commerce store. The website did $7.7 billion in sales, hit billions of page requests, and hosted millions of active product SKUs in 2012.

This study revealed a shocking relationship between page load times and conversion rates. As the graph below shows, there is a sharp decline in conversion rates as load times increase from 1 to 4 seconds.

A CDN's performance features can be the answer to significantly improve website load times, enhancing user satisfaction and potentially boosting conversion rates.

Cloudflare CDN

Cloudflare CDN is a global network of servers designed to optimize the performance, security, and reliability of websites and applications. It works by caching content in its servers distributed across various locations worldwide, reducing latency and improving load times for users. Cloudflare also offers security features such as DDoS protection, web application firewall (WAF), and SSL encryption, safeguarding websites from online threats and attacks. Additionally, Cloudflare provides analytics and insights into website traffic and performance, allowing administrators to monitor and optimise their online presence. 

Overall, Cloudflare CDN enhances the speed, security, and availability of websites and applications on the internet.

The Cloudflare network can reach about 95% of the world’s population within approximately 50 ms.

Data Center Locations are:

  • North America
  • Latin America & the Caribbean
  • Africa
  • Europe
  • Middle East
  • Asia
  • Mainland Chine
  • Oceania

Cloudflare Products

There are multiple Cloudflare products and depending on your requirements, you should choose the correct product for your needs. For apps and infrastructure, you should choose Application Security & Performance

After this selection, you can complete your Cloudflare setup for your website in 6 steps.

Cloudflare setup in 6 steps

In most cases, it's a no-brainer to place a well-performing CDN in front of your website, and you can follow these 6 steps to set up Cloudflare for better website security and performance.

Step 1 – Sign up / Log in

The first step is to go to Cloudflare’s website and Sign up or Log in as normal.

Step 2 – Add your website

The second step is to add your website or application to Cloudflare. 

Step 3 – Choose your Cloudflare plan

In this step, you need to choose a Cloudflare plan. For most client websites, you should choose the Business plan, but for testing and learning purposes, you can go for the Free option. 

You can always upgrade when you need.

Step 4 – Review your DNS records

This is the step that you connect your domain to Cloudflare and verify that the DNS records are configured correctly. If you don’t have a domain, then you have to purchase it in order to continue. There are various providers where you can purchase your domain.

After adding your domain, Cloudflare scans through your current domain and finds any of the DNS records that currently exist.

If you are already using your domain, you probably have a group of DNS records. If you have just purchased your domain, then you might have some DNS records.

The Cloudflare scan will pull anything that it finds.  If you like, you can add a new record or you can continue and do that later. 

Step 5 – Add Cloudflare’s nameservers

Step 5 is that Cloudflare asks you to enter some name servers onto your domain registrar. Wherever you purchase your domain, login there and add your Cloudflare’s nameservers.

This step will be different depending on the provider that you are using, and it generally takes up to an hour to take effect of these changes and then you should be able to continue your Cloudflare setup after that.

Step 6 – Configure Cloudflare’s settings

This is the final step to configure your domain settings to improve security and optimise performance. Once this final step is done, then it will take some time, generally up to an hour to see the results. 

Just follow the instructions below and complete your setup.

 

Final result

Congratulations on completing your Cloudflare setup. Cloudflare is now caching and protecting your website. You can check your Cloudflare setup and apply additional changes as required by your website.

Conclusion

Content Delivery Networks play a pivotal role in enhancing website performance, scalability, and security in today's digital landscape. 

By leveraging the power of distributed networks, CDNs empower businesses to deliver seamless and engaging user experiences while optimizing resource utilization and mitigating cyber risks. 

As online competition continues to intensify, investing in a robust CDN infrastructure is essential for staying ahead and meeting the evolving demands of users worldwide.

Nurhak Kaya

Hi, my name is Nurhak Kaya. I am a Technical Architect and a Lead Developer. I am a Umbraco Certified Master and Umbraco MVP. I am also a member of the Umbraco CMS Community Team.

I've been working with Umbraco since 2014. I have had a chance to work with various versions of Umbraco (v4, v6, v7, v8, v9 and v10). I love the product and the community very much, hence I try to contribute to this amazing project as much as possible in any way I can.

I constantly learn more about Umbraco by generally doing some coding challenges like #100DaysOfCode, or #30DaysOfCode, and share my knowledge with the rest of the community. I always keep an eye on the Umbraco questions on StackOverflow (https://stackoverflow.com/users/1587012/nurhak-kaya) or Umbraco Forum (https://our.umbraco.com/members/NurhakKaya/) so that I could help people and learn from them.

I have been writing blogs since 2012 (https://nurhak-kaya.blogspot.com/), I write for the 24 Days in Umbraco, too. 

comments powered by Disqus