Joomla CDN integration

Introduction

A Joomla CDN integration can improve delivery of static files such as CSS, JavaScript, fonts and images 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.

The guide below shows a careful step-by-step Joomla CDN setup using the CDN for Joomla! extension by Regular Labs. If you are looking for how to use a CDN plugin in Joomla, this is the exact workflow that was re-verified on Joomla 6.1.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 Joomla using the CDN for Joomla! plugin

  1. Log in to the Joomla administrator interface. Use your normal administrator URL, for example /administrator/. The login screen should look similar to the example below.
    Joomla administrator login screen
  2. After signing in, confirm that you are in the administrator dashboard. This is where you can install extensions and edit plugin settings.
    Joomla administrator dashboard
  3. Open the Joomla extensions installer. In the tested Joomla 6.1.2 interface, the installer page was opened at Extensions: Install, with the Upload Package File tab selected as shown below.
    Joomla extensions installer
  4. Install the CDN for Joomla! extension from Regular Labs. If you downloaded the package manually, upload it through the Joomla installer. If your Joomla environment supports installing directly from the Joomla Extensions Directory, you can use that path instead.
  5. Once the extension is installed, open Plugins and search for cdn. You should see the plugin System - Regular Labs - CDN for Joomla! in the results.
    Joomla plugins list with CDN for Joomla plugin
  6. Make sure the plugin is enabled. If it is disabled, enable it before opening the settings screen.
  7. Click the plugin name to open its configuration page. Before any changes, the setup screen should look similar to the example below.
    Joomla CDN plugin configuration before entering CDN domain
  8. Open the Setup tab if needed and fill in your CDN Service Domain in the CDN Domain field. In a normal setup, enter the CDN Service Domain itself in the field, unless the plugin UI or documentation for your version explicitly says otherwise. In this demo, the CDN Service Domain was barsoom-cdn.cdnsun.org. The plugin is expected to rewrite static asset URLs to this CDN Service Domain, not to replace the main Joomla page URL itself.
    Joomla CDN plugin configuration with CDN domain filled in
  9. Click Save & Close. After saving, Joomla should return you to the plugins list and keep the plugin enabled.
    Joomla CDN plugin saved successfully
  10. Open the public frontend of your Joomla site and verify that static assets are loading from your CDN Service Domain. In this demo, frontend assets such as CSS, JavaScript and theme images were loaded from barsoom-cdn.cdnsun.org.
    Joomla frontend after CDN integration

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

 _    _    __   __   _    _   
| |  | ||  \ \\/ // | |  | || 
| |/\| ||   \ ` //  | |/\| || 
|  /\  ||    | ||   |  /\  || 
|_// \_||    |_||   |_// \_|| 
`-`   `-`    `-`'   `-`   `-`