Setting up your website to be served via a CDN (Content Distibution Network)

Setting up your website to be served via a CDN (Content Distibution Network)

Overview

  1. Advantages of Website being served via CDN
  2. Important caveats of using a CDN
  3. How to configure CDN
    1. BunnyCDN
    2. CloudFlare CDN

Advantages of CDN Server being configured

  1. Improved Loading Speed: CDNs distribute your website's content across multiple servers located in various geographic locations. This reduces the physical distance between the user and the server, resulting in faster loading times. Users experience quicker page loads, leading to a more satisfying and engaging browsing experience.
  2. Enhanced User Experience: Faster loading speeds contribute to an overall improved user experience. Visitors are more likely to stay on your site, explore its content, and convert into customers or subscribers. Reduced latency and quicker access to images, videos, and other assets create a positive impression and encourage user retention.
  3. Global Reach and Scalability: CDNs have a network of servers strategically positioned around the world. This global presence allows your website to efficiently serve content to users regardless of their geographical location. Additionally, CDNs can scale to accommodate increased traffic, ensuring your website remains responsive and available even during traffic spikes or promotional events.

Caveats/Disadvantages of using a CDN

CDNs work by keeping a copy of your website's pages on their globally distributed servers. This has an important consequence - whenever you make any changes to your website (via your Vacation Labs Backoffice), it is not immediately visible on your storefront because it takes some time for the CDN to update its copy of that particular page.

We have partially solved this problem by implementing, what we call "automatic CDN cache-busting", where we issue a command to the CDN to refresh its copy of a particular page whenever we detect any changes made to that page. However, this is not 100% accurate because:
  1. Detecting changes in a page is not 100% accurate because each page is made of up dozens of components, each of which can be individually edited (eg. logo, menu, pictures, main content, related content, etc)
  2. CDNs take some time to react to the "cache busting" command, usually from 20 seconds up to 3 minutes.
  3. Due to the CDN server delivery there might be an issue accessing the blog's admin area, for that please follow this support article -

Configuring your website to be served via CDN

Two CDN options are available:
  1. Bunny CDN (Paid but Vacation Labs will bear the cost)
    1. Can be configured by simply changing a CNAME entry
    2. Susceptible to certain DDoS attacks
    3. Integration available for for automatic cache busting
  2. Cloudflare CDN
  1. Entire nameserver (DNS management) needs to be moved to Cloudflare
  2. Industry leading DDoS protection
  3. Currently no integration with Vacation labs for automatic cache busting

Enabling Bunny CDN

In order to configure your website to be served via the BunnyCDN server you will need to reach out to the VL team and communicate that you want to enable the CDN Server as well as change the CNAME entry which you have made in your Domain's DNS panel, currently the CNAME entry will be something like
  1. Host/Host Name: www
  2. Value/Destination/Points to: sf.vacationlabs.com
This will need to changed to something like:
  1. Host/Host Name: www
  2. Value/Destination/Points to: vl-client-id-{{clientId}}..b-cdn.net
Please reach out to Vacation Labs at support@vacationlabs.com to get the necessary value/destination for the CNAME Entry as well as ask them to move your website/enable the BunnyCDN server for your website

Configuring Cloudflare CDN

To enable Cloudflare CDN your domain nameservers will need to be changed to Cloudflare and all traffic will need to be proxied via Cloudflare. To do this please follow the steps below:

1. Login to cloudflare and click on Website and Add a site (refer screenshot below)

2. Type in the Domain name (example.com) and click on continue

3. Select the plan you want (there is a free plan available as well) and click on Continue

4 On the next page cloudflare will review your current DNS records on its own and you will need to move the cursor to orange side to enable proxying (refer screenshot)once done click on Continue

  1. On the next page Cloudflare will give the Nameservers details that need to be configured in your Domain's DNS Settings (refer screenshot below)


Controlling what is cached in  Cloudflare CDN




Controlling  cache TTL in Cloudflare CDN

Cache TTL (Time To Live) is the duration for which cached data remains valid before it expires. It determines how long a cached copy of a resource can be served without needing to fetch a fresh version. Setting an appropriate Cache TTL is crucial for balancing website performance with content freshness, optimizing load times, and reducing server load.
On the Cache Rules section, remember to create a default rule which will set the default caching duration to 3-4 hours (as shown in the screenshot below)



    • Related Articles

    • Translating your Website in Multiple Languages (Multilingual Website)

      Vacation Labs allows you to have a multilingual website so that Website Language is never a limiting point to your visitors. Most of the customers prefer to view their website in their own language. You can have two types of translation on your ...

    • Related Tour Content

      Overview On the tour details page, Vacation Labs provides the flexibility to manage the "related content". This allows you to customize which "related" tour cards/collection cards/static pages are displayed for each specific tour. You can use this to ...

    • Activating and Setting up Pop-up inquiry form

      Pop-up forms help you connect with your website visitors who would like to send a quick Enquiry rather than going throw the whole Booking process. Many customers prefer sending an enquiry and then moving to make a booking. This helps you grow your ...

    • How to manage themes on website?

      Themes help you manage the overall look, feel and style of your website. This includes the Color scheme, Tour and Collection Cards, Website fonts, Header and Footer styles and many more. The theme basically represents your brand.  This article will ...

    • Deactivating the Website Sections in Vacation labs

      You can deactivate a particular section if you don't want to display or hide that section for some time. You may not always have to delete a section if you don't want to show it to your visitors. Please follow the below steps to deactivate/hide ...