Setting up the Leaseweb CDN on Magento

Magento
^® is one of today’s most popular e-commerce platforms and widely used for automating online stores. Integrating this open-source content management system with the Leaseweb CDN can really optimize performance of your e-commerce web site and in this blog we describe what you need to do to set it up quickly and easily.

A couple of assumptions before we get started:

• Magento^® is installed on the origin server.
• An “Origin” that points to your Magento^® installation is already defined within your Leaseweb CDN control panel.

Configuring the zone itself

First thing you want to do is to configure a Pull Zone. Do this by going to “Manage Zones” -> “Pull Zones” and click the “Add” button.

When you click the “Add” button you then need to choose one of four “zones”. Since we’ll be serving mainly static files (such as images, CSS and JavaScript files) from our Magento^® shop, choose the “Small files” zone for best performance.

Now configure your new zone. Start by filling in your CNAME and choose your “Origin” that’s already been created.

This will generate a “Target”. This is what we’re going to use for Magento® to serve static files on. You can also add the CNAME itself to your DNS, pointing to the target generated.

Under “Advanced settings” you can add additional CNAMES. This might be beneficial if you want to increase the concurrent connections your site may use to download static resources. In general between one and three domains is recommended but test it for your specific site because it might differ a bit.
Next, go to “Edge settings” and activate “Ignore Cookies” as well as “Cache query string” as below:

Scroll down and click the “Save” button. Then wait 1-2 minutes for the zone to become fully active on the CDN.

Configure Magento^® to make use of Leaseweb CDN

The next step is to actually tell Magento^® to make use of the CDN to serve static files.

First, access your Magento^® Admin Panel and go to “System” -> “Configuration”

Scroll down to the bottom. Under the “ADVANCED” section select “Developer” where you will see two sections: “JavaScript Settings” and “CSS Settings”. Select the options to “Merge JavaScript Files” and “Merge CSS Files”. NOTE: This may affect the design of some e-shops so you need to test this. But in general, it’s recommended to enable these to reduce the amount of requests served.

Next, go to the “GENERAL” section and select the “Web” menu item. Here you will find two sections: “Unsecure” and “Secure”.

If you are running a site without SSL (https) you should select the “Unsecure” section. You will see the following screen:

Define your “Target” URL or your CDN CNAME. In the example below we use the Target URL from our zone:

For an SSL (https) site, choose the “Secure” section. Fill in the same information but put “https://” instead of “http://” at the beginning.

Click on “Save Config”. Magento^® will then flush its cache by default to ensure the static files are served from the CDN. If you are using additional modules for Full Page Caching you might want to clear the cache manually.

If you now go to the frontend of Magento^® and check the page source, you’ll see images, CSS and JavaScript is loaded from the Leaseweb CDN.

Congratulations! Now you’re in business.