A Content Delivery Network, or CDN, reduces the load on your server by hosting static cached content on globally distributed servers. It provides a local Point of Presence that lowers data transfers and response times.
Let’s learn how to set up a CDN in Magento 2 below to offer your customers a better user experience. We’re using Magento 2.4.1 for this tutorial.
Recommendation
Before we begin, we recommend you test your website performance by using Google Page Speed or Pingdom Tools. After setting up the CDN to work with your Magento store, you can test page load time again and do a before and after comparison.
This guide assumes you’ve already configured a CDN to work with your server. We’ll be covering how to install a CDN in Magento 2.
How to Set Up a CDN in Magento 2
- Go to the Magento admin sidebar and navigate to Stores > Settings > Configuration.
Navigate to Stores > Settings > Configuration - On the “Configuration” page, expand the General section in the left panel and select Web.
Expand the General section in the left panel and select Web - Select the appropriate Store View on the upper left side.
Select the appropriate Store View on the Configuration page - Expand the Base URLs section and configure the following fields:
Base URL for Static View Files: Enter the URL of the location on the CDN where static view files are stored.
Base URL for User Media Files: Add the URL of the JavaScript files on the CDN.
Note that the URLs will depend on if you’ve installed your Magento 2 store with or without pub in the path. You can leave these fields empty or start the URL path with the {{unsecure_base_url}} placeholder.
Expand the Base URLs section and configure Base URL for Static View and User Media files - Expand the Base URLs (Secure) section and configure the following fields:
Secure Base URL for Static View Files: Add the URL of the location on the CDN where static view files are stored.
Secure Base URL for User Media Files: Enter the URL of the JavaScript files on the CDN.
The above URLs must start with “https://”. You can leave these fields empty or start the path with {{secure_base_url}} placeholder.
Use Secure URLs on Storefront: Set the field to Yes to improve security.
Use Secure URLs in Admin: Change the field from No to Yes to enhance security.
Enable HTTP Strict Transport Security (HSTS): Select Yes if you want your Magento store to display only secure HTTPS page requests.
Upgrade Insecure Requests: Select Yes to upgrade insecure HTTP requests to secure HTPPS.
Expand the Base URLs Secure section and configure Secure Base URL for Static View and User Media files and other fields to enhance security - Click on the Save Config button on the top right side.
Click the Save Config button on the Configuration page - Go to Systems > Cache Management and click on the orange Flush Magento button on the top right.
Click the Flush Magento Cache button on the Cache Management page
How to Check if CDN is Enabled in Magento 2
Follow these steps to check if the CDN is working:
- Clear browser cache.
- Open your website and right-click on the page.
Right-click on any frontend page and then click on View Page Source - Click on View Page Source, and a new window showing your site’s HTML will pop up.
- Browse the HTML and search for static assets like .css, .png, and .js. You’ve integrated CDN successfully if you see a CDN URL that you set up while integrating CDN to your Magento store.
Note: If the product images and styles fail to load on the frontend, check for a typo in the URLs of static media and user media files.