WordPress CDN Integration Helps Web Pages Load Faster

by Mustaasam Saleem  October 11, 2017

CDN referred to as Content Delivery Network is the network of servers distributed around the globe. It delivers pages and other specified web content to visitors on the basis of their location nearest to the CDN server.

The best way of optimizing page load time of WordPress websites is to opt for WordPress CDN integration. When you add CDN to WordPress, it starts caching content of the site including images, JS, and CSS. All this content is delivered to the browser without hitting the server, saving bandwidth and server resources.

Integrate CDN to WordPress

We all know the fact that using a WordPress cache plugin is always suggested to speed up a WordPress site. How about connecting a CDN with a WordPress caching plugin? It will dramatically increase the overall performance of a WordPress-based site that can be a simple blogging site, a WooCommerce-based ecommerce store or a network of WordPress Multisite.

There are a number of caching plugins for WordPress available, such as WPRocket, W3TC, and WP Fastest Cache etc. Recently, Cloudways has launched its own WordPress cache plugin called as “Breeze”. The simplest, fastest, and an easy-to-use cache plugin that provides WordPress CDN integration with Varnish support.

Today, I’m going to guide, how you can easily add CDN to WordPress and configure it to work properly with Breeze. In my example, I will be using asset-based CDNs, i.e:

  1. Add CloudwaysCDN to WordPress via Breeze
  2. Add CloudFront CDN to WordPress via Breeze
  3. Add KeyCDN to WordPress via Breeze

1. Add CloudwaysCDN to WordPress

Cloudways customers can activate and integrate CloudwaysCDN with WordPress in just a single click. Here are a few steps involved in the process. Log in to the Cloudways account, navigate to Applications and then get into the WordPress applications where you want to install CloudwaysCDN.

From the left pane, navigate to the CloudwaysCDN tab and then enter the URL of your WordPress site. Click on CREATE button.

Create CloudwaysCDN

It will enable the CloudwaysCDN for this application and provide you a few details like CDN URL, bandwidth usage, Purge cache and Remove the CloudwaysCDN entirely, like the image below.

To integrate it into a WordPress site, simply click on the Apply button.

P.S: The single-click applies only for Breeze – a free WordPress cache plugin by Cloudways. If you are using any other caching plugin, get the CDN URL from CloudwaysCDN tab and configure the CDN accordingly.

Add CloudwaysCDN to WordPress

Login to the admin panel of your WordPress site and then click on Breeze under Settings:

Breeze Setting

Go to the CDN tab of Breeze Cache Plugin and here you will see that Activate CDN option is marked as checked, and the CDN URL is set in the CDN CNAME field.

CDN in Breeze

Now it’s time to verify that CDN is successfully applied. Open your site, press CTRL+U and search for StackPath. You will get a few results which mean that CDN is integrated successfully.

StackPath CDN

Looks like Site is Broken?

No worries, Cloudways uses Varnish to optimize the WordPress sites. Make sure to purge all cache, and then revisit the site. Hurrah! You have integrated the CloudwaysCDN in just a few click.

Want to know more about CloudwaysCDN? Have a look at here.

2. Add CloudFront to WordPress

CloudFront by Amazon is perhaps the most popular CDN option for WordPress websites. Once connected, CloudFront serves the content of a WordPress site directly from its servers instead of requesting the hosting server. This reduces the number of requests that burdens the hosting server.

Get CDN URL by Creating Web Distribution in CloudFront CDN

I assume, you already have an account on Amazon Web Services (AWS), if not, sign up and navigate to CloudFront Console. Then, click on Get Started under Web section.

CloudFront Getting Started

It will take you to the full-page options where you can choose from a number of options. To make it simple, I will be using the default settings set by CloudFront itself.

  • Origin Domain Name: The URL of my website (wpcommunity.org)
  • Origin Path: Enter the specific path for assets, if you have any. (I left it blank.)
  • Origin ID: Enter a simple description of what this service is about.

CloudFront Setup Distribution

All the other settings are left untouched. If you want to configure any further, here is the complete guide describing what all those options are. Scroll down, and click on Create Distribution.

