wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog Tutorials WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
WordPress CDN setup

Tutorials

WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin

Last updated on May 5, 2017
Posted on May 5, 2017

WordPress CDN Setup is easy but including the SEO setting? Why is it important? Because people who use CDN, including myself had images de-indexed by Google, the biggest Search Engines at this moment.

In this post we will use MaxCDN with our WordPress website or blog, and W3 Total Cache plugin that has CDN for WordPress setting. Since a few years, I use this plugin, I also voted this to be my best cache plugin I have used. To see all of my best blog plugins, feel free to read the list. Additionally I wrote an error that I had with W3TC and how I managed to fix the issue in this post.

Using CDN (Content Delivery Network) with your WordPress website can speed up your site.

I stopped using CDN because I moved to a faster web host.

If you haven’t setup CDN yet, I think you need to know that even though CDN can speed up your site, you’ll need to know in advance that there is a possibility your current images will be deindexed from Google images index once you use CDN, if you don’t set it up properly as I mentioned in the first paragraph.

  • Is my site loading fast? I use this shared hosting
  • Try my theme >

I have used CDN, MaxCDN services about more than a year, and I was happy with speed boost.

But because I recently moved my older website and new host, with fewer post, I think the current host is faster than my previous one, so I stopped using CDN for now.

Preparation Before We Setup MaxCDN

Because I wanted to use custom domains that looks like;
cdn.domain.tld
cdn2.domain.tld
cdn3.domain.tld
etc, so you need to access DNS setting on your server. I am using BlueHost in the demo.

If you use HTTPS you will need to have a wildcard SSL certificate to use custom domains

Signup to CDN services, the two that I know is MaxCDN and KeyCDN. I don’t know which one is better service, because I only used MaxCDN, never tried KeyCDN. And this post is not a best CDN for WordPress review, so please do research first, and once you decide MaxCDN, you can follow this tutorial.

WordPress CDN Setup Steps with MaxCDN

1. Login to your MaxCDN dashboard. When this post is published it looks like this;

2. Click “Zones“, then “Create Pull Zone“.

3. Then you can enter your Pull Zone details, like
Name: Type your Zone name, only letters, dashes and numbers.
Original Server URL: Copy and paste your website URL here.
Label: I type my Pull Zone’s name and zone right here.

Creating a zone in MaxCDN dashboard
Create a zone

Click “Create” button, and you will be prompted to add EdgeSSL or close, choose “Close” to close the dialog box that also says, it may take about 2 minutes to propagate your new custom domains.

You will be able to see your Zone’s configuration here. Zone ID, Cluster ID, your WordPress CDN URL, Zone Name, Origin URL, and the label.

Zone configuration that has CDN URL
Your zone configuration result

4. Now, click on “Settings” tab above, to access Custom Domain Settings. Add your custom domains, mine would be like cdn.wpvidz.com, cdn1.wpvidz.com,..,and cdn3.wpvidz.com. Once you have done this, you will see this;

Pull Zones custom domain setting
cdn.yourdomain.tld as custom domain

5. Now, while waiting for the propagation, we can go to your cPanel and look for your DNS Zone Editor. Just search on “DNS” on the search box, and you will see the icon, “DNS Zone Editor” in BlueHost, “Simple Zone Editor” in HostGator, and in many web hosts, it is called, “Simple DNS Zone Editor”.

DNS Zone Editor icon in BlueHost
In BlueHost
Simple Zone Editor icon in HostGator
In HostGator

6. Here, Select your domain.
Add DNS Record; Host Record, type in “cdn.yourdomain.tld” as “CNAME” type is selected, and “Points To:” copy your CDN URL here, click “add record” button, and continue the steps until “cdn3.domain.tld” we have done in step (4) above.

DNS Zone Editor setting in BlueHost
The setting looks like in BlueHost

