How to setup WordPress CDN

Last updated on Feb 01, 2017

darshan

WordPress

0

Suffering from slow loading website? Do you want to make your website loading fast? Have you got five minutes? WordPress CDN will help! Here is how:

Have you tried image optimization and resources minification but still facing the slower performing WordPress website? WordPress CDN would be the answer to your issue.

Before diving deeper into utilizing the WordPress CDN we may first need to understand the CDN.

HTTP Basics:

CDN stands for Content Delivery Network. It’s a distributed content delivery system where the static content of your website delivered to your users from nearest delivery servers.

It may sound a bit confusing at first. Let me explore it in detail. Do you know what happens when a user requests for your website?

In order to understand WordPress CDN better, we may need to understand how HTTP request and response works.

When a user requests for your website, your web server receives the request. It looks for the resource you requested. Process the data and other resources and start producing the response.

A standard HTTP response consists of HTML, CSS, and JS data. It’s the requester’s browsers duty to fetch and render the resources provided by the web server. The HTTP server response contains the location from where the client browser needs to fetch the Images, CSS and JS like static resources.

The resources requests made here are sequential in nature, meaning a requested resources needs be found and downloaded before the next resource request can be made.

It’s the characteristic of HTTP 1.1 the HTTP 2.0 which is the up and coming protocol will support the simultaneous resource requests and downloads.

Not all the web servers are configured/upgraded to HTTP 2.0 whereas many of the latest web browsers are now capable of making HTTP 2.0 based calls.

What is WordPress CDN?

WordPress CDN DiagramIn order to understand about the WordPress CDN, we may need to understand about the CDN first.

So now we know that a client browser will have to make as many static resource calls as defined in the website/webpage HTTP response.

Meaning if I’m the user requesting for your website’s home page, and your home page is consist of six images, three CSS files, and five JS files then my web browser will have to make fourteen static resource calls in order to properly render the page.

As we seen earlier, your browser has to wait for a resource to be responded before it can make another resource call.

The speed of loading the resources depends on two things

Server location: It’s by far most important thing. If your server is far from the user requesting the website. It will take longer time for resources to reach.

Server response speed: How fast your server retrieves the files and respond to the request. It depends on the disk IO, memory, processing power, and network bandwidth.

Resource size: It would obviously take longer time for large size resource to be fetched, transferred, and rendered.

A WordPress CDN server would help you address the most crucial first two things. It will help you address the server location and response speed issues.

Technically speaking there is not much you can do with first two points they rather depend on the server you have your website hosted with.

You can address the second point by changing hosting or opting the cloud infrastructure but you can’t really do much about the first point.

How is WordPress CDN helpful?

WordPress CDN service providers have many servers located on various geolocation. It makes the content delivery faster by mapping the nearest server to the requester’s original location.

A standard WordPress CDN service will allow you to upload or migrate your static resources like Image, CSS, JS, and PDF files that you use frequently use on your website.

A WordPress CDN service provider has multiple servers located in various geo locations. Once you add your content to their server, it mirrors the same content to all of its servers.

Now when a visitor request for your website. All the resources request made to the WordPress CDN servers instead of the original server.

The WordPress CDN server identifies the user’s location and routes the resource request to their nearest server based on user’s location.

It improves the response time by mapping the nearest resource server. Additionally, these WordPress CDN servers are cookieless servers which reduce the header and information parsing overhead.

How to use it?

Hope you are convinced that a WordPress CDN service could help you improve your website’s response time. You will find a dramatic improvement if you have a high traffic and resource heavy website!

If you are up for the WordPress CDN service, the next question you may have that how would you use WordPress CDN on your WordPress website?

Well, there are many players in the WordPress CDN hosting space. If you are an enterprise looking for a rock solid solution Akamai would be the best choice. Based on my finding the Facebook is using their server.

But if you are like me a small business owner, you may consider the MaxCDN or KeyCDN services. I have personally tried the KeyCDN and found it helpful on my website.

By no means, we are sponsoring any of these WordPress CDN services. If you want to get started with WordPress CDN without investing, KeyCDN is offering a free trial of their services. The choice of a WordPress CDN provider is up to you.

Configuring WordPress CDN Provider on your website?
Every WordPress CDN provider will have a distinct way of integrating their service on your WordPress website. I’ve included the guide that helps you setup the CDN service for your website. If you get confused or if you are looking for a professional WordPress development company, feel free to contact us. We are offering NO obligation consulting service.

The generic process of WordPress CDN integration would be like:

  • Creating an account with WordPress CDN provider
  • Creating a pull zone (automatically fetches resources from your server)
  • Configuring popular cache plugins like W3 Total cache or their proprietary plugins
  • Done!

And don’t worry you can unplug this WordPress CDN service anytime you want with affecting any functionality of your website. If in case you decide not to use the WordPress CDN services.

WordPress CDN integration using KeyCDN:

  • First of all, create an account with KeyCDN services.
  • Create a pull zone from the admin area. It will pull the website resources automatically. You don’t need to upload each static items manually.
  • Install their WordPress CDN Enabler plugin from the WordPress plugins section. The plugin window should look like the below image when you install and activate the plugin.
  • You just need to change the WordPress CDN URL string. You can find it on your KeyCDN dashboard. Copy it and past it under the CDN URL.
  • Check the relative path checkbox and hit the save changes button.
  • That’s it!

You are done with WordPress CDN. Your website will load the resources from the KeyCDN WordPress CDN servers. You may need to wait a while till the service finish automatically importing the static resources of your website.

Disabling the plugin will help you unplug the WordPress CDN service. It will make your website to load a resource from your own server as it was doing earlier.

MaxCDN Integration Guide:

The process remains majority the same across the various WordPress CDN providers. The process starts with creating a pull zone. An automated process of fetching the resources from your website.

  • Choose the best matching plan and create your account with MaxCDN.
  • Now Create a pull zone, log in to your account, click the zones and hit the create pull zone button.
  • Provide the Name of the pull zone and the URL of your website to start the process and hit the create button.
  • Now install and activate the W3 Total Cache plugin. Go to the W3 Total Cache plugin from the left navigation. Now hit the CDN tab from the general settings.
  • Enable CDN and choose the MaxCDN from the option. You will see an Authorize Account link. It’s the easiest way to create an API key for your MaxCDN account.
  • Once done, you will find a Test MaxCDN button. Hit the button, if everything goes well you will see a green background saying test successful.
  • In most of the cases, it will be successful. If not, let me know in the comments below. Hope I would be able to address the issue.
  • Done!

This is pretty much it. If you would like to tweak the W3 Total Cache plugin a bit you may refer their official optimization guide here.

Other Notes:

Do you know you can use the CDN service for the websites or web application built other than the WordPress framework? So if you already have a website built but performing poorly on loading time, you can use the CDN to improve the loading speed. Visit our Website development services if you want to create a new (And faster loading) website!

This article is mainly covering the website built using the WordPress framework. But if you want to develop a custom web application matching your business idea for your defined business niche, you can acquire our hire CodeIgniter developer service

Conclusion:

WordPress CDN helps you reduce the resource loading time. If you are a high traffic website or a website with tons of images and other static sources. Adding a WordPress CDN resource will help you make things perform faster. This guide helps you get started with WordPress CDN for free.

Post by Darshan Joshi

Darshan shares a great passion for helping and empowering businesses around the world. With web application, he is helping businesses get more out of their business resources and an improved workflow. And the clone scripts help startups launch quickly in the market!

Leave a Reply

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