Hello Magento Folks👋,

In this tutorial, I will help you to Improve Magento 2 performance by utilizing AWS CloudFront☁️. Let me first illuminate you all about Amazon CloudFront and how it works in improving website performance. Check our previously published article How to Integrate Amazon S3 Cloud Store with Your Magento Store.

Introduction: 

Amazon CloudFront is one type of CDN that stands for a content delivery network. Amazon CloudFront’s name itself says that it is provided by Amazon that delivers static as well as dynamic data, provides APIs at high speed and low latency in the whole world, applications and videos. By integrating the Magento 2 with Amazon CloudFront CDN, you will be optimizing the performance of your Magento 2 store. Let’s Get Started🚀.

Checkout How to Configure Amazon S3 with Magento 2 stepwise solution.

Steps to Configure Magento 2 store with AWS CloudFront☁️:

Firstly, we will request a Magento 2 page from a web browser that has been processed by a server. On average Magento 2 loads 170 scripts per page. Additional loads are experienced for a server CPU and memory when the requests are incoming. This results in a rise in the costing of infrastructure for maintaining an acceptable level of page load time.

The following data is processed when the request is processed on installed Magento 2.4.

PageNumber of RequestsSize, KB
Homepage23688 
Category Page22523.2 
Product Page (Configurable)338348 
CMS Page (Contact Us)114880 

I will illustrate to you all how to configure Magento 2 with AWS CloudFront:

For this, you will need an AWS Account. If you don’t have then create a new one

Log In to the AWS account and open the Services tab and write down CloudFront.

From the popup, Choose CloudFront Global Content Delivery Network suggestion 

1.AWS Management Console

Now, from the AWS CloudFront Distributions page create the location for the Magento static files. 

Tap on the Create Distribution button for creating a web distribution

Now here are 2 steps to follow for creating.

Step 1: Provides 2 delivery method options i.e. Web & RTMP

Tap on getting Started below the Web delivery method option.

2.Select Delivery Method

Static Content Distribution

Now we have to set the static file distribution from the Create Distribution page. 

Make sure you don’t change the specific settings for creating a static content distribution.

Take a reference to the below-recommended settings.

Static Content Distribution
Origin Domain Namemagento24.magecomp.com
Origin Pathpub/static
Origin IDstatic-magento24.magecomp.com
Viewer Protocol PolicyRedirect HTTP to HTTPS
Allowed HTTP MethodsGET, HEAD, OPTIONS
Cached HTTP MethodsGET, HEAD, OPTIONS
Cache Based on Selected Request HeadersWhitelist
Price ClassUse Only US, Canada, Europe
SSL CertificateDefault CloudFront Certificate (*.cloudfront.net)
Distributed StateEnabled

Origin Protocol Policy and Viewer Protocol Policy settings are set to HTTPS if the domain connection is secure, if there is a non-secure connection of your domain then you have to set it to HTTP.

Note: Price Class setting is used only in Europe, Canada, US. 

Choose to Accept, Host, and Origin values for Whitelist Headers from Cache Based on Selected Request Headers 

After all the settings are given for the static distribution, tap on the Create Distribution option.

Here, the OPTIONS HTTP is utilized for the fonts and the HTML templates files are requested from the JavaScript files.

It takes approximately 15 minutes for the AWS CloudFront for creating the new distribution

4.Cloudfront distribution

After creating the distribution the Magento 2 static files should be accessible from the new CloudFront distribution.

5.frontend

Media Content Distribution

Similarly, we have to create the distribution for Magento 2 media files.

From the AWS CloudFront Distributions page tap on the Create Distribution option. Tap on Get Started below the Web delivery method option.

Media Content Distribution
Origin Domain Namemagento24.magecomp.com
Origin Pathpub/media
Origin IDmedia-magento24.magecomp.com
Viewer Protocol PolicyHTTPS Only
Allowed HTTP MethodsGET, HEAD
Cached HTTP MethodsGET, HEAD
Cache Based on Selected Request HeadersNone
Price ClassUse Only US, Canada, Europe
SSL CertificateDefault CloudFront Certificate (*.cloudfront.net)
Distributed StateEnabled

After all the settings are given 

After all the settings are given for the static distribution, tap on the Create Distribution option.