In HostGator and most web hosts that have cPanel, select your domain, and then you can go to “Add a CNAME Record” section and type cdn.domain.tld on the “name” and your CDN URL on “CNAME” input box. Click “Add CNAME Record”, repeat the steps.

Configuring MaxCDN with W3 Total Cache Plugin

The W3 Total Cache should be installed and activated before following these steps;

1. Hover the “Performance” menu in the right side of your admin dashboard, and click “General Settings“. This will open general settings of W3TC plugin

Performance - General Settings for W3 Total Cache plugin
Performance – General Settings

2. Look for “CDN” section, and check on “Enable” button. Make sure the “CDN Type” in the drop down button is correct accordingly.

Click on “Save all settings” button.

Enabling CDN using W3TC plugin
Check enable checkbox

3. You will see a sort of authorization error message that says, “A configuration issue prevents CDN from working: The “Authorization key” and “Replace default hostname with” field(s) cannot be empty. You need to select to select / create a pull zone. Specify it here.

A configuration issue prevents CDN from working
The notification message looks like

4. Go to “CDN” under W3 Total Cache’s “Performance” setting, and while you are still logged in your MaxCDN account, click “Authorize” button next to “Specify account credential” text.

You should now see your “Authorization key”. Click “Copy” button or copy the key characters manually. Go back to your WordPress dashboard and paste your key to the input box next to “Authorization key” and click “Validate” button. You should see “key is valid” highlighted in green color if everything runs well to this point.

Authorize button while you are logged in MaxCDN account
Authorize button click to zoom

5. Scroll down, check on the “Replace site’s hostname with” it should be now populated automatically with our settings we created above.

Optional, you can click “Test MaxCDN” button to test. If all is OK, you should see “Test passed”.

Click “Save all settings” button.

6. Clean all your cache, by hovering “Performance” button on the top, and select “Purge All Caches”

Uninstall W3 Total Cache Plugin – Incredibly Easy!

You can now refresh your website, if necessary use “New Incognito” window in Chrome browser, and then test your images source URL. It should show your new CDN URL.

The new URL using custom domain
New URL
MaxCDN WordPress SEO Setting

Last thing you should pay attention when you use CDN is you need to care about the SEO effect you may have. With MaxCDN, you will need to check on its SEO setting in your MaxCDN dashboard.

1. In MaxCDN dashboard, make sure you are on “Zones“, “Pull Zones” then select the CDN for your website, and click on “Manage” and in the drop down menu, select, “SEO“.

MaxCDN SEO Setting
MaxCDN SEO Setting

2. I personally will enable these:
Canonical Header
Robots.txt

References for you to dig more about this SEO setting you can visit MaxCDN blog post here.

3. When you enable the “Robots.txt” checkbox, you will see “Use custom robots.txt” checkbox, check it to enable it. Then you can paste following:

Robots.txt in MaxCDN SEO tab
The SEO setting

Click “Update” orange button.

Now, you should have successfully setup WordPress CDN with MaxCDN and W3 Total Cache plugin, pay attention on whether Search Engines, like Google will still index your images or not.

cdn speed w3 total cache

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← How To Add Google Map in WordPress Contact Page

Comment form on this post is closed after 60 days.

Search

Worth Reading

  • WordPress Google maps in contact pageHow To Add Google Map in WordPress Contact Page
  • The configuration of YouTube Subscribe button in Google Developers web pageHow To Add YouTube Subscribe Button To WordPress Website
  • Adding Social Media Links to WordPress Menu With CSS Classes
  • Unable to create directory wp-content/uploads in WordPress
  • Forward Twitter to Facebook Using App and Feedburner Tutorial
  • Kitchen Sink WordPress - Seem Simple But Important
  • Admin Pointers, Drag and Drop WordPress 3.3 Media Upload Features
  • How to sell ebook in a wordpress blog?
  • Check your site's performance using Google labs Page Speed
  • WordPress feed not updating |Feedburner Email not updating Fix

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept