How Speed Kit Helps in Fashion E-Commerce

Speed Kit provides an uplift of 3.9x in page load times and more than 50% in conversions for appelrath.com.

Problem

With AppelrathCüpper, a success story that started 130 years ago, continues online. Through Speed Kit, AppelrathCüpper was able to bring its performance and user experience to a level that used to be exclusive to the large-scale market leaders. With the new level of page load times below one second, appelrath.com is the in the top tier of the best-performing online shops worldwide.

• Challenge: delivering the best online user experience & performance for a retail brand that has built over 100 years of trust and recognition.
• Approach: adding Speed Kit as a JavaScript tool to the existing OXID-based online shop for a fast and snappy experience across the site.
• Result I: 3.9x faster page loads
• Result II: 55% more conversions
• Result III: 16% longer session length

“Speed Kit does not only give us a 3.9x page speed boost you can feel, but a 55% conversion uplift we can measure.”

Jerrit Kube, Head of Digital & Marketing, AppelrathCüpper

About AppelrathCüpper — From Stationary to E-Commerce

Founded in the 19th century, AppelrathCüpper is one of Germany’s oldest fashion commerce labels and known for high-quality women clothing. Appelrath.com was launched in 2015 in order to start the transition from purely stationary commerce to a 24/7 online business. Being in direct competition with big players like Zalando and Amazon, AppelrathCüpper’s goal is nothing less than transforming their well-trusted fashion retail brand into a leader in fashion e-commerce, too. To address this challenge on a technical level, Speed Kit comes into play.

Technical Setup

Appelrath.com is running on OXID for its shop backend. Since AppelrathCüpper has the same high standards for their online business as for their products, they work with Dept (formerly Superreal) for building and operating their online shop. Dept is an international web development agency with more than 1000 experts in all fields related to online commerce, including marketing, design, and technical execution. With their expertise in e-commerce and as a Baqend partner, performance is something they take very seriously.

To bring user experience to the best possible state on a technical performance level, Speed Kit was chosen for appelrath.com as the solution for tackling page load time. Speed Kit is a web performance insurance: added as a JavaScript snippet, it typically accelerates websites by more than 50%. With its automatic optimizations, Speed Kit improves the user experience, increases the conversion rate and SEO ranking, offloads the server, and dramatically reduces marketing costs through lower bounce rates.

As a first step, Dept analyzed by how much Speed Kit would accelerate appelrath.com. To this end, they used the Page Speed Analyzer, a simple layer on top of the well-known WebPagetest. The Page Speed Analyzer accurately predicts the uplift achievable through Speed Kit by measuring and comparing (1) baseline performance of the website under test against (2) performance of the same site when loaded through Speed Kit. A few simple tests quickly showed that Speed Kit could provide a tremendous uplift across landing pages, product lists, and product detail pages.

Approach

To obtain quick but sustainable results in performance, Dept decided to integrate Speed Kit into Appelrath.com. The process of accelerating the website is very simple:

1. Speed Kit leverages the novel Service Worker browser technology. Speed Kit’s sw.js file is simply uploaded to the backend (in this case: OXID).
2. Speed Kit’s whitelist & blacklist control which requests are accelerated and which ones are left untouched. On appelrath.com, Speed Kit delivers both first-party content (e.g. the HTML website itself) as well as slow third-parties (e.g. the Google tag manager).
3. Speed Kit keeps the site up-to-date automatically by checking for content changes frequently. In Speed Kit’s dashboard, the corresponding rules can be added and configured.
4. To speed up personalized content (e.g. the shopping cart and recommendations), a data attribute is added to elements in the page that might change based on users.
5. To activate Speed Kit, a JavaScript snippet is finally included into the site by adding it to the HTML template (a tag manager also works).

With those 5 steps done, Speed Kit can be tested in a pre-production environment. The whole process took less than two developer days for AppelrathCüpper, Dept, and the Speed Kit team combined.

“AppelrathCüpper shows how smooth Speed Kit integrations typically are: We used the basic setup for Appelrath.com, without any bells and whistles, and achieved incredible performance improvements out-of-the-box. Since the teams at AppelrathCüpper and Dept have been super-helpful and quick with their feedback, configuring Speed Kit only took us a few hours. All in all, we went from the initial tests to production in less than three weeks.”

