Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Magento 2 Performance Improvement with Aws Cloudfront
Max Pronko Avatar

Any Magento 2 page requested from a browser is processed by a web server. Magento 2 loads 170 scripts per page on average. All incoming requests add an additional load for a server CPU and Memory. As a result, it increases infrastructure costs to maintain an acceptable level of page load time. That’s when you can delve into the artistry of Magento Performance Audit to uncover optimization opportunities and enhance the efficiency of your Magento 2 store, ensuring optimal performance and reducing infrastructure costs.

I’ve installed Magento 2.2.0 release with a sample data in order to get a number of requests processed. The following table shows the number of static and media files and the size requested on the different Magento 2 pages.

Page Number of Requests Size, KB
Homepage 164 968.91
Category Page 173 764.81
Product Page (Configurable) 180 850.05
CMS Page (Contact Us) 157 671.39

There are different content delivery network services available on the market. Such services speed up content distribution across the world using faster edge locations, available to distribute the content at different pricing options. This tutorial is based on the AWS CloudFront service.

AWS CloudFront

AAs I am a big fan of AWS services, my attention has been drawn to AWS CloudFront over the last couple of years. In order to use AWS CloudFront you should have an AWS Account. In case you don’t have the AWS Account, read the How do I create and activate a new Amazon Web Services account?

Benefits of Integrating AWS CloudFront with Magento 2

Integrating AWS CloudFront with Magento 2 can greatly enhance your eCommerce store’s performance. CloudFront, as a content delivery network (CDN) service, speeds up the distribution of static and dynamic web content like images, videos, HTML, CSS, and JS performance. This is achieved by uploading your content to special data centers, known as edge locations. When users access your website, all the content is delivered from these locations with minimal delay. The benefits include:

  • Improved Load Times: By serving content from the nearest edge location to the user, AWS CloudFront significantly reduces the geographical distance between the user and the content. This results in faster loading times, a crucial factor for user experience and SEO rankings.
  • Scalability and Availability: CloudFront’s extensive network of edge locations around the world ensures high availability and scalability. This means your Magento store can handle high traffic volumes without compromising performance.
  • Enhanced Security: AWS CloudFront offers several security features like SSL/TLS encryption and integration with AWS Shield for DDoS protection, ensuring that your data and transactions are secure.
  • Reduced Server Load: By caching static content at edge locations, CloudFront reduces the load on your Magento server, which can lead to lower infrastructure costs and improved server performance.
  • Seamless Integration with AWS Services: CloudFront integrates well with other AWS services, offering a cohesive and efficient infrastructure for Magento store owners.

These benefits collectively contribute to a better shopping experience for customers, potentially leading to increased sales and customer loyalty.

Configuration Magento 2 Store With AWS CloudFront: Steps

Once you are logged into the AWS Console, open Services tab and type “CloudFront”. Select CloudFront Global Content Delivery Network suggestion from the popup.

Aws Console

On the AWS CloudFront Distributions page we are going to create our first distribution location for Magento static files. Click a Create Distribution button to create a web distribution. There are 2 steps involved into the creation. First step gives us 2 delivery method options: Web and RTMP. Click a Get Started button under Web delivery method.

Choose a Web Distribution

Static Content Distribution

On the Create Distribution page we have to set the distribution for static files. There are a set of required settings needed to be provided in order to create the static content distribution. Some settings should not be changed. Below is a list of recommended settings to be used for this tutorial.

Setting Value
Origin Domain Name magento22.pronkoconsulting.com
Origin Path /static
Origin ID static-magento22.pronkoconsulting.com
Origin Protocol Policy HTTPS Only
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
Whitelist Headers Accept, Host, Origin
Price Class Use Only US, Canada, Europe
SSL Certificate Default CloudFront Certificate (*.cloudfront.net)
Distributed State Enabled

