How to Implement an Image CDN with Miva Merchant

CDN-1

Miva Merchant’s flexible and open architecture gives you the choice to to serve all your static assets including images, css and javascript from any 3rd party Content Delivery Network (CDN).

The main benefit of serving your images and other static assets from a CDN mainly revolve around website speed. A Content Delivery Network typically has a dozen or more data centers located around the world that are used to cache your content and serve it from the closest data center to the request. This reduces latency which is the time it takes for the request to travel over the internet to your Miva Server.

The other benefit is server performance. Because your web server is only serving a fraction of your static files, it frees up server resources for other requests, potentially giving the ability to handle more traffic with the same server resources.

Most CDNs offer other nice benefits as well such as a reporting dashboard and customized cache controls.

Sample Report of Data Served:

image01

Origin Pull

So how does a CDN actually get your files to cache? Most CDNs offer something called an Origin Pull. The “Origin” is your Miva server. This is where the master files actually live. When you setup a CDN you typically give it a URL or IP address to tell it where your files should be pulled from.

You then route all incoming requests through the CDN. If a request come in for a image or other static file the CDN will first see if it has a version of that file cached locally at one if its data centers. If it does, it uses that file saving a trip back to the origin server. If it does not have a version of that file cached, it then routes the request back to the origin server to get the file.

WebsiteRequest

Because CDNs only cache static content like image, css or javascript, when a request comes in for a Miva page, that request just gets forwarded on to your Miva server to process just like it normally would. In addition for this tutorial, we are only changing the URL for the Graphics, so regular requests to Miva pages bypass the CDN altogether. 

Step by Step Instructions

There are many CDNs available to use, however for this tutorial, I’m going to be using a Content Delivery Network service called MaxCDN. To get started I signed up for their base plan which costs $9/month and includes 100Gb of bandwidth per month. You’ll want to pick the plan based on your existing bandwidth usage.

image04

Adding a Zone

MaxCDN requires you to create a “Pull Zone” which is just their name for an unique Origin Server.

To do this I clicked on Zones, then Create Pull Zone

image09

You then give it a name, Origin server URL and a label

image02

Once my zone is created it will give you a unique URL on their system which is what you will need to add to Miva Domain Settings in a later step. It should look something like this:

mivaorigin.gooddogpawprints.netdna-cdn.com

However, because your Miva store needs to be able to server content over SSL, we’ll also need to set this up well.

Setup SSL

Under the EdgeSSL tab, click on Shared SSL and click “Enable.” This will generate you a secure URL which you can use to server traffic over https.

mivaorigin-gooddogpawprints.netdna-ssl.com

image03

Update Miva Domain Settings

Now that I have my two URLs from MaxCDN which point back to my Miva Server, I can update Miva Domain Settings to use these URLs.

Under Domain Settings, Site Configuration, there are two fields you need to update:

Base URL for Graphics

Secure Base URL for Graphics

By default they should look something like this:

image07

These fields tell Miva where to look for graphic and other assets (css, JavaScript) on the server. These values are also used to set the basehref value on your websites front end. If you view the source of your Miva page you would see this tag in the head:

<base href=”https://www.gooddogpawprints.com/mm5/” />

To use the CDN we simply update these to fields to the URLs provided by MaxCDN. Keep in mind that you will want to keep the /mm5/ at the end of the URL.

Here is what my settings now look like after the changes:

image08

All other Miva domain setting can stay the same.

Once you click update, you should notice something off in the Miva admin. All your icons will stop displaying.

image10

The reason for this is because all the icons in the Miva admin (and potentially on your website as well) are actually font icons. Font icons adhere to the “Same Origin Policy”. To fix this we need to tell the server to add a header to each request to allow the fonts to be loaded from a different URL. You can read more about this here: https://davidwalsh.name/cdn-fonts

Because your Miva server uses nginx in addition to apache, a change will need to be made to your nginx configuration file which can only be done by our Miva Support Team. To request this change, send an email to [email protected] asking them to add the following code to your nginx configuration file

 

location ~ \.(ttf|ttc|otf|eot|woff|woff2|font.css|css)$ {

add_header Access-Control-Allow-Origin “*”;

}

image11

You can also do this step first before you update domain settings in Miva to use your CDN URLs to avoid breaking the admin or website icons.

The last thing you want to do is clear the cache in MaxCDN:

image06

It usually takes a minute or two to fully update, but once it does your icons should re-appear on your website and in the Miva admin.

End Results

So now the CDN is serving all the static content what performance does this get us? Here are some metrics for my test store for before and after.

Page Load Times Without CDN

Homepage – 1.22, 1.20, 1.53, 1.25 = 1.30 average

Category – 1.06, 1.13,1.54, 1.25 = 1.24 average

Product – 1.69, 1.50, 1.70, 1.56 = 1.61 average

 

Page Load Times With CDN

Homepage – 979, 1.31, 1.15, 1.04 = 1.11 average

Category – 1.38, .905, 1.29 .928 = 1.12 average

Product – 1.33, 1.32, 1.13, 1.15 = 1.23 average

 

With the CDN the the pages loaded:

Homepage = 15% Faster

Category Page = 10% Faster

Product Page = 23% Faster

It is worth noting that I’m based in San Diego and the Miva Server is located in Florida so the majority of this performance benefit is the latency efficiency i’m getting by having local versions of assets cached closer to me.

Final Thoughts

Adding a CDN to your Miva Store is a great way to increase the speed of your website by caching and serving your static content from a network of servers located around the world. Most CDNs are relatively inexpensive and the setup can typically be done in a couple hours.

Subscribe to Our Updates

Get regular tips, how-to articles, ecommerce-related news and event updates.