Introduction
TUI Cruises Mein Schiff is one of Germany's leading cruise line operators, known for its premium voyages and world-class experiences. Operating in an industry where customer impressions are pivotal, their online presence plays a crucial role in attracting and retaining guests. For potential travelers, the company's website is often the first touchpoint where potential buyers of all segments would inform themselves and gain a first impression to then later perform a buying decision. The website as a virtual portal needs to mirror the positive experience and convenience that customers can expect on the actual cruise.
Thus, it is imperative for such a platform to provide a seamless, efficient, and premium user experience. Page speed becomes especially significant in this context. A fast-loading website not only conveys professionalism and attention to detail, but also enhances the overall shopping experience. In an era where every second counts, optimizing page speed ensures that visitors remain engaged, reducing bounces and strengthening the pathway to bookings.
"TUI Cruises Mein Schiff stands for innovation in the brand promise, in the booking process, and on deck. Our holistic approach to digital transformation ensures that we achieve digital excellence, making our services more accessible for our passengers. Fast loading times are essential for our customer experience, and are therefore playing a key role in improving vital business metrics like bounce rate, conversion rate, and revenue.
Speed Kit has enabled us to deliver category-leading web performance to our website visitors. The integration process was smooth and tailored to our needs, improving our web performance from good to better to best."
Challenge
At the beginning of 2023 TUI Cruises Mein Schiff was in the middle of a digital transformation initiative, facing the complexities of integrating and managing diverse technology stacks. The first part of the customer journey was built on a mature Polymer-based architecture with web components. For the booking process, the shift towards a React-based frontend illustrates the commitment to leveraging cutting-edge technology to optimize user interactions. Furthermore, TUI Cruises Mein Schiff introduced Contentful as a CMS for agile content production and management. In this technological mosaic, consistent page speed emerged as a non-negotiable criterion. From the initial point of contact to transaction completion, rapid and reliable website performance is crucial in the digital business landscape.
To address this, TUI Cruises Mein Schiff was challenged with finding a way to improve page speed across all technology stacks to deliver a superb user experience and uniformly and consistently deliver web pages fast and efficiently, thereby enhancing the customer's online experience. After all, page speed not only plays a crucial role in user experience, but furthermore is a ranking factor in Google’s search and additionally is proven to affect vital business metrics like bounce rate, conversion rate and revenue.
Understanding single-page applications
A Single-Page Application (SPA) is a type of web application or website that dynamically updates and displays content on a single web page without requesting a new HTML resource for every navigation. This type of navigation is called a soft navigation, while the traditional navigation process with a complete new page load is called a hard navigation. While most navigations in SPAs are soft navigations, every session in an SPA will have a hard navigation, with an HTML resource, for its initial page load and may have further hard navigations at specific points during the customer journey. In fact, SPAs on average have more hard navigations than soft navigations.
Differentiating between hard navigations and soft navigations is crucial for understanding web performance, as they have entirely different performance challenges. For a hard navigation, a fast Time To First Byte (TTFB) for a fast HTML response is vital, while also the rendering process plays a crucial role. For a soft navigation, SPAs use APIs to load content. Here, the speed of the API response becomes the performance-bottleneck.
Measuring web performance
Google has established benchmarks in web performance assessment by making page speed a key factor in its search ranking algorithms. An interesting metric in this context is the TTFB, which measures the duration for a user's browser to receive the initial byte of data from the server. This metric is essential as it includes delays caused by both the network and the server. From a users perspective however, this is a fairly invisible metric. The First Contentful Paint (FCP) measures the duration until a browser displays the initial visual element within its viewport. In contrast to the Largest Contentful Paint (LCP, see below), FCP, as of 2023, offers broad compatibility across all major browsers, including Chrome, Safari, Firefox, and Microsoft Edge, allowing for a more universal tracking.
However, the LCP, a part of Google's Core Web Vitals, is often considered the most crucial metric for page speed. LCP tracks the time required for the browser's viewport to display the largest visual element, such as an image or text block, measuring the user's perceived loading experience. A quicker LCP generally translates to an improved user experience. It's important to note that for SPA websites only hard navigations contribute to TTFB, FCP, and LCP measurements. This means soft navigations are not considered in Googles SEO ranking. To understand the speed of soft navigations, measuring API-call response times for showing hero content can be an effective metric for navigation speeds.
"In the midst of our digital transformation, ensuring an uninterrupted and superior experience for our website visitors was paramount. This wasn't just a technological shift. It was about upholding the brand promise of TUI Cruises Mein Schiff in every digital touchpoint."
Ulrike Pomaska, Product Owner Customer Journey eCommerce
Solution
Speed Kit, a sophisticated web performance solution, is designed to enhance the speed and user experience of websites. At its core, Speed Kit operates by leveraging the power of Service Workers, a modern web technology that acts as a client-side proxy. This enables Speed Kit to effectively control how a website's resources are loaded and cached. One of the key functionalities of Speed Kit is its dynamic caching mechanism. It caches a website's resources (like HTML, CSS, JavaScript, images, and fonts) in the user's browser, while accessing dynamic content from the original backend systems. This ensures that users always receive the most up-to-date content without compromising on speed.
On the network side, Speed Kit optimizes data transfer by using a global Content Delivery Network (CDN). Additionally, Speed Kit employs techniques like AI-based predictive preloads, prioritizing critical resources and compressing important assets, further accelerating the page-load process.
Speed Kit implementation & testing
Integrating Speed Kit for TUI Cruises Mein Schiff was a straightforward process requiring minimal effort. It involved uploading the Service Worker JavaScript file to the domain's root path, inserting a script tag in the HTML's <head> section and whitelisting two static IP ranges. For the Speed Kit team, the process was more intricate, creating a custom configuration for the two distinct technology stacks to maximize performance across various page types.
Following the rollout, Speed Kit's browser-based nature allows for A/B testing of its performance enhancements. In this, one user group experiences Speed Kit's improvements and the other the baseline performance. Real-User Monitoring (RUM) collects key metrics like TTFB or LCP directly from browser APIs, facilitating a detailed assessment of Speed Kit's benefits, backed by statistically significant data.
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
On the client-side rendered web pages using Polymer and Web Components, Speed Kit significantly enhances performance by reducing the API response times for Web Components by a remarkable 76%, bringing the median response time down from 150 ms to just 36 ms. On React and Next.js based pages, Speed Kit achieved a 55% reduction in the median LCP for hard navigations, decreasing from the original 1912 ms to a rapid 862 ms, an improvement of 1050 ms.
Moreover, for soft navigations on React-based web pages, Speed Kit decreased the median response time for LCP-critical API calls from 332 ms to 38 ms. Additionally, Speed Kit includes automatic image optimization, reducing unnecessary image data by 53% for over 71.2 million monthly images delivered to users.
LCP before and after Speed Kit
Speed impact on bounce rate
Bounce Rate increases by 4.68% for every 100 milliseconds slower FCP in an average session:
In a separate analysis, linking funnel progression metrics with page speed clearly shows the impact of improved user experience on user engagement, interactions, and bookings for the TUI Cruises Mein Schiff website. This study highlights that page speed, measured by FCP performance, directly affect bounce rates, with slower speeds leading to a notable increase in bounce rates.
Speed impact on clicks-to-booking rate
Clicks-to-Booking Rate decreases by 1.3% for every 100 milliseconds slower First Contentful Paint in an average session:
Furthermore, a comparison between FCP loading times and the percentage of users initiating the booking process indicates that sessions with faster FCP loading times achieve significantly higher conversion rates towards booking than those with slower FCP loading times. These insights underscore the critical role of page speed in driving business success.
Embracing digital excellence: TUI Cruises Mein Schiff's transformation journey
This case study has showcased TUI Cruises Mein Schiff's remarkable journey through digital transformation, underscoring their dedication to delivering an unparalleled online experience. By embracing cutting-edge technology, such as a React-based frontend and Contentful CMS, and confronting challenges such as optimizing page speed across diverse tech stacks, TUI Cruises has set a new standard in digital customer engagement. The integration of Speed Kit has been pivotal, dramatically enhancing website performance metrics like API response times and LCP.
These technological advancements not only reflect TUI Cruises' commitment to innovation but also significantly improve the user experience, driving increased customer engagement, reduced bounce rates and improved conversions. This transformation journey is a testament to the power of digital innovation in enhancing brand promise and elevating the customer experience in the digital age.