As you can see the Origin Protocol Policy and Viewer Protocol Policy settings are set to HTTPS only because the magento22.pronkoconsulting.com domain is configured to use a secure connection. In case you have the non-secure connection configured make sure to set these settings to HTTP.

Please also note the Price Class setting is set to Use Only US, Canada, Europe. It gives the great distribution coverage and a lower pricing for AWS CloudFront usage.

For the Whitelist Headers setting select the Accept, Host, and Origin values as it is shown below.

Aws Whitelist Headers

Once all settings are provided for the static distribution, click a Create Distribution button.

The OPTIONS HTTP method is used for the Fonts, HTML templates files requested from the JavaScript files.

It takes about 15 minutes for the AWS CloudFront to create the new Distribution.

Aws Cloudfont Created a New Distribution

After the distribution has been successfully created the Magento 2 static files should be accessible via the new CloudFront distribution.

“static” Part is Not Provided

Media Content Distribution

Same steps should be performed to create the distribution for Magento 2 media files. From the AWS CloudFront Distributions page click the “Create Distribution” button, then “Get Started” under a Web delivery method.

Setting Value
Origin Domain Name magento22.pronkoconsulting.com
Origin Path /media
Origin ID media-magento22.pronkoconsulting.com
Origin Protocol Policy HTTPS Only
Viewer Protocol Policy Redirect HTTP to HTTPS
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

Once all settings are provided for the static distribution, click the Create Distribution button. As a result, the 2 distributions should be listed on the AWS CloudFront Distributions page.

Static and Media Distributions in Aws Cloudfront

Media files should be accessible via the new CloudFront Distribution.

Media Files Are Accessible

Apache Configuration

For the content delivery network service Magento 2 should send proper response headersto allow requests for static and media files from different domains. Before the new AWS CloudFront Distributions can be used together with Magento 2, additional Apache instructions should be provided.

Without additional response headers it leads to the Access-Control-Allow-Origin error for all static and media files requested from the AWS CloudFront or other content delivery network.

Access-control-allow-origin Error for All Static and Media Files

Apache Headers Module

Apache headers module should be enabled to use mod_headers module in .htaccess files.
To enable the Apache headers module, enter the following command (Ubuntu):

$ a2enmod rewrite

Restart Apache (Ubuntu):

$ service apache2 restart

The pub/static Instructions

The pub/static/.htaccess file provides default response headers for the static files. These headers should be adjusted to allow requests from other domains.
The pub/static/.htaccess before:


<IfModule mod_headers.c>
   <FilesMatch .*\.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2)

gt; Header append Cache-Control public </FilesMatch> <FilesMatch .*\.(zip|gz|gzip|bz2|csv|xml)

gt; Header append Cache-Control no-store </FilesMatch> </IfModule> 

The pub/static/.htaccess after changes:


<IfModule mod_headers.c>
<FilesMatch .*\.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2|html|json)

gt; 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)

gt; Header append Cache-Control no-store </FilesMatch> </IfModule> 

Note that the file extensions list in the FilesMatch section has been modified and 2 additional extensions are added: html and json. As for the html extension, the Catalog Store settings should be revisited due to a .html URL suffix usage for Products and Categories.

The pub/media Instructions

The pub/media/.htaccess file should also include response headers for images.
The mod_headers.c section from the pub/media/.htaccess before:


<IfModule mod_headers.c>
   <FilesMatch .*\.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2)

gt; Header append Cache-Control public </FilesMatch> <FilesMatch .*\.(zip|gz|gzip|bz2|csv|xml)

gt; Header append Cache-Control no-store </FilesMatch> </IfModule> 

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


<FilesMatch .*\.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2)

gt; Header append Cache-Control max-age=604800 Header set Access-Control-Allow-Origin "*" </FilesMatch> 

After both .htaccess files are updated with additional response headers Magento 2 is ready to serve static and media files from an alternative distributions.

Magento 2 Configuration

Magento 2 has additional configuration settings to control static and media URLs. Navigate to the Magento Admin -> Stores -> Configuration page. From the Configuration page select General -> Web -> Base URLs (Secure) section.

