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."
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.
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.
