Plugin Guide - Content Delivery Network (CDN)

Buy Now

The CDN plugin helps enhance the performance of your nopCommerce store by offloading static assets like images, CSS, and JavaScript files to a globally distributed CDN. By using this plugin, you can improve website speed, reduce server load, and provide a better user experience for customers worldwide.

🔑 Key Features

Static Content Delivery: Automatically serve images, CSS, and JavaScript files from a CDN.
Easy Configuration: Configure the CDN URLs directly from the admin panel.
Flexible Integration: Supports theme-specific resources and dynamic resource handling.
Optimization: Improves page load times by reducing latency.

🛠️Configure

This plugin comes bundled with the NopAdvance.Core plugin, which is a prerequisite for its operation. Please follow the instructions on how to install a plugin as you proceed with the setup.

After installation, follow these steps to configure the plugin:

Navigate to Plugin Settings: Go to Admin Panel > NopAdvance > CDN > Configure.
Enable CDN: Check the box labeled Enabled to activate the CDN functionality.
Set CDN URLs:
- Image CDN URL: Enter the URL for serving images. Example: https://ik.imagekit.io/[your-cdn-path]/images
- CSS CDN URL: Enter the URL for serving CSS files. Example: https://ik.imagekit.io/[your-cdn-path]/css
- JS CDN URL: Enter the URL for serving JavaScript files. Example: https://ik.imagekit.io/[your-cdn-path]/js
Save Configuration: Click the Save button to apply the changes.

🖥️ Using the Plugin

Once the plugin is configured, all static resources will automatically be served from the configured CDN URLs. For example: Images, CSS, and JavaScript files referenced in your theme will use the CDN paths instead of the local server paths.

Example:

Local Path: /Themes/Flexo/Content/images/image.png
CDN Path: https://ik.imagekit.io/[your-cdn-path]/Themes/Flexo/Content/images/image.png

This ensures that images, CSS, and JavaScript files referenced in your theme use the CDN paths instead of the local server paths.

🔍 Testing the Integration

To verify that the CDN is correctly serving resources:

Open your website in a browser.
Use the browser’s developer tools (Ctrl + Shift + I or Cmd + Option + I).
Navigate to the Sources tab and inspect the paths of loaded resources.
Confirm that image, CSS, and JavaScript files are being loaded from the configured CDN URLs.

nopcommerce cdn plugin browser dev tools sources tab

Screenshot References:

Source Paths: Displays CDN URLs for static files (e.g., https://ik.imagekit.io/...).
Rendered Images: Shows the rendered size and source of images.

nopcommerce cdn plugin browser image rendering sample

In order to understand, how to get CDN URL, please see the ImageKit.io example.

⚠️ Troubleshooting

Resources Not Loading: Verify the CDN URLs and ensure they point to the correct paths.
Broken Images or Styles: Check the browser console for 404 errors and ensure the resources exist in the specified CDN paths.