ExpressionEngine CDN Integration

Introduction

An ExpressionEngine CDN integration can improve delivery of stylesheets, JavaScript, images, and other static files by serving them from your CDN Service Domain instead of directly from the origin server. This can reduce latency for visitors and offload static traffic from the origin.

This guide shows how to configure ExpressionEngine's native Themes directory URL and Upload directory URL settings. The procedure was tested on ExpressionEngine 7.5.26 and does not require an additional add-on.

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 ExpressionEngine

  1. Sign in to the ExpressionEngine Control Panel. Select Settings, then open URL and Path Settings.
  2. Set Themes directory URL to your CDN Service Domain followed by the public themes path. In this example, enter https://barsoom-cdn.cdnsun.org/themes/. Leave Themes path unchanged, then click Save Settings. ExpressionEngine will now generate CDN URLs for theme stylesheets, JavaScript, and other theme assets.
    ExpressionEngine URL and Path Settings with the Themes directory URL set to the CDN Service Domain
  3. Select Files from the Control Panel navigation. Locate the upload directory used by your site and choose Edit from its actions menu.
  4. Set Upload directory URL to your CDN Service Domain followed by that directory's public path. In this example, enter https://barsoom-cdn.cdnsun.org/images/uploads/. Leave Upload path unchanged, then click Save. Repeat this step for any other upload directories whose files should use the CDN Service Domain.
    ExpressionEngine upload directory with its URL set to the CDN Service Domain
  5. Open the public site and confirm that the frontend remains styled normally and static assets load from the CDN Service Domain.
    Styled ExpressionEngine frontend after configuring the CDN Service Domain

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

  ______     ___    __    __  
 /_   _//   / _ \\  \ \\ / // 
 `-| |,-   | / \ ||  \ \/ //  
   | ||    | \_/ ||   \  //   
   |_||     \___//     \//    
   `-`'     `---`       `