Aws Cloudfront - Magento 2 Configuration

In case you have multiple stores, change the Store View so the configuration changes will affect the specific store.

Aws Cloudfront Configuration for Multiple Store View on Magento 2

Add AWS CloudFront URLs to the Secure Base URL for Static View Files and the Secure Base URL for User Media Files as it is shown below.

Add Aws Cloudfront Urls

Click a Save Config button to make changes in the configuration. Navigate to the System -> Cache Management page and refresh the Configuration and Page Cache cache types.

Navigate to Magento 2 frontend and observe domain names changes of the static and media files.

Magento 2 Frontend with Aws Cloudfront Domains

Magento 2 website has been configured to use CDN for media and static files.

CNAME for CDN

If you would like to have friendly URLs for the CloudFront distributions the CNAME records should be configured for AWS CloudFront. CNAME records creation should not take much time to configure as part of your Domain provider.

As for domain names I prefer to have the following names:

  • static.magento22.pronkoconsulting.com points to d2m7s9s7o7k75u.cloudfront.net
  • media.magento22.pronkoconsulting.com points to d3id53ssc4jfal.cloudfront.net

AWS CloudFront Changes

New CNAME record should be added to the AWS CloudFront Distribution. From the AWS CloudFront Distributions list click on the distribution and supply with the Alternative Domain Names (CNAMEs). Also, select a Custom SSL Certificate for the SSL Certificate settings.

Edit Distribution Settings

You may need to create new the SSL Certificate for the custom domain. The AWS Certificate Manager allows to create SSL Certificate in a couple of minutes. Click a Yes, Edit button to save changes. It may take up to 15 minutes for changes to be propagated for the distribution.

Magento 2 Configuration Changes

With the new friendly domain names for static and media URLs Magento 2 configuration can be adjusted. Navigate to the Navigate to the Magento Admin -> Stores -> Configuration page and update URLs as it shown below.

Adjust Aws Clodufront Configuration Settings

Once you performed necessary changes the domain names should be changed on the Magento 2 frontend.

Applied Changed on Magento 2 Frontend

Performance Results

The performance metrics are based on the built-in Full Page Cache. Page Load Time metrics has been taken from Pingdom. The page load time includes rendering of all scripts loaded on a page. The minification of the static content is disabled for the test.

Page Page Load Time,
Without CDN
Page Load Time,
With CDN
Homepage 1.2 sec 0.6 sec
Category Page (Men -> Tops) 1.35 sec 0.66 sec
Configurable Product Page (Logan HeatTec® Tee) 1.35 sec 0.6 sec
CMS Page (Contact Us) 1.3 sec 0.6 sec

Number of incoming HTTP GET requests to the web server with the CDN configured has been decreased. It allows to decrease CPU and Memory usage on the server and serve more incoming requests from users.

Summary

Content Delivery Network for an ecommerce store is a must have nowadays. Especially, when the business grows and number of customers increases year-to-year. Using AWS for Magento 2 is a great method for the reasonable pricing and edge locations coverage.

This post was written for Atwix blog by Max Pronko, CEO & Founder of Pronko Consulting, Chief Technical Officer at TheIrishStore and GiftsDirect.

Max with his team of Magento enthusiasts won the Best Magento 1 to Magento 2 Migration Award at the Magento Imagine 2017. As one of the most active developers on a market and in the Magento Community, he launched Magento 2 blog, and Magento DevChannel, where he shares his knowledge, experience and the best practices in the Magento field.

FAQ

  • Why should I consider integrating AWS CloudFront with my Magento 2 store?
  • Is it complex to set up AWS CloudFront for Magento 2?
  • How does AWS CloudFront handle Magento 2’s dynamic content, such as user-specific data or personalized content?
  • Will integrating AWS CloudFront affect my existing Magento 2 configurations or extensions?

Read more: