Magento 2.0: StackPath CDN Setup Guide

Magento is a modern cloud commerce platform with an open-source ecosystem. This article will show you how to setup StackPath with websites utilizing the Magento 2 CMS. This guide assumes you have created a StackPath account and a Site.

This article will walk you through how to perform a static assets integration, which does not support the use of the StackPath Web Application Firewall (WAF). If you’re looking to maximize security by using our CDN with the WAF, please refer to the CDN & WAF integration guide.

Preparation

Before you begin, we highly recommend you test the performance of your site using Google Page Speed or Pingdom Tools. You can test your site now and after setting up the plugin for a before and after performance comparison.

Also, be sure to copy your Edge Address for use in step 5 below. 

Integration

Please follow these steps in order to integrate the CDN into your Magento website.

1. Log into the StackPath Control Portal
2. Log into the Magento 2 administrative website
   
3. Go to Stores -> Configurations
   
4. Under General, select the Web option
   
5. Add your Edge Address to the following fields:
   1. Set the (Secure) Base URL for Static Files to
      http(s)://foo.stackpathEDGEADDRESS.com***/pub/static/
   2. Set the (Secure) Base URL for User Media Files to
      http(s)://foo.stackpathEDGEADDRESS***/pub/media/
      

      Please replace foo.stackpathEDGEADDRESS*** with the StackPath Edge Address and be sure to specificy the correct protocol for the Origin Server (http or https).   

The built-in Magento rewriting module also includes static HTML pages when it does rewriting. This is great for performance, but browser security policies require additional headers to be passed over the CDN in order for those pages to be loaded over us. Please contact support for assistance with this. 

Validation

Checking if CDN enabled is really simple. 

1. Purge the browser cache or use a Private or Incognito window.
2. Open the website
3. Right-click anywhere on the page
4. View source code
   
5. Check the source code for the Edge Address
6. If you integrated CDN properly you will see Edge Address showing in your page source. 

What to do if pages look broken

Sometimes when integrating a CDN, pages will fail to load images or styles. Typically, this is related to a typo or misconfiguration of the Edge Address in the Magento configuration.

StackPath recommends you re-check the settings in step 5 above, but skip adding any information for the (Secure) Static Files and User Media fields: 

1. Login to Magento control panel
2. Go to Stores -> Configurations
3. Under General, select the Web option
4. Remove everything from following fields:
   1. Remove everything from (Secure) Base URL for Static Files
   2. Remove everything from (Secure) Base URL for User Media 
      (Both fields should be empty now)
5. After above steps purge browser cache and make sure that your website is loading properly

Test Speed And SEO

At this time, you should perform another speed test by using Google Page Speed and Pingdom Tools.

Compare the before and after tests and note that it can take one to seven days for your site to reflect the performance improvements of a CDN. Both of these test sites also will give you SEO recommendations that you can follow.