Posted by Fastly in Magento (Magento Fastly, in other words) enables online businesses that use Magento to enhance customer experience and increase conversion rates by providing an edge cloud platform that offers security and delivery service at the network edge, which is closer to your customers.
But what exactly does Magento Fastly bring about? How is it beneficial for your business? This article provides all information to answer these questions. Later on, we will provide a detailed tutorial of how to set up Fastly for Magento stores.
Now, let’s get started!
About Fastly
Fastly, founded in 2011, is a cloud computing service provider. The core product of Fastly is the edge cloud platform designed for developers to expand their main cloud infrastructure to the network edge, making it as close to the users as possible, creating memorable experiences at a global scale.
Besides, Fastly also provides other excellent services: Content Delivery Network (CDN), image optimization, video & streaming, cloud security, to name but a few. All of which has satisfied businesses worldwide, which is proved by the following numbers:
- More than 800 billion requests per day
- Over 420 billion images optimized and delivered per month
- More than 15 trillion log lines delivered per month
- Over 70 million lines of edge code deployed
- Over 95% customer satisfaction score
Fastly is what developers need to change the way the world experiences online websites to transform human lives in this 4.0 world.
Magento Fastly – What Does It Bring About?
Want to optimize your Magento storefront? No problem at all. Magento and Fastly have a longstanding relationship that brings about a powerful set of available features for you. Fastly edge cloud platform is a part of Magento Enterprise Cloud Edition technology stack, which will contribute to improving customer experience on an online website.
More specifically, Magento Fastly will be extremely advantageous for many reasons.
Improvement of Website & Mobile Performance
Enhancing performance is extremely important in terms of the online sector. According to Google, 53% of customers will immediately leave a web page if it takes longer than 3 seconds to load. If that is the case, you will lose a large number of potential customers and consequently lose sales.
With Fastly, that will not happen. Fastly helps to fasten your Magento storefront’s web and mobile performance by doing full page caching at the edge.
Better Inventory Management
Out-of-stock items are what businesses want and don’t want. If an item is sold out, it means that their products are popular with their customers. But on the other hand, UPS research has shown that nearly 28% of customers will abandon their whole carts at checkout if they find out one of their target items is out of stock.
This situation is unavoidable but can be managed effectively. Fastly’s Instant Purge helps to manage inventory better. You can update content within 150 milliseconds globally. As a result, if there is any modification on your website, the Fastly Magento extension will instantly invalidate.
Storefront Management Simplification
You can simplify storefront management with a two-tier cache with Fastly, instead of having to manage multiple layers as previously. The dynamically positioned points of presence (POPs) network of Fastly serves content closer to your customers, while Fastly’s Origin Shield simplifies your origin requests.
Fastly’s UI for Magento also contains much more functionality, including end-user blocking, CORS header control, and integration with other content management systems such as WordPress to optimize your storefront.
High Conversion Rates
We have mentioned that Fastly also provides image optimization service, which contributes to improving conversion rates. Mainly due to the images, the website’s weight will be so large that it takes a lot of time to load. Sometimes, it will collapse and negatively affect engagement.
According to Splashlight, nearly 50% of U.S consumers consider high-quality product image one of the most influential factors in their decisions.
Fastly’s Image Optimizer helps to optimize the image on your site. It allows you to serve images more fastly and cost-effectively. You can also edit images, from cropping, resizing to adjusting quality, change orientations, and convert format on demand.
Always Available Storefront
Availability at any time is essential. Customers might feel frustrated if they cannot get access to your website when they want. And even worse, you will create an opportunity for your competitors to take your customers away.
You have to minimize downtime because of the enormous traffic as much as possible. And Fastly can help. Fastly’s high-performance network is developed to absorb traffic spikes but still protect your site from disruptive distributed denial of service (DDoS) attacks with unique Origin Shield features.
How to Set Up Fastly for Magento 2?
Magento Commerce Cloud requires Fastly, which is used in Staging and Production environments. It works with Varnish to provide rapid caching capabilities and a Content Delivery Network (CDN) for static assets.
To set up Magento 2 Fastly, please complete the following steps.
Get Fastly Credentials
Magento adds your project to the Fastly service account for Magento Commerce Cloud during project provisioning and creates Fastly account credentials for the Starter master and Pro Staging and Production environments. Each environment has different credentials.
Follow the following steps to view your Fastly credentials of each environment:
- IaaS-mounted shared directory: On Pro projects, use SSH to connect to your server and get the Fastly credentials from the /mnt/shared/fastly_tokens.txt file.
- Local workspace: From the command line, use the Magento Cloud CLI to list and review Fastly environment variables.
magento-cloud variable:get -e <environment ID>
- Project Web UI: Check the environment variables below in the Environment configuration variables section.
CONFIG__DEFAULT__SYSTEM__FULL_PAGE_CACHE__FASTLY__FASTLY_API_KEY
CONFIG__DEFAULT__SYSTEM__FULL_PAGE_CACHE__FASTLY__FASTLY_SERVICE_ID
Upgrade Fastly Module
The Fastly CDN version for Magento 2 module needs to be the latest to enable Fastly caching at the next stage.
- Change to the root directory of your Cloud environment.
- Use Composer as follow to check the current module version:
composer show *fastly*
- If the installed version is not the latest, upgrade the module.
- In your local integration environment, use the information below to update the module:
module name: fastly/magento2
repository: https://github.com/fastly/fastly-magento2.git
- Push your updates to the Staging environment.
Enable Fastly Caching
Prerequisites
- Whether your Fastly CDN for Magento 2 module is the latest version or not. If not, please upgrade it.
- Fastly credentials for Staging and Production environments.
Enable Fastly Caching
- Log in to the Magento Admin UI
- Go to Stores > Settings > Configuration > Advanced > System and expand Full Page Cache
- In the Caching Application, untick the Use system value, then select Fastly CDN on the dropdown list like the image below.
- Expand Fastly Configuration and select caching options.
- After configuring, click on Save Config.
- Clear the cache according to the notification.
- Repeat the whole process if you want to continue configuring on-demand.
Test The Fastly Credentials
- On the Magento Admin UI, go to Stores > Settings > Configuration > Advanced > System > Fastly Configuration.
- Enter the Fastly service ID and API token values for your project environment.
- Click on Test Credentials to start testing.
- When the test succeeds, click on Save Config, then clear the cache.
Note:
- If the test fails, please go back to Fastly Configuration and check whether the ID and API token values match the current environment’s credentials.
- If the test fails again, please turn in a support ticket or contact your Customer Technical Advisor (CTA).
- Go to Change Fastly credentials if you want to change the API token credential.
Upload VCL to Fastly
After enabling Fastly for Magento 2 module, you need to upload the default VCL code to the Fastly servers. This code offers a collection of VCL snippets that define configuration settings for your Magento Commerce Cloud to allow caching and other Fastly CDN services.
- Go to Fastly Configuration.
- Click Upload VCL to Fastly as following
- When the upload is completed, refresh the cache according to the notification.
Provision SSL/TLS Certificates
Magento provides a Domain-Validated Let’s Encrypt SSL/TLS certificate for each Pro Production, Staging, and Starter Production environment to serve secure HTTPS traffic from Fastly.
To enable certificates for your environments, Magento automation completes the following:
- Domain ownership validation.
- A certificate protecting specified top-level and subdomains provision for your Magento stores.
- Certificate uploading to the Cloud environment when the site is live.
Update DNS Configuration with Development Settings
However, DNS configuration needs to be updated for the automation above. When you update the configuration, Magento automatically provides the required certificates and uploads them to your Cloud environments. The process can last up to 12 hours.
Therefore, you need to update the DNS configuration several days beforehand to prevent delays.
Prerequisites
- Fastly caching is enabled.
- The VCL code has been uploaded.
- Provision a list of top-level and subdomains for each environment to your CTA.
- Receive confirmation that the specified domains have been added.
- On Starter projects, add the domains to your Fastly service configuration.
Update DNS Configuration
- Add CNAME records to point pre-production URLs to the Fastly service: prod.magentocloud.map.fastly.net.
- Add ACME challenge CNAME records for domain validation and pre-provisioning of Production SSL/TLS certificates.
- Update the Magento base URL:
- Use SSH to sign in to the Production environment.
magento-cloud ssh
-
- Use the Magento CLI to change the Magento base URL of your store.
php bin/magento setup:store-config:set --base-url="https://mcstaging.your-domain.com/"
- Restart the web browser.
- Test the website.
Test Fastly Caching
After updating the DNS configuration, you need to verify whether the Fastly cache works or not. To do this, we use the cURL command.
- In a terminal, apply the following cURL command code line to test your live site:
curl -vo /dev/null -H Fastly-Debug:1 https://<live-URL>
- In the response, please verify the headers. The following headers should appear in the response:
< Fastly-Magento-VCL-Uploaded: yes
< X-Cache: HIT, MISS
Final Thoughts
That’s all we want to provide about Magento Fastly (Magento 2 Fastly) in this article. We hope that this tutorial blog will help you optimize your online store, improve customer experience, and gain more sales. If you want us to deliver more articles about related topics, please don’t hesitate to contact us.
Thanks a lot for reading!