Website Performance Optimization with Amazon CloudFront for SaaS

Explore how Romexsoft provided website performance optimization for                                                                                                                       HealthTech SaaS with Amazon CloudFront.

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.

 

Web Performance Optimization from Infrastructure and Deployment Perspectives

Healthera has engaged with a leading European network of independent pharmacists with over 1,000 member pharmacies across the UK and stores in 9 European countries. The pharmacy network wanted to utilize Healthera’s API and build their web application using React.js/Next.js frameworks on top of it.

Moreover, the DNS configuration of the network domain is managed outside of AWS on their side but the web application has to be launched in Healthera’s AWS account.

So Healthera as our client asked us to assist with this project from the AWS infrastructure and deployment perspectives. Here are the actual challenges we were tasked with addressing:

  • Improving the app performance by reducing latency and optimizing load times for users;
  • Developing a CI/CD pipeline that deploys a React.js SPA (single-page application);
  • Ensuring the app’s scalability and optimal performance for expected traffic increase;
  • Reducing application infrastructure costs (e.g. data transfer expenses).

 

Website Performance Optimization Solution with Cloudfront and DevOps

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.

Scroll to Top