Introduction
Tom Tailor is a leading international fashion brand that offers high-quality and stylish clothing for men, women, and children. The Tom Tailor online shop is built using a state-of-the-art technology stack consisting of SCAYLE (formerly About You Cloud), React, and Next.js. While this setup provides exceptional functionality and flexibility, it also poses challenges in terms of the performance of the server-side rendered HTMLs for hard navigations and the dynamic content of the soft navigations in the single page application (SPA) setup.
"Speed Kit has been an excellent partner in improving our website's performance. We were amazed by the results it delivered, especially considering our modern SPA stack. The team at Speed Kit provided us with a reliable solution that has positively impacted our user experience."
Challenge
Solution
Through its dynamic block mechanism, Speed Kit was able to cache even highly dynamic versions of the server-side rendered HTML resources for hard navigations, resulting in significant improvements in LCP. Additionally, Speed Kit is able to differentiate between dynamic and static API calls and delivers cacheable content faster for soft navigations within the SPA setup.
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
Despite the sophistication of the Tom Tailor technology stack, Speed Kit was able to deliver significant improvements in web performance, verified by real-user monitoring (RUM) and the Google Chrome UX Report.
Largest Contentful Paint (LCP):
By caching server-side rendered HTML resources, Speed Kit was able to reduce the LCP of hard navigations from 2735 ms to 1911 ms, a 30% improvement.
Soft Navigation Performance:
Route-Change-to-Render (75th percentile in ms)
Additionally, Speed Kit was able to accelerate soft navigations in the SPA setup, improving the Next.js Route-Change-to-Render metric by 579 ms in the 75th percentile.
