Introduction
Sushi Bikes is an e-bike store with focus on modern design, affordability, and sustainability, making green urban mobility accessible to all. Operating on Shopify, Sushi Bikes face increasing demand for their e-bikes and equipment. To optimize the shopping experience and keep customers satisfied, several measures like image optimization have been tried out but a more comprehensive page speed solution is required.
"Thanks to Speed Kit, our webshop is now turbocharged, just like our Sushi Bikes! It's like giving our customers the thrill of a high-speed ride while browsing through our products, ensuring a fast, smooth, and unforgettable experience."
Challenge
Solution
Sushi Bikes integrated Speed Kit, a unique browser-based caching solution. Speed Kit works by intelligently caching and delivering optimized web pages, resulting in faster loading times and improved user experience. With Speed Kit’s Shopify app, the integration process is remarkably swift and effortless, completed within just three simple clicks. As a result of Speed Kit’s advanced technology, Sushi Bikes’ shop experienced a significant boost, particularly in Core Web Vitals such as First Contentful Paint (FCP) and Largest Contentful Paint (LCP), showcasing a remarkable increase in speed.
Speed Kit is an official ACE eligible technology partner and independent software vendor (advanced tier) of the AWS Competency Partner Program "Accelerate" as well as the Workload Migration Program. Our technology is powered by 13 different AWS services:
- Elastic Kubernetes Service (EKS): We use EKS to schedule and orchestrate our Speed Kit applications on EC2 instances.
- Simple Storage Service (S3): Speed Kit stores cached assets in S3 buckets. Additionally, we store RUM (Real User Monitoring) and PI (Performance Insights) data in S3 buckets for analytics purposes.
- Elastic Compute Cloud (EC2): Our workloads are hosted on EC2 instances, as managed through EKS.
- Kinesis Data Streams: Kinesis Data Streams are used to ingest RUM and PI data from Speed Kit, which is then consumed by Amazon Managed Service for Apache Flink. Fastly also streams access logs to our Kinesis Data Stream, which are similarly consumed by Amazon Managed Service for Apache Flink.
- Athena: We use Amazon Athena to query data stored in AWS S3 buckets, enabling performance insights and asset preloading.
- Elastic Container Registry (ECR): Docker images are stored in ECR and deployed in our Kubernetes cluster, which is managed by EKS. For third-party application images, we use the pull-through-cache feature of ECR.
- Elastic Container Service (ECS): We build Docker images using a service hosted on Amazon ECS.
- Route 53: Route53 is used to manage DNS records.
- Simple Email Service (SES): We use SES is used for sending transactional emails.
- Managed Streaming for Apache Kafka (MSK): We use MSK to facilitate consuming and producing custom event records for different applications.
- DynamoDB: Speed Kit uses DynamoDB to store information related to our predictive preload feature.
- Lambda: We use Lambda to pre-render client side renderd pages to make that actual server side rendered.
- ElastiCache (Redis OSS): We use ElastiCache to store our Bloom filter, which checks whether an asset is present in our cache.
-min.webp)
Click the image to open the architectual diagram of Speed Kit with AWS
Results
The improvements were measured with an A/B test during the onboarding phase and delivered impressive results. With Speed Kit’s real-user monitoring (RUM) data, various analysis have been made and show significant accelerated loading times.
Largest Contentful Paint (LCP) overall:
The overall comparison resulted in a 968 ms reducement of LCP loading time (37% improvement).
Largest Contentful Paint (LCP) on product pages:
Notably, product pages showed even more impressive results, with an acceleration of the LCP by 2296 ms, corresponding to an improvement of 69%. These findings underscore the transformative impact of Speed Kit in optimizing shop performance, resulting in faster loading times and an enhanced user experience.
