WordPress CDN integration

Introduction

A WordPress CDN integration can improve delivery of static files such as CSS, JavaScript, fonts and theme assets by serving them from your CDN Service Domain instead of from the origin server directly. This can reduce latency for visitors and offload part of the traffic from your origin server.

This guide shows how to set up a CDN in WordPress using two plugins: W3 Total Cache 2.10.2 and the CDNsun - WordPress CDN Plugin 1.0.1 on WordPress 7.0.2.

Before you start

  • This tutorial shows how to integrate a CDN service into a website. In this particular demo example we will use:
    • barsoom-cdn.cdnsun.org as the CDN Service Domain, and
    • https://barsoom.cdnsun.org as the website URL (i.e. barsoom.cdnsun.org is the Origin Domain).
  • Please visit the Services/How-To section to obtain your CDN Service Domain.
  • Before you take any steps please back up your files and database.
  • To integrate a CDN service on https:// website the CDN service must have SSL enabled.
  • If your website embeds custom fonts then please first enable CORS for them.
  • Before you take any steps please make sure that your CDN Service Domain is ready-to-use here.

Create CDN Static service

Please refer to Creating a CDN Static service for more details.

How to enable CDN in WordPress using W3 Total Cache

  1. Open the WordPress login page and sign in with an administrator account. The login screen should look similar to the example below.
    WordPress administrator login screen
  2. Open Plugins → Add Plugin and search for W3 Total Cache. Install the plugin, then activate it.
    WordPress Add Plugin page with W3 Total Cache search result
  3. After activation, open Performance → General Settings. Scroll down to the CDN section, leave Enable unchecked for now, and select Generic Mirror in CDN Type.
    W3 Total Cache general settings with Generic Mirror selected and CDN still disabled
  4. Click Save Settings.
  5. Open Performance → CDN. In W3 Total Cache 2.10.2, the mirror hostname is entered in the CNAMEs field. Enter your CDN Service Domain there. In this demo, the CDN Service Domain was barsoom-cdn.cdnsun.org.
    W3 Total Cache CDN settings with the CNAME field filled in
  6. Optional: If you use CDN Static Push instead of a mirror-style CDN setup, select Self-hosted / File Transfer Protocol Upload as the CDN type and fill in the FTP hostname, username, password, path, and CDN Service Domain fields with your push endpoint details. The example below uses push-XY.cdnsun.com as the FTP hostname, u123 as the FTP username, /public/ as the FTP path, and barsoom-cdn.cdnsun.org as the CDN Service Domain.
    W3 Total Cache CDN Static Push example with FTP upload fields filled in
  7. Click Save Settings.
  8. Return to Performance → General Settings, go back to the CDN section, enable CDN, and save the change.
    W3 Total Cache general settings with CDN enabled
  9. Open the public frontend of your WordPress site and verify that static assets are loading from your CDN Service Domain. After enabling the CDN, WordPress rewrote theme CSS, JavaScript, fonts and other static files to barsoom-cdn.cdnsun.org while the frontend remained styled normally.
    WordPress frontend after enabling CDN through W3 Total Cache

How to enable CDN in WordPress using the CDNsun plugin

  1. Open Plugins → Add Plugin and search for CDNsun - WordPress CDN Plugin. Install the plugin, then activate it.
    WordPress Add Plugin page with the CDNsun plugin search result
  2. Open Settings → CDNsun. In this plugin UI, the main field expects the full CDN URL, not only the bare hostname. Enter https://barsoom-cdn.cdnsun.org, keep the plugin enabled, and save the settings.
    CDNsun plugin settings with the CDN URL filled in and the plugin enabled
  3. Open a public page on your WordPress site and verify that static assets are loading from your CDN URL. After enabling the plugin, WordPress rewrote static resources to barsoom-cdn.cdnsun.org while the frontend remained styled normally.
    WordPress frontend after enabling the CDNsun WordPress CDN plugin

CDNsun WordPress CDN Plugin on GitHub

Anyone is welcome to contribute to the CDNsun WordPress CDN Plugin on our GitHub.

Verify & Troubleshoot

  • View HTML source code of your web pages to verify that you are using CDN, you should see source attribute of your images, CSS, JavaScript, etc. beginning with your CDN Service Domain.
    Frontend HTML proof that static assets are loaded from the CDN Service Domain
  • Don't see your CDN Service Domain in the source code of your web pages? If your website is using any cache plug-in/mechanism then you might want to clear/flush its cache.
  • Having trouble with custom fonts? Please refer to Using custom fonts with CDN - setting CORS for more details.
  • Still having trouble? Check your CDN URLs using our content check tool or please refer to Debugging a CDN service for more hints.

Contact Us

  _____      ___     ______   
 /  ___||   / _ \\  |      \\ 
| // __    | / \ || |  --  // 
| \\_\ ||  | \_/ || |  --  \\ 
 \____//    \___//  |______// 
  `---`     `---`   `------`