WordPress CDN integration in 2024

Introduction

WordPress stands as one of the most renowned content management systems (CMS) globally. With nearly 22.5% of all existing websites worldwide powered by WP, its popularity remains unparalleled. This robust system is favored for its:

  • Effortless installation, operation, and customization.
  • Cost-free accessibility.
  • Abundance of free templates, themes, and plugins.
  • Search engine optimization (SEO) friendliness.
  • Intuitive control and management.
  • Robust security features.

Leveraging a Content Delivery Network (CDN) with WordPress can significantly enhance loading speed. Below, we provide comprehensive instructions on integrating a CDN with WP.

Before you start

  • Before you take any steps please back up your files and database.
  • In the following, we will integrate a CDN service using the CDN domain 12345.r.cdnsun.net. Please visit the Services/How-To section to obtain your CDN domain.
  • To integate a CDN service on https:// website you can use https://12345.r.cdnsun.net or you can use a custom CDN domain with 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 domain is ready-to-use here.

Create CDN Static service

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

Enable CDN in WordPress using the CDNsun WordPress CDN Plugin

  1. Install and activate the CDNsun WordPress CDN Plugin.
  2. Go to CDNsun plugin's Settings.
  3. Fill in your CDN domain as in the picture below.
    CDNsun WordPress CDN Plugin Settings
  4. Click on Save Changes.
  5. That's all.

CDNsun WordPress CDN Plugin on GitHub

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

Enable CDN in WordPress using W3 Total Cache plugin

  1. Install and activate the W3 Total Cache plugin.
  2. Using the left menu go to PerformanceGeneral Settings.
  3. Scroll down to the CDN section.
  4. Don't tick Enable and select Generic Mirror from the CDN type select box as in the picture below.
    Set Mirror
  5. Click Save all settings.
  6. Using the left menu go to PerformanceCDN.
  7. Scroll down to the Configuration section.
  8. To the Replace site’s hostname with input field fill in your CDN domain as in the picture below.
    Set CDN Domain
  9. Click Save all settings.
  10. Using the left menu go to PerformanceGeneral Settings.
  11. Scroll down to the CDN section.
  12. Tick Enable as in the picture below.
    Set CDN
  13. Click Save all settings.
  14. That's all.

WordPress CDN integration using W3 Total Cache plugin video tutorial

Enable CDN in WordPress using WP Super Cache plugin

  1. Install and activate the WP Super Cache plugin.
  2. Using the left menu go to SettingsWP Super Cache.
  3. Switch to the Easy tab.
  4. Select Caching On and click Update Status.
  5. Switch to the CDN tab.
  6. Tick the Enable CDN Support check box and to the Off-site URL input field fill in your CDN domain as in the picture below.
    WP Super Cache
  7. If you don’t have SSL enabled for the CDN service tick the check box Skip https URLs to avoid "mixed content" errors.
  8. Click Save Changes.
  9. That's all.

WordPress CDN integration using WP Super Cache plugin video tutorial

Enable CDN in WordPress using W3 Total Cache plugin and CDN storage

For this integration you need a CDN Static Push service. Let's assume that your CDN Static Push service and your CDN storage have the following properties.

  • CDN Static Push service
    • CDN domain - 12345.r.cdnsun.net
  • Storage
    • Server Hostname - push-11.cdnsun.com
    • Username - u841548321833
    • Password - cmHY2lsKO2
  1. Install and activate the W3 Total Cache plugin.
  2. Using the left menu go to PerformanceGeneral Settings.
  3. Scroll down to the CDN section.
  4. Don't tick Enable and select Self-hosted / File Transfer Protocol Upload. from the CDN type select box as in the picture below.
    W3TC General Settings
  5. Click Save all settings.
  6. Using the left menu go to PerformanceCDN.
  7. In the first General section tick the options as in the picture below.
    W3TC CDN Settings/General
  8. Don't click Save all settings at this moment.
  9. Scroll down to the Configuration section and fill in FTP hostname, FTP username, FTP password, FTP path and Replace site’s hostname with input fields as in the picture below.
    W3TC CDN Settings/Configuration
  10. Click Save all settings.
  11. Using the left menu go to PerformanceGeneral Settings.
  12. Scroll down to the CDN section.
  13. Tick Enable as in the picture below.
    W3TC General Settings CDN Enabled
  14. Click Save all settings.
  15. That's all.

Enable CDN in WordPress using WP Fastest Cache plugin

  1. Install and activate the WP Fastest Cache plugin.
  2. Using the left menu go to WP Fastest Cache Options.
    WP Fastest Cache Options
  3. Configure the plugin on the Settings tab similarly as in the picture below.
    WP Fastest Cache Options Settings
  4. Go to CDN tab and click on Other CDN Providers.
    WP Fastest Cache Options CDN
  5. Fill in your CDN domain and your origin domain (e.g. mycompany.com, it should correspond with your WP website domain) as in the picture below.
    WP Fastest Cache Options CDN Domain
  6. Next specify which file types should be served via CDN.
    WP Fastest Cache Options CDN File Types
  7. Finally click on Finish.
    WP Fastest Cache Options CDN Finish
  8. That's all.

Enable CDN in WordPress using Comet Cache plugin

  1. Install and activate a Pro version of the Comet Cache plugin.
  2. Using the left menu go to Comet Cache Pro Options.
    Comet Cache Menu
  3. In the Enable/Disable section enable Comet Cache as in the picture below.
    Comet Cache Enable
  4. In the Static CDN Filters section enable CDN filters as in the picture below.
    Comet Cache Enable CDN
  5. In the same section fill in your CDN domain as in the picture below.
    Comet Cache CDN Hostname
  6. At the bottom of the page click on Save All Changes.
  7. That's all.

Enable CDN in WordPress using CDN Enabler plugin

  1. Install and activate the CDN Enabler plugin.
  2. Go to CDN Enabler plugin's Settings.
  3. Fill in your CDN domain as in the picture below.
    CDN Enabler Settings
  4. Click on Save Changes.
  5. That's all.

Notes

  • 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 domain.
  • Don't see your CDN domain in 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 troubles with custom fonts? Please refer to Using custom fonts with CDN - setting CORS for more details.
  • Still having troubles? Check your CDN URLs in our CDN content check or please refer to Debugging a CDN service for more hints.

Contact Us

  _  _     _____    ______   
 | \| ||  |  ___|| |      \\ 
 |  ' ||  | ||__   |  --  // 
 | .  ||  | ||__   |  --  \\ 
 |_|\_||  |_____|| |______// 
 `-` -`   `-----`  `------`