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.
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 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
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.
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.
- 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.
2. 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.
After clicking on the Create account button, you will get a verification email. Once verified, you will see the 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.
- 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.
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.
Configure KeyCDN with Breeze
Okay so, I have set up KeyCDN, created a Zone and got the Zone URL.
Copy it and navigate to CDN tab on Breeze WordPress cache plugin and paste in the CDN Root URL field.
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.
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