Erik Witt, Head of Speed Kit Development

Test Methodology

To quantify the performance uplift for real user of appelrath.com, a split test was conducted. Speed Kit natively supports A/B testing by capturing anonymized performance data from users browsing the site.

• Group A (50% of users) used Speed Kit
• Group B (the other 50%) loaded the regular website without Speed Kit activating itself

The raw performance data and the group information were sent to the scalable analytic systems of Baqend in realtime so that performance and conversions could be tracked. Then we all had to wait: usually, it takes a few days to obtain statistically significant results, since a sufficient amount of traffic and users have to be observed. But the empirical results quickly spoke for themselves…

Results

“I have helped companies to understand and measure the immense ROI of web performance for over 10 years. However, the challenge for them has always been the implementation of web performance optimization. Today, I’m awestruck by how easy it is to achieve these huge ROIs using Speed Kit. Appelrath.com is the perfect example for why I joined Baqend: we disrupt the web performance market by delivering such unbelievable results and not just talking about it.”

Kristian Sköld, Chief Strategy Officer, Baqend

As always for the initial analysis, we looked at the raw technical performance metrics for page load times (median values):

• Server Response Time (time-to-first-byte from the backend):
  1200% Faster (3.25 s vs. 0.25 s)
• First paint (this is when the browser renders for the first time):
  387% Faster (3.65 s vs. 0.75 s)
• Time-to-interactive (this is when links can be clicked)
  305% Faster (3.85 s vs. 0.95 s)

The perceived loading time of a website is captured well by the first paint which showed a 3.9x improvement for the group of users with Speed Kit.

It is common knowledge that better performance leads to improved sales. In a famous A/B test, Amazon found that 100 ms of load time improvement translated to a 1% conversion rate improvement on their site. So the interesting question is: what is the actual conversion uplift on appelrath.com for real users?

This is exactly what Speed Kit tracks: the conversions and engagement of users surfing the site with Speed Kit.

• Conversion Rate (share of user sessions during which something was bought):
  55% Higher
• Engagement/Session Length (number of pages visited per user session):
  16% Higher

To validate the results, we turned to one of the largest independent parties: Google.

Ever since the “mobile speed update” announced for its ranking algorithm last summer, Google has declared war on slow websites — by ranking them down in search results. To make this downranking transparent, Google collects performance data from all Chrome browsers that captures the user-experienced page Speed. This data is made publicly available in the Chrome User Experience Report(CRUX). While Google only tracks this data at the level of complete months and domains, it is a great tool to observe long-term performance trends.

So while it cannot replace a proper A/B test, we analyzed the CRUX data in order to answer the question: how does a month with Speed Kit compare to a month when Speed Kit was not active, yet?

The histogram below illustrates the share of users experiencing a given page load time in a month with Speed Kit (blue) against a month without Speed Kit (orange): Since lower is better for page loads, it is best to have a huge spike on the left and a flat line to the right. As can be seen in the plot, most users with Speed Kit (blue) saw page load times below 1 s compared to 2–4 s for users without Speed Kit (orange).

The CRUX data is particularly interesting, as Google has explicitly admitted to use this data for its ranking algorithm. This means that the obtained performance improvement also has a direct SEO impact.

Outlook

“Performance is one of the most important topics for any e-commerce website right now. AppelrathCüpper showed how performance can be turned into a true differentiator in a market with an increasingly demanding user base. We are looking forward to a long and fruitful partnership — load times are already below one second on appelrath.com now, but we are only done when they have become imperceptible.”

— Felix Gessert, CEO, Baqend

The Team Behind Speed Kit

Baqend develops Speed Kit as a performance add-on that uses innovative caching algorithms to minimize loading times of e-commerce websites. This helps shops and brands to turn page speed into their competitive advantage. Baqend’s technology is already leveraged by more than 5000 websites such as Baur.de in the Otto Group. With a team of 15 people, Baqend’s goal is to deliver performance that feels instant for each of their customers’ websites.