PrestaShop CDN integration

Introduction

A PrestaShop CDN integration delivers static assets such as images, CSS, JavaScript, and fonts through a CDN Service Domain. This can reduce latency for shoppers, speed up static asset delivery, and reduce the traffic handled directly by the store's origin server.

This guide shows how to set up a CDN using the built-in media server feature in PrestaShop 9.1.4 Classic with the Hummingbird theme. No additional PrestaShop module is required.

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 PrestaShop

  1. Configure the CDN service to use the PrestaShop storefront as its origin. For the storefront used here, the origin is https://barsoom.cdnsun.org.

    Cross-origin font files require the Access-Control-Allow-Origin response header so browsers can use them. Before enabling the media server, follow the custom-font and CORS guide to configure the header on Nginx or Apache. If font files were cached before the header was added, use Purge to remove individual cached font files or Purge All to remove all content from the CDN cache, then clear the PrestaShop cache after completing the configuration below.

  2. Log in to the PrestaShop administration panel.
    PrestaShop administrator login page
  3. From the dashboard, open Advanced Parameters and click Performance.
    PrestaShop administrator dashboard with the Advanced Parameters menu
  4. In CCC (Combine, Compress and Cache), set Smart cache for CSS to Yes and Smart cache for JavaScript to Yes. The storefront shown here uses Nginx, so Apache optimization remains No. If your origin uses Apache, review the PrestaShop performance documentation and test the Apache-specific setting with your server configuration. Click Save.
    PrestaShop CCC settings with CSS and JavaScript smart cache enabled
  5. Scroll to Media servers (use only with CCC). In Media server #1, enter the CDN Service Domain barsoom-cdn.cdnsun.org. Enter the hostname only, without https:// and without a trailing slash. Leave Media server #2 and Media server #3 blank, then click Save.
    PrestaShop media server settings with the CDN Service Domain saved in Media server number one
  6. Use the Clear cache action at the top of the Performance page. This clears PrestaShop's cached storefront output so new asset URLs can take effect.
  7. Open the storefront over HTTPS and confirm that it remains fully styled and functional. Images, CSS, JavaScript, fonts, and icons should load normally.
    PrestaShop storefront after the CDN integration
  8. Inspect the storefront page source or the browser's Network panel and confirm that static asset URLs use https://barsoom-cdn.cdnsun.org/.... Also check that the browser reports no failed asset requests or HTTP errors.

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

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