It will take a few minutes to deploy, depending on the content of your site. Once the process is completed, it will take you to the screen from where you will find Domain Name (CloudFront URL).

Copy the URL in Domain Name and navigate to CDN tab of Breeze and paste in the CDN Root URL text field.

Breeze CDN Integration

  • Activate CDN: Mark this if you want to activate the CDN.
  • CDN Root URL: The URL of the created distribution. Don’t forget to add HTTP / HTTPS with the URL.
  • CDN Content: The directories of the content that you want to be served by a CDN.
  • Exclude Content: If you want to exclude a few file extensions, or directories not to be served by the CDN, enter them here.
  • Relative Path: It is always recommended to enable the relative path to keep the structure of files and folders.

Let’s Test it!

Visit your site URL, view the source code and search for CloudFront. You will see all the assets, such as CSS, JS, and images are served by the CloudFront CDN.

CloudFront in Action

3. Add KeyCDN to WordPress

KeyCDN is one of the leading CDN providers in the market. I suggest that you try out their services at your website (through the free trial period) before opting for a full account.

In this article, I will demonstrate how to connect KeyCDn with Breeze cache plugin so that all the content is served via CDN.

First thing first, I need to sign up for a KeyCDN account by filling out the few required details. In the very first field, enter the website URL that you want to connect with KeyCDN and fill other details such as email and user credentials.

KeyCDN Sign up

After clicking on the Create account button, you will get a verification email. Once verified, you will see the KeyCDN dashboard:

KeyCDN Dashboard

Get CDN URL by Adding Zone in KeyCDN

My WordPress site has been added under my account. Now, I need to Add Zone with respect to the URL of my site. From the left pane, navigate to Zones tab and you will be asked to configure the zone.

KeyCDN Creating Zone

  • Zone Name: KeyCDN provides a special URL with default format: http://xxx-yyy.kxcdn.com. Where xxxxx is the name that you entered in Zone Name field. In my example, it will be   wp-yyy.kxcdn.com because I have entered wp.
  • Zone Status: Since, my site will be publicly accessible, I will add the status as Active.
  • Zone Type: There are two types of Zone, either pull or push. Beside the Zone type, you can see Show Advanced Features checkbox. Expand and configure it, if you are confident enough what you are doing. Otherwise, leave it as default.
  • Origin URL: Enter the URL of the website that you want to connect with this Zone.

After setting up the Zone, you will be redirected to the Zone tab and there you will see a newly created Zone like the image below. The status of my Zone is currently set as Deploying that means, it is setting up and linking everything between KeyCDN’s Zone and the website.

KeyCDN Deploying Zone

The process may take a few minutes, once it is done, the status will be changed to Active. You can purge the cache by going to the Manage button like the image below.

KeyCDN Purge

Configure KeyCDN with Breeze

Okay so, I have set up KeyCDN, created a Zone and got the Zone URL.

KeyCDN URL

Copy it and navigate to CDN tab on Breeze WordPress cache plugin and paste in the CDN Root URL field.

Integrate CDN with Breeze

Test the Site

At this point, I have properly set up the KeyCDN and connected it with Breeze. Let’s check whether the CDN is serving the website. For this visit your website and view the source of the page by pressing CTRL+U (Chrome). Search for kxcdn, you can see, the CSS, JS, and Images are served via KeyCDN.

KeyCDN Test Site

Wrapping It Up!

In the above guide, I have covered CloudFront and KeyCDN. But, Breeze is not limited to them, any asset-based CDN can easily be configured with Breeze. You just have to get the CDN URL and paste it in the CDN tab of Breeze. That’s it!

If you face any difficulty while adding CDN to Breeze, feel free to ask our live chat support or drop a comment below. I would love to help you out!

Start Creating Web Apps on Managed Cloud Servers Now!

Easy Web App Deployment for Agencies, Developers and E-Commerce Industry

About Mustaasam Saleem

Mustaasam is the WordPress Community Manager at Cloudways – A Managed WordPress Hosting Platform, where he actively works and loves sharing his knowledge with the WordPress Community. When he is not working, you can find him playing squash with his friends, or defending in Football, and listening to music. You can email him at mustaasam.saleem@cloudways.com

Stay Connected:

You Might Also Like...