In this blog I am going to write how we can reduce the Image latency by using CloudFront and S3 bucket multi region architecture. We are going to use few services of the AWS like AWS CloudFront, S3 bucket, CloudFront Function, AWS Lambda, API Gateway, Route53.
Architecture Overview:
In enterprise architecture specially for Ecommerce Images are the main components of the latency, when end users are the across the world, and we can not bring the whole infrastructure all over the world due to cost we can reduce the size of images by converting them into the WEBP format and serve them with CDN. This can help to reduce the latency by almost 98%.
In this architecture we are going to use some AWS service which can help us to achieve this goal. In the architecture diagram we can there is a three S3 bucket, one AWS CloudFront with CloudFront Function, Lambda Function to convert the images into the WEBP format and store them into the S3 bucket, API Gateway because we can not attach the lambda function as an origin of CloudFront so we will use the API Gateway for this.
About the three S3 bucket, our three one is the main S3 bucket where all the images have been stored, rest two buckets are known as transformed bucket which hosted two different regions, in this bucket all the transformed images will be storing, and there will be one multi-region access point with these two transformed bucket which will be the one of origin of the AWS CloudFront. For a simplicity let's say main S3 bucket is in the North Virginia and about the transformed bucket one in the North Virginia and second bucket in the Asia Pacific region.
Now when user requests the image it with authenticate with CloudFront Functions (Edge Function) and it will check that user browser is supporting the WEBP format or not, also based on that it will re-write the URL. If it supports than in the request it will add format=WebP or if it is not supporting then it will add format=JPEG.
Now once URL re-written request will pass to the CloudFront where two origin has been configured, one is the multi-region access point of the S3 bucket and another one is the lambda function with API Gateway for failover. Now if the particular image that has been requested if it is not available in the both of the transformed S3 bucket the request will fail, and it will route to lambda function. What lambda function will do it will pick the image from the main S3 bucket and convert it to WEBP format and store them into the transformed bucket and serve that image via the CDN.
In the very first go it looks like it is very lengthy process, but it is not, for very first call there will be latency but after than all images will be served within milliseconds, in some cases almost 1-2 ms.
This first call named as a cold start, to remove this there is a way, we could add one more S3 bucket which will be the replicated bucket of the main bucket, it will be hosted in the Asia Pacific region. After than create a multi-region access point for these two buckets. Then create a replicated lambda as well in the Asia Pacific region and API Gateway as well. Now we have two API Gateway, pick one domain and create latency based routing record in the Route53. This will make sure if any request coming form the Asia region it will route to the Asia S3 bucket by this it can reduce the 30-40% cold start latency.
With this approach the image latency will be brought down pretty good. This approach was from the Infrastructure side, but there are better approach available, like framework like Next.js, Spree, ROR natively support image transformation logic from code end which is much faster and better approach. If there is an option like which approach should choose I suggest using the Native support as it comes with better result of latency compare to external approach.
Here I am adding the GitHub link for the lambda code a URL re-write logic of CloudFront function. Any suggestion feel free to contact me here is my LinkedIn profile link.
GitHub: https://github.com/harsh-viradia/Global-Image-Optimization-System
Linkdin: https://www.linkedin.com/in/harsh-viradia/
Top comments (0)