Content delivery network

How to host and optimize your static website using CDN

Google Cloud / By

A Content Delivery Network (CDN) can help you to make your website load quickly anywhere around the globe. CDNs have the local infrastructure worldwide, and thus visitors can fetch data efficiently from a nearby data center instead of fetching from other continents.

As a Google Cloud Professional Cloud Architect, you can rely upon Content Delivery Network to enhance the performance, scalability, and reliability of applications and services hosted on the Google Cloud Platform (GCP).

In this blog article, we’ll provide an overview of Content Delivery Networks, how they work, and how to optimize static websites using CDNs in Google Cloud through our hands-on labs.

Also, we cover the core benefits of using Cloud CDN for your web applications.

Let’s see it in more detail!

What is a CDN?

A content delivery network (CDN) refers to a group of multiple servers operating outside the origin server and are composed of multiple data centers available worldwide called points of presence (PoPs).

CDN servers retain the cached website files, including HTML pages, images, and videos, and then deliver them to the end users. The CDN enables the fast delivery of web content by reducing the distance between visitors and origin servers.

How does a Content Delivery Network Work?

When a user makes an initial request for static website assets, a CDN server is responsible for transferring the files from the origin server.

Simultaneously, it caches a copy of these assets in the server nearest (known as the edge server) to the user. This cached data is then utilized for subsequent requests, enabling the CDN to deliver site content to visitors more rapidly and alleviate the workload on the web server.

For instance, if a visitor is located in India and the origin server is in the United States, the content delivery may experience delays due to the physical distance between them.

To mitigate this, employing a CDN with servers strategically positioned in locations like Singapore, Australia, and the United States ensures swift delivery of web files to the Indian visitor. 

In this scenario, the CDN distributes the content from the server in Singapore, minimizing the delivery time by selecting the nearest server available.

How does CDN improve page speed in a static website?

Content Delivery Networks (CDNs) contribute to page performance in the following ways:

  • Reducing network round-trip latency
  • Serving cached content and minimizing the load on your server
  • Optimizing the content

Reducing Network Round-Trip Latency: CDNs minimize network round-trip latency by leveraging a global infrastructure. The distance data has to travel affects the time it takes to reach users. 

CDNs, through strategically placed edge servers around the world, significantly reduce round-trip times, often bringing them down to just a few milliseconds. This improvement is crucial, especially considering that network round trips over long distances can take hundreds of milliseconds.

Serving Cached Content and Reducing Server Load: CDNs enhance performance by serving cached content and lessening the load on the origin server. When an edge node receives content with caching enabled, it stores that content for future use. 

Subsequent requests for the same resource can then be fulfilled directly from the edge node, bypassing the origin server. This caching mechanism not only accelerates content delivery but also reduces the overall load on the origin server, leading to quicker responses.

Additionally, CDNs often offer protection against Denial of Service (DoS) attacks. They are equipped to handle a large number of requests efficiently, preventing overwhelming the server during such attacks.

Automatically Optimizing Content: CDNs frequently provide options to automatically optimize content fetched from the origin server before delivering it to end users. 

For instance, if the origin server provides a large PNG image file but the user’s browser supports the more modern WebP format, the CDN can automatically convert the image to WebP. This optimization not only saves bandwidth but also enables faster loading of the image for the visitor.

Some CDNs go beyond basic optimizations and offer advanced features, such as automatically loading low-priority JavaScript code asynchronously. These optimizations contribute to a more efficient and faster user experience.

Steps to host and optimize your static website using CDN

During this laboratory session, you will acquire the skills to host a static website on a Cloud Storage Bucket and optimize its performance using a Content Delivery Network (CDN).

To utilize the CDN, access the Whizlabs hands-on labs page. 

Note that a premium subscription is required for lab access. 

On the lab’s page, use the search bar to find and select the lab titled “Hosting a Static Website using CDN” 

This lab is designed to be interactive and provides step-by-step instructions within the lab details, guiding you through the process of hosting and optimizing the static website.

To host the website in Google Cloud, you must sign in to the Google Cloud Platform (GCP) console by following the below instructions:

  • Visit the Google Sign-In page.
  • Paste your Email ID and click Next.
  • Enter your Password and click Next.
  • Accept Google Cloud Terms of Service by checking the agreement and clicking Agree and Continue.

Select Project

  • From the top bar, click the dropdown to select the project.
  • Choose the listed project and click on it.

Note: If you’ve completed a lab, sign out before starting a new one. Refer to FAQs and Troubleshooting for Labs if needed.

Create a Bucket in Cloud Storage

To create a bucket in the cloud storage, follow these steps:

  • Click the hamburger icon in the top left corner.
  • In the left sidebar, click on Cloud Storage and press Create option.
  • No, you have to enter the bucket name (e.g., whizlabs-website) and click Continue.
  • Choose location type as Region, location as us-central1, and click Continue.
  • Choose storage class as Standard and click Continue.
  • Uncheck bucket public access prevention, set access control to Uniform, and click Continue.
  • Keep other options as is and click Create.

Uploading HTML File

  • Open the file from the created bucket.
  • Download the HTML file.
  • Navigate to the bucket, click Upload files, and upload the downloaded HTML file.
  • Upon completion, you’ll get a notification of the upload.

Setting Bucket Permissions

  • Click on the Permissions tab.
  • Click Grant Access to change access to the public.
  • Add new principals as all users, choose the role of Storage Object Viewer, and click Save.
  • If prompted, click Allow Public Access.