Now, these 2 distributions will be listed on the AWS CloudFront Distributions page.

6.Cloudfront distribution

Check out the new CloudFront Distribution you will be able to access the media files

7.Frontend Media

Apache Configuration

Magento 2 should send precise response headers to permit the requests for static as well as media files from the various domains. 

Now, we have to provide extra Apache information before using the new AWS CloudFront Distributions. 

The Access-Control-Allow-Origin error will be faced for all the static and media files that are requested from the content delivery network or AWS CloudFront if additional header’s responses are absent.

Apache Headers Module

For utilizing the mod_headers module in .htaccess files it is compulsory to enable the Apache headers module.

For this you will have to use the below-given command [Ubuntu]:

For Restarting Apache [Ubuntu]:

The pub/static Instructions

The pub/static/.htaccess file gives by default headers for the static files. Now, these headers need to be adjusted for permitting requests from other domains. 

The pub/static/.htaccess before:

The pub/static/.htaccess after changes:

Note: All the file extension lists in the FilesMatch option are modified and 2 extra extensions are included namely JSON and HTML. For the HTML extension, the Catalog Store settings must be visited again because of the used .html URL suffix for the Categories and Products. 

The pub/media Instructions

The pub/media/.htaccess file has to include the response headers for the images

The mod_headers.c section from the pub/media/.htaccess before:

The mod_headers.c section from the pub/media/.htaccess after:

Magento 2 Configuration

Step 1: Navigate to Stores > Configuration > General > Web > Base URLs (Secure)

8.Magento 2 Configuration

Note: If you have multiple stores, then these changes will be reflected in the specific store only.

9. system-configuration

Step 2: Add AWS CloudFront URLs to the Secure Base URL for Static View Files and similarly Secure Base URL for User Media Files.

10.system-config-web3

Save the Config and refresh the cache from the Cache Management Section.

Goto Magento 2 frontend and review domain name changes of the static and media files.

Domain name changes

CNAME for CDN

In case you desire to give friendly URLs for the CloudFront distributions then the configuration of CNAME records should be done for AWS CloudFront. 

static.magento24.magecomp.com points to d1mi2coqmkv4dg.cloudfront.net
media.magento24.magecomp.com points to d2q46a7mnom7n7.cloudfront.net

Changes in AWS CloudFront 

For the AWS CloudFront Distribution, a new CNAME record should be added. Add the Alternative Domain Names (CNAMEs) by clicking on distribution from the AWS CloudFront Distributions list.

Also, choose the Custom SSL Certificate for the SSL Certificate settings.

12.edit-distribution

Now for this, you have to again create a new SSL Certificate for the custom domain. The AWS Certificate Manager will permit you to create an SSL Certificate in some minutes. Tap to YES, edit the button to save changes. Approximately it will take up to 15 minutes for alteration to be propagated for the distribution.

Domain Changes

Performance Results

Mainly the performance metrics are on the basis of built-in Full Page Cache. Check the results on Pingdom. The page load time involves the rendering of all scripts loaded on a page.

Here during the testing, the minification of the static content is disabled.

PagePage Load Time,

Without CDN

Page Load Time,

With CDN

Homepage2.191 sec1.1 sec
Category Page3.8 sec2.22 sec
Product Page (Configurable)1.9 sec0.8 sec
CMS Page (Contact Us)1.53 sec0.7 sec

Here you can verify that the number of incoming HTTP GET requests are decreased when the webserver with the CDN is configured. It helps in decreasing the usage of CPU and Memory on the server and can serve more numbers of the incoming requests from the users.

Conclusion:

Content Delivery Network for an E-commerce store is a must-have nowadays. Especially, when the business grows and the number of customers increases year-to-year. The AWS CloudFront is a great service for the reasonable pricing and edge locations coverage.

Hence, improve your Magento 2 website performance by configuring Magento 2 with AWS CloudFront. When the business grows and the customers are increased every year then this is very useful for providing an excellent customer experience. 

In case any difficulties in the above steps then let me know in the comment section below I will help you.

Hit 5 ⭐⭐⭐⭐⭐ stars and share↗️ with your Magento business friends. 

Stay connected🔗 and Keep Developing👨‍💻

Happy Reading🙂.

[Total: 6   Average: 5/5]