Magento CDN integration

Introduction

A Magento CDN integration can improve delivery of static files such as CSS, JavaScript, fonts, theme assets, 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 how to set up a CDN in Magento. If you are looking for how to set CDN URLs for static and media files in Magento, this is the exact workflow that was tested on Magento Open Source 2.4.7-p10. Adobe Commerce uses the same settings.

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 Magento

  1. Log in to your Magento admin panel.
    Magento administrator login page
  2. After you sign in, open Stores in the left menu and click Configuration.
    Magento administrator dashboard
  3. Make sure you are working in the correct configuration scope. Then open General and click Web. The CDN settings are in the Base URLs and Base URLs (Secure) sections.
  4. In the Base URLs section, leave your main store URL fields unchanged and fill in only the CDN asset fields. The screenshot uses storefront URL https://barsoom.cdnsun.org/ and CDN Service Domain barsoom-cdn.cdnsun.org. Enter: Base URL for Static View Files = https://barsoom-cdn.cdnsun.org/static/ and Base URL for User Media Files = https://barsoom-cdn.cdnsun.org/media/.
    Magento Base URLs section filled with the CDN static and media paths
  5. Open Base URLs (Secure) and enter the matching HTTPS CDN URLs for the secure asset fields. For a standard HTTPS storefront, use: Secure Base URL for Static View Files = https://barsoom-cdn.cdnsun.org/static/ and Secure Base URL for User Media Files = https://barsoom-cdn.cdnsun.org/media/.
    Magento Base URLs Secure section filled with the CDN static and media paths
  6. Click Save Config to store the new URLs. Magento should show a success message on the same page after saving.
    Magento Web configuration saved after entering the CDN URLs
  7. Go to System -> Cache Management. After changing these URLs, clear the cache so Magento starts using the new asset paths everywhere.
  8. Click Flush Magento Cache. When the refresh is finished, open your storefront again.
    Magento cache flushed after the CDN configuration change
  9. Open the storefront in your browser and make sure the page still loads normally. The homepage should look normal, and its media files should load through the CDN.
    Magento storefront homepage after the CDN integration
  10. To confirm the setup, open the page source in your browser. You should see storefront asset URLs under https://barsoom-cdn.cdnsun.org/static/....

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

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