Magento CDN Integration with KeyCDN

Magento is a popular eCommerce solution for online businesses. Magento is powering about 1% of the websites worldwide, it’s developed and maintained by Magento Inc, a company owned by eBay.

A slow Magento website means less revenue, which is why it’s important to choose the best CDN for Magento. With KeyCDN, the static content of a Magento website is offloaded to the CDN. Assets to an end client are always delivered from the closest KeyCDN location, which means less latency and higher throughput.

This article shows how to complete both a Magento and Magento 2 CDN integration.

How to Complete a Magento 2 CDN Integration

Follow the steps below to complete a Magento 2 CDN integration.

  1. Create a pull zone or a push zone.
  2. Log in to the Magento admin panel.
  3. Navigate to Stores > Configuration then navigate to Web.
  4. Depending on whether your website is delivered over HTTP or HTTPS you will expand either the Base URLs or Base URLs (Secure) option.
  5. From here, add your Zone URL or Zonealias to the Base URL for Static View Files field followed by /static/. For example: http://magento-7bb7.kxcdn.com/static/ (remember to add the correct protocol if using HTTPS).
  6. Similarly, add your Zone URL or Zonealias to the Base URL for User Media Files followed by /media/ For example: http://magento-7bb7.kxcdn.com/media/ (remember to add the correct protocol if using HTTPS).
    magento2 base urls
  7. Once this is complete save the config.
  8. Use the sidebar to navigate to System > Cache Management and Flush Magento Cache.
    flush magento2 cache
  9. Verify your HTML page source to ensure that you are properly delivering static content via the CDN.
    magento2 page source

That’s it! Now your Magento 2 installation is integrated with a CDN.

How to Complete a Magento CDN Integration (Pre Version 2)

This section shows how to complete a Magento CDN integration with KeyCDN. The integration can be done with HTTPS in addition to HTTP.

  1. Create a pull zone or a push zone.
  2. Log in to the Magento admin panel to start with the Magento CDN integration.
  3. Go to “System” > “Configuration”.Magento CDN Dashboard
  4. Once in “Configuration”, go to “General” and click on “Web”.Magento CDN Configuration
  5. Select the “Unsecure” section and enter the following information
    • Base URL: Enter your website URL in the following format: http://www.yourwebsite.com
    • Base Link URL: You don’t need to change this. It should be pre-populated with your Base URL
    • Base Skin URL: Fill in your pull zone URL that you get in the KeyCDN dashboard including the according folder for skin (e.g. http://yourzone-ab12.kxcdn.com/skin/ or http://cdn.yourdomain.com/skin/  )
    • Base Media URL: Also fill in your pull zone URL from the KeyCDN dashboard followed by the right folder (e.g. http://yourzone-ab12.kxcdn.com/media/ http://cdn.yourdomain.com/media/ )
    • Base Java Script URL: Enter again your KeyCDN URL followed by the Java Script folder /js/ (e.g. http://yourzone-ab12.kxcdn.com/js/ or http://cdn.yourdomain.com/js/ ) Warning: When using CDN, in some cases JavaScript may not run properly if CDN is not in your subdomain. If you encounter such issues, please change the Base Java Script URL back to your origin server.
      magento unsecure CDN setup

      Magento CDN URLs

  6. Select the “Secure” section if you want to use HTTPS. We recommend to use HTTPS. Before you can use HTTPS, you need to make sure you’ve configured either Shared SSL or Custom SSL in the KeyCDN dashboard. Both Shared SSL and Custom SSL are free of charge.
    • Base URL: Enter your website URL in the following format: https://www.yourwebsite.com
    • Base Link URL: You don’t need to change this. It should be pre-populated with your Base URL
    • Base Skin URL: Fill in your pull zone URL that you get in the KeyCDN dashboard including the according folder for skin (e.g. https://yourzone-ab12.kxcdn.com/skin/ or https://cdn.yourdomain.com/skin/ )
    • Base Media URL: Also fill in your pull zone URL from the KeyCDN dashboard followed by the right folder (e.g. https://yourzone-ab12.kxcdn.com/media/ or https://cdn.yourdomain.com/media/ )
    • Base Java Script URL: Enter again your KeyCDN URL followed by the Java Script folder /js/ (e.g. https://yourzone-ab12.kxcdn.com/js/ or https://cdn.yourdomain.com/js/ )  Warning: When using CDN, in some cases JavaScript may not run properly if CDN is not in your subdomain. If you encounter such issues, please change the Base Java Script URL back to your origin server.
    • “Use Secure URL in Frontend” –> Yes
    • “Use Secure URL in Admin” –> Yes
      Magento CDN URLs

      Magento CDN URLs

  7. Save all the settings. The Magento CDN integration is completed.
  8. We recommend to quickly check the HTML code in order to verify if all the URLs have been rewritten properly.

Also, make sure to check out our additional 12 tips on how to speed up Magento performance.

Choosing the Best CDN for Magento

Now that your Magento site is integrated with a CDN, you can begin taking advantage of the speed improvements, improved redundancy, and better security for your site. When choosing the best CDN for Magento, you should ensure that the CDN provider supports the new HTTP/2 protocol, uses optimized SSD servers, and offers SSL options such as free Let’s Encrypt certificates.

KeyCDN has also developed a series of tools and maintains a knowledge base. Check these pages as well: