How to Improve Magento 2 Performance with AWS CloudFront?

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.

Page	Number of Requests	Size, KB
Homepage	236	88
Category Page	225	23.2
Product Page (Configurable)	338	348
CMS Page (Contact Us)	114	880

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 

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.

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 Name	magento24.magecomp.com
Origin Path	pub/static
Origin ID	static-magento24.magecomp.com
Viewer Protocol Policy	Redirect HTTP to HTTPS
Allowed HTTP Methods	GET, HEAD, OPTIONS
Cached HTTP Methods	GET, HEAD, OPTIONS
Cache Based on Selected Request Headers	Whitelist
Price Class	Use Only US, Canada, Europe
SSL Certificate	Default CloudFront Certificate (*.cloudfront.net)
Distributed State	Enabled

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

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

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 Name	magento24.magecomp.com
Origin Path	pub/media
Origin ID	media-magento24.magecomp.com
Viewer Protocol Policy	HTTPS Only
Allowed HTTP Methods	GET, HEAD
Cached HTTP Methods	GET, HEAD
Cache Based on Selected Request Headers	None
Price Class	Use Only US, Canada, Europe
SSL Certificate	Default CloudFront Certificate (*.cloudfront.net)
Distributed State	Enabled

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.

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

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]:

$ a2enmod rewrite

For Restarting Apache [Ubuntu]:

$ service apache2 restart

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:

<code class="xml">
<IfModule mod_headers.c>
   <FilesMatch .*\.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2)$>
       Header append Cache-Control public
   </FilesMatch>

   <FilesMatch .*\.(zip|gz|gzip|bz2|csv|xml)$>
       Header append Cache-Control no-store
   </FilesMatch>
</IfModule>
</code>

The pub/static/.htaccess after changes:

<code class="xml">
<IfModule mod_headers.c>
<FilesMatch .*\.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2|html|json)$>
   Header set Cache-Control "max-age=604800, public"
   Header set Access-Control-Allow-Origin "*"
   Header set Access-Control-Allow-Methods "GET, OPTIONS"
   Header set Access-Control-Max-Age "604800"
   Header set Access-Control-Allow-Headers "Host, Content-Type, Origin, Accept"
</FilesMatch>

   <FilesMatch .*\.(zip|gz|gzip|bz2|csv|xml)$>
       Header append Cache-Control no-store
   </FilesMatch>
</IfModule>
</code>

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:

<code class="xml">
<IfModule mod_headers.c>
   <FilesMatch .*\.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2)$>
       Header append Cache-Control public
   </FilesMatch>

   <FilesMatch .*\.(zip|gz|gzip|bz2|csv|xml)$>
       Header append Cache-Control no-store
   </FilesMatch>
</IfModule>
</code>

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

<code class="xml">
<FilesMatch .*\.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2)$>
   Header append Cache-Control max-age=604800
   Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</code>

Magento 2 Configuration

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

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

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

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.

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.

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.

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.

Page	Page Load Time, Without CDN	Page Load Time, With CDN
Homepage	2.191 sec	1.1 sec
Category Page	3.8 sec	2.22 sec
Product Page (Configurable)	1.9 sec	0.8 sec
CMS Page (Contact Us)	1.53 sec	0.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🙂.

Subscribe to Notifications