Web Performance Optimization with Amazon CloudFront for SaaS

Our Customer

Healthera operates a leading UK healthcare marketplace that provides patients with medicines, healthcare services and products through the largest digital platform of pharmacies and GPs, including national chains and independent providers.

The Obstacles They Faced

Healthera, in partnership with a leading European pharmacy network, sought to leverage its API for the network’s web application built on React.js/Next.js. Their obstacles included mitigating latency issues in the app’s performance, navigating the complexities of establishing an efficient CI/CD pipeline, enabling scalability for potential traffic growth, and minimizing infrastructure costs.

How We Helped

By leveraging the power of Amazon CloudFront (as well as other AWS tools) implemented to the application by our professionals, the client gained improved user-friendliness and user experience. Furthermore, we ensured scalable infrastructure and reduced IT costs through strategic technology choices, benefitting both the client and their customers.

Website performance improvement

In general, we solved the problem of improving the performance of the client’s website and partners’ applications using Amazon CloudFront. CloudFront helped us speed up static content such as images, animations, CSS, JavaScript, and the ReactJS apps to end users worldwide.

We configured a CloudFront distribution with a source to an S3 bucket with a website. Additionally, the ability to integrate CloudFront with Lambda@Edge allowed us to rewrite client requests and add the .html suffix, which is necessary for proper processing on the Next.js side.

With the new integration, the client expects a surge in traffic and we advised increasing the amount of running tasks in the ECS cluster responsible for processing requests to the api.healthera.co.uk endpoint.

For the pharmacy network host we recommended creating a CNAME record and directing it to the CloudFront distribution. In order to efficiently route traffic to the root domain through CloudFront, we suggested setting up AWS Global Accelerator (GA) and creating two A records to IPs provided by it. Additionally, we configured Global Accelerator (GA) to direct traffic to the existing AWS ALB (Application Load Balancer) where a new listener rule was established, enabling a 301 redirect to the root domain for URLs without the “www” prefix.

Dedicated CI/CD pipeline for SPA

The client decided to sell a ready-to-use version of their web application as a SaaS solution, which needed the capacity of the rapid delivery at scale, targeting the onboarding of 10 or 15 new clients every day. It was imperative that the onboarding process required minimal involvement of non-tech skilled clients while also keeping infrastructure costs low.

What we did was create a CI/CD pipeline that deploys a React single-page application (SPA) to static S3 hosting. The deployment pipeline we implemented using Jenkins as this is the main build tool for Healthera’s workloads.

App’s infrastructure cost optimization

Using CloudFront with S3 bucket proved to be a cost-effective solution by minimizing data transfer expenses. It was achieved through caching frequently used content in edge locations, consequently reducing the volume of requests directed to the S3 bucket. As a result, data transfer costs were reduced, and application performance improved by reducing latency and load times for users located far from the S3 bucket.

Web Performance Optimization with Amazon CloudFront – Architecture Diagram

The role of Amazon CloudFront in the project

Leveraging Amazon CloudFront:

• Enhances app availability by caching content in edge locations which reduces server workload
• Enables quick content delivery through the usage of HTTP or HTTPS protocols
• Facilitates GEO targeting service for content delivery to specific end-users
• Provides high security with the ‘Content Privacy’ feature
• Sustains cost-efficiency as it only charges for the data transfer
• Ensures significant productivity gains because the service is easy to use.

Improved user experience and customer satisfaction

What was made during the project led to significantly faster loading times of the application and its better responsiveness, so the app became notably more user-friendly.

Organically increased customer base

Consequently, the abovementioned improvements have propelled the client’s platforms up in SEO rankings, attracting more organic traffic and, in turn, a larger customer base.

Technical scalability for future growth

Expected traffic increase as well as further enhancing of solutions’ users needs in flexible and controllable extending of the computing capacity of the application. So we thought out and ensured this ability in advance.

Reduced expenses for the IT infrastructure

Since the client provides the web application as a SaaS solution, the usage of Amazon CloudFront with Amazon S3 instead of ECS resulted in significant cost efficiency, which in turn ensures lower prices for SaaS clients.