Speed up your site with a Magento 2 CDN. Gain essential page-loading performance from superior caching and geographically optimized static web page assets.
Magento 2 CDN Configuration: How to Set Up CDN Access for Magento 2 Store
What is a CDN?
CDN is an abbreviation for Content Delivery Network. As the name implies, it is a network of servers used to serve content to users' web browsers globally in the most efficient manner based on geography. They are typically only used for static resources where it is safe for them to cache a copy of a file and deliver it to multiple users.
A content delivery network (CDN) is an interconnected system of servers that are strategically placed in multiple geographic locations around the world. A CDN improves load times for your website and provides faster delivery of content to numerous users by duplicating the content on multiple servers known as edge servers, and directing the content according a user’s geographic location.
Why Use a CDN?
Using a CDN allows you to reduce traffic load to your site while also improving front end performance by speeding up the loading time for static assets. When a web browser loads a page using a CDN, the bulk of the data transferred will come from a server close to them geographically. CDN services also implement excellent caching of assets that allows them to respond to requests faster than a normal web server typically will. There are several specific terms associated with CDNs.
The Nexcess Edge CDN has 22 points-of-presence around the globe. It is fast by way of advanced caching that prioritizes your most frequently accessed files, making every site visit as fast as possible.
Nexcess Edge CDN
Improve page speed with our purpose-built Content Delivery Network. It is integrated into our platforms for easy use without a ton of configuration complexity.
CDN and CORS (Cross-Origin Resource Sharing)
Before going into the actual setup of a CDN, it is essential understand how modern web browser security handles CDN services. For general purposes, assets on a page can be broken down into two categories based on their URL. The first group is made up of any asset that exactly matches the URL of the page itself that you see in your address bar.
Exact here means that if the page you are on uses https, then the assets must also use https. The same applies for domains using www, where the assets must also be using www. The second group is everything else and is therefore considered cross-origin in nature.
Browsers place several restrictions on cross-origin requests. Without going into great detail here, the most important thing to know is that this will need to be addressed when configuring your site to use a CDN.
The How to resolve CORS errors in Magento 2 multi-stores using a CDN article outlines the necessary changes, which are recommended be done prior to enabling a CDN service.
For more information about CORS in general, the MDN Web Docs (previously known as MDN — the Mozilla Developer Network) provide great documentation on the subject, Cross-Origin Resource Sharing (CORS) - HTTP | MDN.
Your Nexcess CDN Service
The Nexcess CDN service is only available on our cloud platform. To view it, you will need to log in to your control panel following the How to Access Your Nexcess Cloud Control Panel guide.
The information needed is under the “Performance” tab, and specifically, you will need the “CDN Endpoint”. It would be best if you also verified that the domain under “Points To” is the domain you plan on configuring this on. When a web browser sends a request to a CDN node, it will return the cached asset if it has it, and if it does not have it cached yet, the request will be forwarded to whatever you see under “Points To."
Magento 2 CDN: Configuring Your Magento 2 Store to Use a CDN Service
Magento has great support for CDN usage via its base URL system. Specifically, you will be changing the base media URL and base static URL.
Note that changing the base URL will only impact URLs generated by Magento. If you have CMS blocks or pages that use “hard-coded” URLs with your domain name, they will need to be configured manually to use the CDN URL if you want them to take advantage of the CDN.
Because of CORS mentioned above, it is often desirable to not use a CDN on the Magento Admin Panel. However, even when properly configured, there is a subset of functionality in the admin panel that is incompatible with cross origin JavaScript assets. There are two options for mitigating this known incompatibility:
a) Only configure the media URL to use the CDN, leaving JavaScript and CSS out of it, or;
b) Take advantage of Magento’s configuration scopes to give full CDN usage on the front end of the site without impacting the admin panel. You can read about changing scopes in the Changing Scope | Adobe Commerce 2.4 User Guide article.
Changing Scope
The Store View chooser in the upper-left corner of many configuration pages filters the view of the page for a specific scope, and also sets the value of some entities that are used by Commerce. It lists each level in the hierarchy by name, and is used to change the scope to another level. Any settings that represent the current scope are grayed out, so only those that represent the current scope setting are available. The scope is initially set to “Default Config."
With all of the above information in mind, you are ready to configure the site to use your CDN service. To do so, follow these steps:
1. Identify whether or not your site uses the /pub/ directory as its document root following Magento’s recommendation:
Modify docroot to improve security | Adobe Commerce Developer Guide
A simple way to check this is to right-click an image on the site and “Open in a new tab”. The URL in your address bar should either contain /media/ or /pub/media/. If you see /pub/ in the URL, your site is not using /pub/ as the document root, and therefore /pub/ must be included in the URLs you configure shortly.
2. Test a URL as a final confirmation that things will work before configuring Magento to use the CDN. If you did not open an image in the last step, do so now. Then all you need to do is replace your domain in the address bar with the domain details that you saw in your Nexcess Portal under “CDN Endpoint,” leaving the rest of the URL the same.
Where the URL is:
https://www.mydomain.com/pub/media/catalog/product/image.jpg
The URL should be changed to:
https://eadn-wc03-5281657.nxedge.io/cdn/pub/media/catalog/product/image.jpg
Press Enter to load the new URL, and if the image loads, you are ready to proceed. If the image does not load, contact our support team before proceeding.
3. Log in to your Magento Admin Panel.
4. Navigate to Stores > Configuration > Web.
5. Recommended: If desired, select a scope from the scope changer. To prevent the CDN from being used on the admin panel, avoid setting the URLs on the “Default” scope. The scope or scopes you choose here will depend on whether or not you use multiple storefronts and, if so, which of them you want to use the CDN. For simpler single domain applications, you can select the applicable (or only) website scope from the list.
6. Update your base media and static URLs. What you will put here will depend on your CDN endpoint and the usage of /pub/. It is also best to apply the same https URLs to both the “secure” and “insecure” URLs.
For media URLs you should use either:
https://<your_cdn_endpoint>/pub/media/ or https://<your_cdn_endpoint>/media/
Depending on whether or not your URL in steps 1 and 2 contained /pub/. And for static URLs it should be:
https://<your_cdn_endpoint>/pub/static/ or https://<your_cdn_endpoint>/static/
The trailing slash is vital on these links, so ensure you do not forget it. Once these are entered, save the configuration.
7. Clear your website’s cache so that pages are rebuilt using CDN URLs.
Congratulations! Your website is now using a CDN service. If you see any issues, you can revert by removing the changes to the URLs and clearing the cache once more. Do not hesitate to get in touch with our support team to investigate the cause of any issues.
This article only covered a portion of the details related to Content Delivery Networks (CDNs). Our CDN section in the Nexcess Knowledge Base contains additional set of helpful resources and articles.