Create an External IP Address

  • In the left sidebar, click on IP addresses.
  • Click Reserve External Static Address and enter a name (e.g., whizlabs-ip).
  • Choose the tier as Premium and type as Global and Click Reserve to reserve your Static External IP address.

Create HTTP(s) Load Balancer with CDN

  • Click the hamburger icon in the top left corner.
  • Scroll down and click on More Products.
  • Now, navigate to Network Services under the Networking tab and click Create load balancer.
  • Choose HTTP(s) Load Balancing and click Start Configuration.
  • Select Internet-facing and click Continue

For Advanced Traffic Management, choose Global HTTP(S) Load Balancer. Enter the load balancer name (e.g., whizlabs-lb).

  • Click Frontend Configuration, enter the frontend name (e.g., whizlabs-frontend), keep the protocol as HTTP, select the IP Address as previously created, and click Done.
  • Click Backend Configuration, create a backend bucket (e.g., whizlabs-backend) linked to the uploaded website bucket, ensure Cloud CDN is enabled, and click Create.
  • Leave Routing rules as is and click Create.

Access Your Website

  • Once the load balancer is created, click on it.
  • Copy the IP from the frontend section.
  • Open a new browser window and paste the link as http://[Load_balancer_IP]/website_name_with_extension.
  • Example: http://34.160.227.76/calculator.html
  • You can see the website you uploaded in the bucket.

Through this hands-on lab, you have created a Cloud Storage Bucket and uploaded an HTML website into it. Subsequently, you attached the bucket to the Network Load Balancer with Cloud CDN enabled. Finally, you accessed the static website on the internet using the IP address of the Load Balancer.

Benefits of Using a CDN

The main intent of using the CDN is to increase the website’s performance. Instead, it also offers the following benefits:

Benefits of Content Delivery network

Origin Offload

CDNs efficiently offload static assets like images, videos, CSS, and JavaScript files from origin servers. This drastically reduces bandwidth usage on servers and optimizes content delivery by routing client requests to edge CDN servers. 

Consequently, this decreases the load on origin servers, serving data at a lower frequency.

Lower Latency for Improved User Experience

For geographically dispersed user bases, CDNs decrease latency by caching static assets on edge servers closer to users. This proximity reduces the distance between users and static content, leading to quicker content delivery, improved page load speeds, and an enhanced overall user experience.

Manage Traffic Spikes and Avoid Downtime

CDNs can handle high traffic spikes effectively by load-balancing requests across a distributed edge server network. 

By offloading and caching static content, CDNs allow websites to accommodate a larger number of simultaneous users without overburdening the existing infrastructure. This helps prevent unplanned outages and downtime, particularly for websites with a single origin server.

Reduce Costs

Serving static content constitutes a significant portion of bandwidth usage. Offloading these assets onto a CDN can substantially reduce monthly infrastructure expenses. Beyond cutting bandwidth costs, CDNs decrease server costs by alleviating the load on origin servers, enabling existing infrastructure to scale efficiently. 

Some CDN providers also offer fixed-price monthly billing, providing stability and predictability to recurring expenses.

Increase Security

CDNs play a crucial role in DDoS attack mitigation. Many CDN providers offer features to monitor and filter requests to edge servers. These services analyze web traffic for suspicious patterns, blocking malicious attack traffic while allowing legitimate user traffic through. 

CDNs provide various DDoS mitigation services, ranging from common attack protection at the infrastructure level to advanced mitigation services and rate limiting.

Additionally, most CDNs allow the configuration of full SSL, enabling traffic encryption between the CDN and end users, as well as between the CDN and origin servers. This can be achieved using either CDN-provided or custom SSL certificates.

FAQs

How does a CDN enhance website load times?

A Content Delivery Network (CDN) enhances website load times by minimizing the amount of data transferred between the CDN’s cache servers and the client. This improvement in page load times is achieved through the following mechanisms.

Does Google Cloud have a CDN?

Yes, Google Cloud offers a Content Delivery Network (CDN) service integrated with security features known as Google Cloud Armor.  The Google Cloud CDN, when combined with Google Cloud Armor, provides enhanced security for web applications

What are the challenges of using Content Delivery Networks (CDNs)?

Content Delivery Networks (CDNs) present several challenges that can significantly affect website performance and user satisfaction. Common issues include latency, instances of cache misses, and failures in content delivery. These issues have the potential to adversely impact the overall user experience and the efficient functioning of your website.

List out some Content Delivery Network tools.

Among the available CDN tools, the following are our top picks:

  • Cloudflare: Recognized as the best overall CDN solution.
  • KeyCDN: Stands out for being the easiest to use among the options.
  • StackPath: Considered the best choice for enhanced security measures.
  • Akamai: Particularly well-suited for WordPress sites.
  • Amazon CloudFront: A reliable and widely used CDN solution.

Conclusion

Hope this write-up lets you know about the CDN concept in detail and how to host and optimize your static website performance through our guided labs.

By following these steps, you can effectively host and optimize your static website using a CDN, ensuring fast and reliable access for users around the world.

As a Google Cloud Architect, you can gain the expertise to significantly enhance website performance by leveraging CDN solutions.

About Karthikeyani Velusamy

Karthikeyani is an accomplished Technical Content Writer with 3 years of experience in the field where she holds Bachelor's degree in Electronics and Communication Engineering. She is well-versed in core skills such as creative writing, web publications, portfolio creation for articles. Committed to delivering quality work that meets deadlines, she is dedicated to achieving exemplary standards in all her writing projects. With her creative skills and technical understanding, she is able to create engaging and informative content that resonates with her audience.

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top