The Steps For Set Up A CDN (Amazon CloudFront) in Magento

A key metric for an online business is its loading speed. The website speed depends on numerous factors, but the most important is the distance between the website hosting server and the client. This problem was unfathomable before the Content Delivery Network (CDN). A CDN lets the customer download content from a nearby server instead of the website hosting server. This trims down the latency, enhancing the website speed to a considerable extent. Amazon CloudFront is Amazon’s (CDN) created to deliver the content of all types securely to the clients.

The Need of CDN

The assets of websites are distributed to different locations on the Internet with the help of a CDN, which in turn, boosts the website’s speed. The assets include JavaScript and CSS files, along with images. This concept is crucial for Magento stores as they employ countless JavaScript and CSS files, especially after store owners hire magento developer for customizing the store. So, any way to transport this faster is more than welcome. The website content is delivered from the website hosting server by default, which has quite a few stumbling blocks:

• The farther the user from the website hosting server, the more the latency associated with each asset.The server might not be honed to display images efficiently.

• While downloading multiple assets, the client’s browser has to wait until all the assets are downloaded. This concern is handled by the domain sharding concept.

• An overloaded web server takes indefinite time to respond to the request of an asset.

• The CDN resolves all the above-mentioned issues by addressing the problem at the core. Let us go through the steps involved in setting up Amazon’s CDN in Magento.

Steps to Setup new CDN

The online stores hire magento developer online to include Amazon CloudFront with their stores. However, they can do it themselves by going through these steps. First of all, an AWS account needs to be set up. After this, a Distribution is created, followed by setting up Access-Control-Allow-Origin for static assets. Then, a new URL is created for these assets and static media. Let us explore these steps further.

Step 1: Logging in to an AWS account

The foremost requirement for setting up an Amazon CloudFront is creating up an AWS account and activating it by feeding the credit card number in its payment section. After logging into the system, choose CloudFront from the services drop-down list. Now, the Create Distribution button needs to be hit. Depending on the asset types, different distribution needs to be created in CloudFront to enable domain sharding. Domain sharding allows parallel downloads from sub-domains allowing quicker downloads. Various sub-domains are used for different types of assets.

Step 2: Creating Distribution

Now the Origin Settings configurations are done. The website domain name is entered in the Origin Domain Name field. The Amazon ID used to uniquely identify the store is specified in the Origin ID field. The path of static assets needs to be entered in the Origin Path field. The protocol of Magento store, i.e., HTTP or HTTPS, is selected in the Origin Protocol Policy field. For making both the protocols compatible, select Match Viewer instead of HTTP or HTTPS. The cache settings can be changed using the Default Cache Behavior Settings tab. The Path Pattern should be set to * to permit cross-origin resource sharing. The relevant protocol is selected from the Viewer Protocol Policy field. The appropriate methods should be selected from the Allowed HTTP Methods field. It is better to choose all the methods mentioned in the last option. Now, Distribution Settings need to be configured. The sub-domain to be used to replace the domain is entered in the CNAME field. The sub-domain should point to *.cloudfront.net in this case. Now, press the Create Distribution button, and the deployment process starts.

Step 3: Setting Up Access-Control-Allow-Origin

Prior to finishing the final stage of the configuration of Magento, the website hosting server settings need to be tweaked to make sure that it permits the browsers to download different assets from different domains. The browsers otherwise identify this as a security threat, so this is done intentionally to inform the browsers that it is not a security risk. It is possible with the use of header Access-Control-Allow-Origin. This can be configured using the hosting support providers or the system admin using either the base configuration settings or the htaccess.

Step 4: Creating a new URL for static assets

Now, the final stage involves mentioning the domain of static assets created earlier to Magento. Specify the domain name created for static files in Configuration>Web>Base URLs. Mention the domain name created for media files in Configuration>Web>Base URLs (Secure). Now you are almost done once you save the configuration files and clear the installation cache. Now visit the front end to see the changes in domains. One can also verify the CDN implementation using tools like webpagetest. Any requests to the Magento store will now be redirected to the recently configured Amazon CloudFront CDN.

Concluding Remarks

The performance and speed of the Magento store can be considerably improved by setting up the Amazon CloudFront CDN. The stores having presence spanning multiple countries or states need to use a CDN for flicker-free websites. To conclude, CDN not only ensures that the website is loaded quickly; it also reduces the cart abandonment rate significantly. In addition to these benefits, it increases the conversion rate as well.