In our previous article, we explored the benefits of using WordPress for a CDN service and why a CDN is one of the best ways to speed up WordPress on your blog many times before. . We observed how much performance improves if your visitors move away from your hosting server. We hope this piques your interest, because in today’s article, we’ll walk through a step-by-step guide on how to create a CDN resource at CDN77 and how to properly tune it. After that, we’ll install a specific set of plugins on WordPress and check that everything works.

The first step of our guide is Create a CDN77 account. If you don’t have an account yet, CDN77 offers a 14-day free trial. Registration only takes a few minutes. Then we’ll actually create a CDN resource by clicking Create new CDN resource (under the CDN tab). For the purposes of this article, we will implement a CDN on a movie blog hosted in a Las Vegas data center.

cdn77-with-wordpress-03

Since we will be implementing a complete HTTPS solution, we will use the new “HTTPS” at CDN77. This option secures data transfer from the host server to the CDN server.

If your site is running in SSL mode, you absolutely need to create an SSL-only resource on CDN77. Otherwise, you run the risk of mixed content errors. This type of error occurs when a browser is running in SSL mode and suddenly tries to load a resource through an insecure HTTP request.

cdn77-with-wordpress-04

How to setup SSL on CDN77

We can set up a free SSL certificate in two ways. We can use a shared SSL certificate for the subdomain of xxx.c.cdn77.org, or we can use our own CNAME (see image above). In general, we encourage the use of CNAMEs like cdn.yoursite.com.

If you choose the CDN77 shared solution, the SSL subdomain will work without further steps.

In this case, we will set a CNAME. This means that if we replace our website with cdn.ourdomain, our website content will be instantly accessible via HTTPS. With CDN77, SSL is just a few clicks away.

Adjust it!

After creating an asset, the first thing to look at is the Additional Settings menu. If you’re going to use HTTPS, you absolutely must enable HTTP/2. The speed gain between plain HTTP/1.x and HTTP/2 is huge. By default, CDN77 will work in HTTP/2 mode on your HTTPS resources, cutting your time in half.

If you’re going over HTTPS, you’ll also need to perform a 301 redirect to comply with Google’s standards for HTTPS, enable HTTPS redirection.

For best performance, enable ignore all in the ignore query string. Unless your site is running dynamically loaded content that needs to be updated hourly, you can get rid of the query string and ignore everything, which will greatly improve cache and site performance.

CDN77 also provides a cache expiration option. If you load a lot of images, you should set this to the highest possible setting, which is 12 days.

In this guide, we’ll consider speed first. So the CDN will only serve us the image static content, everything else will be loaded from the origin server.

Why not use CDN for Javascript and CSS, are you crazy?

Remember, in our previous article, we discussed how CDN performance changes when content is unavailable on the requesting nodes of the CDN network. Well, if the file that hasn’t been cached happens to be a CSS file, the load time will increase and it may negatively impact your performance. This can have a bigger impact on how fast your site renders than if you decide not to use a CDN to serve CSS.

CSS and Javascript files are critical for website loading on any browser and they should not be the subject of caching mechanisms in CDN services. Although, you can create a static resource on the CDN to dump these important files. This is a more advanced technique that requires you to tweak WordPress to a level beyond the scope of this tutorial.

Once we’ve adjusted everything appropriately, we can go to the Datacenter menu tab.

cdn77-with-wordpress-07

CDN77 provides a convenient way to enable/disable each node of its network. The key is to carefully choose the most active nodes to use. It’s easy to find, just follow your readers.

Once you know which nodes you need, it is recommended that you disable all dispensable nodes. There is a simple explanation for this: the more nodes on the network, the more time it takes to update them, and as a result, your performance suffers. As a general rule, when you reduce the number of nodes, you are also improving cache performance. Make smart choices.

When you first test website performance, Clear and Prefetch Might be convenient. Purge pushes specific content out of the CDN network, which is handy if you change content and need to flush the cache for updates. Prefetch does the opposite, it forces specific content into the CDN cache.

cdn77-with-wordpress-10

Once everything is configured, you can point the CNAME to your own domain. To do this, you must create a rule in the DNS section of your registrar or hosting panel and point your cdn.yourdomain.com to the CNAME xxx.rsc.cdn77.org as shown, this will indicate the DNS Redirect all subdomain traffic to the actual location it needs to be. Don’t worry, it won’t affect performance.Also, it can show your readers that you are using cdn.yourdomain.com It looks fancy.

If you prefer to use the cdn77.org address, you don’t need to do anything, just use that address when replacing your content in WordPress.

WordPress side

On the WordPress side, we need to add a plugin for it to work.we will use CDN launcher, a handy free plugin. The reason for using this plugin is simple – most CDN plugins do not allow such fine-grained control over the folders you send to the CDN. This plugin is very important for us because we don’t want to include any Javascript or CSS files, just uploaded images.

cdn77-with-wordpress-14

Once installed, you can find the plugin here…

cdn77-with-wordpress-15

Let’s adjust it!

cdn77-with-wordpress-16

Remember when we talked about customization? Here are the most important facts about how to properly set up a CDN on WordPress. The vast majority of CDN plugins will tell you to include a directory for the CDN to “copy”, and they will usually tell you to include wp-content. This is fine for a general setup, but bad for your performance, because the wp-content folder is filled with another very sensitive folder, the plugins and themes folder, which includes a lot of Javascript and CSS files. As mentioned before, you may lose performance when they are not cached.

So, how do we solve this problem? We just need to include the folder wp-content/uploads. Such an easy solution!

As shocking as you might be, the vast majority of plugins that deal with CDNs won’t allow you to do this. Including only this subfolder will direct your CDN to your uploads folder, which is only your images.

cdn77-with-wordpress-17

A simple refresh of the website will allow the CDN to fetch the content for you. In this example, we opened a Firefox developer tab (F12) and searched for the first image. You can clearly see that the link has been replaced and is now loaded directly from the CDN instead of our host server!

before and after

Let’s see how it turns out!

In the left screen we can see the time it takes to load the site from Sweden (which is far from our host server in Las Vegas, remember?) In the right screen we can see the performance Improved, the time is almost halved! All basic files are still being loaded from our servers in Las Vegas, but heavily loaded files such as images are being loaded from nodes in Sweden.

wrap up

Hopefully you’ve learned a powerful way to implement a CDN in your WordPress site. Some techniques are non-intrusive, such as those CSS and Javascript files that are critical to website loading speed. You can now take advantage of all the advantages of a CDN while minimizing its disadvantages. We hope you give the free CDN trial a try and use the tips in this article to see if you can speed up your WordPress site. We hope you enjoy this article! As usual, leave any questions or concerns in the comments below.