Back

How to Implement an Image CDN with Miva Merchant

Read on to learn more...

By Miva | March 18, 2016
Miva + content delivery network (CDN)

Share

  

Want to read this blog offline?

No worries, download the PDF version now and enjoy your reading later...

Download PDF

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:Sample Report of Data Served

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.Website Request origin pull

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.MaxCDN Starter Plans Pricing

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 ZonePull Zones

 

You then give it a name, Origin server URL and a labelSettings for Shares SSL

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.comimage03

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:

Miva CDN update Miva domain settings

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:

Miva CDN update Miva domain settings example

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.Miva CDN update Miva domain settings icon stop displaying

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 support@miva.com 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 “*”;

}

Miva CDN update Miva domain settings additional ngnix directives

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:Miva CDN update Miva domain settings clear cache

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.

Back to top

Author's Bio

Miva

Miva offers a flexible and adaptable ecommerce platform that evolves with businesses and allows them to drive sales, maximize average order value, cut overhead costs, and increase revenue. Miva has been helping businesses realize their ecommerce potential for over 20 years and empowering retail, wholesale, and direct-to-consumer sellers across all industries to transform their business through ecommerce.

More Posts Like This

Stay in the Loop

Sign up to receive the latest in ecommerce news, articles, whitepapers, and more.

OR CALL 800.608.MIVA

  • Facebook icon
  • Twitter icon
  • Instagram icon
  • LinkedIn icon