Farfetch Sees Increase in Conversion Rates with Improved Core Web Vitals!

Introduction:

Within many organizations, website speed performance and Core Web Vitals are frequently only deemed the responsibility of engineering teams. However, if the business and customer experience value is not understood, site speed can be overlooked by other parts of the organization when decisions are made and roadmaps are developed.

To encourage better performance culture across teams and make significant enhancements to their web experience, luxury e-commerce fashion retailer Farfetch started a project to define and use customer-centric performance metrics. In addition, they desired to link these to business metrics to demonstrate how performance affects the company's KPIs.

The team's ambition was to go beyond just technical objectives and create a cultural shift in the organization—breaking down silos and introducing a new business-oriented language to provide a common way to discuss what were previously considered technical topics. For example, Farfetch wanted website speed performance to be a collective responsibility, enabling informed decision-making and making it a key component of a good web experience.

To launch the initiative, Farfetch recognized that a single department alone could not accomplish this goal and formed a core team of specialists from multiple divisions within the company—engineering, infrastructure, architecture, and product—who established a detailed plan to transform the company's approach to this issue.

Defining, Measuring & Monitoring The Key Metrics

To gain better visibility of their speed performance, Farfetch needed effective monitoring tools to observe states and variations across their journey touchpoints and applications. To accomplish this, they used laboratory and real user monitoring (field data) to track Core Web Vitals and other user-centric performance metrics. In addition, JavaScript and the web-vitals.js library were employed to capture data, providing the product analytics team the opportunity to align performance metrics with business metrics in the same session and gain insights into how the two are connected.

In order to understand the metrics that mattered most for Farfetch's business, a multidisciplinary group set out to analyze the critical journey of users. In addition to the Core Web Vitals metrics outlined by Google - each reflecting a unique aspect of the user experience - they also employed custom JavaScript for measurements such as Time to First Byte (TTFB), First Contentful Paint (FCP), First Paint, and Time to Interactive (TTI).

These metrics were collected through the Performance API, Long Tasks API, and Google's polyfills.

Moreover, Farfetch has its own multi-channel tracking solution, Omnitracking, which tracks page views, user actions, and system actions. Omnitracking Data Model is their solution for data exploration, analytics, and reporting based on the events generated by the trackers. For more details, please refer to Manuel Garcia's mid-2020 Farfetch Tech Blog post as Senior Principal Engineer for the Web.

The main objective of the model was to help and support users who wish to understand these key concepts:

• User Behavior
• Applications Usage
• User Experience With Fartech Applications
• Macro & Mirco Conversions
• Cross Channel & Funnel Analysis

Farfetch implemented a model of capturing the performance data of each pageview on farfetch.com via JavaScript and adding it to a data layer. This ensured the performance metrics matched up with the main conversion funnel metrics for each session, providing the foundation for further analysis.

In addition, Farfetch set performance budgets for each metric on the main journey pages and created an oversight process to handle any violations. They also began to include performance metrics in CI pipelines to quickly identify budget deviations during development.

Communication Through Business Language

The analytics team at Farfetch explored mathematical models and patterns in the data that had been included in the internal business intelligence datasets to uncover any correlation between performance metrics and business KPIs (like conversion rate and percentage of single-page visits). This enabled performance to be discussed using a common language with business decision-makers, with the analysis, including Core Web Vitals and other metrics, deemed valuable. The insights gained from this exploration were immensely impactful.

Farfetch investigated the 2.5-second LCP recommendation from Google and found that when this threshold was exceeded, conversions and exits both decreased. On average, after each additional 100ms of LCP, the conversion rate dropped by -1.3%. These results demonstrate the importance of providing a swift user experience, as users become less likely to convert or remain on the page when faced with long loading times.

Farfetch verified that decreasing the Cumulative Layout Shift (CLS) score by 0.01 led to a -3.1% exit rate. This highlights the importance of page stability in retaining users.

The team also tracked and analyzed First Input Delay (FID) and Total Blocking Time (TTI) metrics for the Farfetch business conversion funnel. To gain insight into TTI, the website was injected with Google's TTI polyfill, and the Long Tasks API was used to report long tasks (tasks taking longer than 50 milliseconds on the browser's main thread).

Results showed that reducing TTI by a second increased the conversion rate by 2.8%. This indicated the need for more efficient code and a lighter main thread.

The analytics team also discovered that some metrics didn't have any effect on business KPIs or were more influential at different points of the user journey. This allowed them to better understand the opportunities in the conversion funnel.

Initiatives Focussed On Performance-Based Decisions

Highlighting the quantitative and qualitative data on user experience with site speed, alongside user research, was essential to ensure company objectives were met, secure executive-level comprehension, and secure agreement for decisions based on performance in product development. This allowed Farfetch to demonstrate the value of performance.

Farfetch created the 'Site Speed Business Case Calculator,' inspired by Google's Speed Impact Calculator, to simplify prioritization. This self-service tool enables any product manager to quickly calculate the business impact of performance improvements. The data model takes into account the correlation between conversion rate and user experience metrics and is adaptable to different product scopes, devices, and user journey touchpoints.

Self-service analytical dashboards have provided visibility of real-time performance indicators and their effect on the business. This has enabled performance to be integrated into product development, and product teams now have access to metrics, auditing tools, and performance budget monitoring. Furthermore, thanks to the data layer integration, performance metrics can also be viewed through Farfetch's A/B testing tooling, giving product managers an additional source of insights.

In recent months, the core team has been working towards creating a culture of monitoring and assessing the influence of front-end development teams and the platform domain using similar techniques. Farfetch has presented on this, and there has been external recognition, such as a 2021 Google I/O talk that discussed the business implications of Core Web Vitals, thus ensuring the theme remains pertinent and strengthening the team's approach to the culture.

Improving The Website Speed Metrics

The goal of 2021 was to improve the website speed metrics of Farfetch while following best practices and pursuing enhancement opportunities. This was done by focusing on two main page types - product pages and product listing pages - and improving their Largest Contentful Paint (LCP).

The teams discussed strategies to optimize the loading of the main content on the pages. Then, with a business case to demonstrate the advantages of this approach, they decided to:

• Adapt the product image loading component from JavaScript to a native version.
• Determine the importance of the images, separating them into critical and non-critical assets.
• Load critical images first, having the source included in the HTML and using for a speedy download.
• For non-critical images, use the attribute, with a polyfill using Intersection Observer on browsers that do not support it, such as Safari.

The team was able to move the needle by conducting A/B testing on product pages, which resulted in a decrease in page load time of more than 600ms. In addition, according to the A/B testing, there was a 1-5% increase in conversion rate with the company's desired confidence level. Furthermore, the team improved the percentage of pageviews that were considered "good," "needs improvement," and "poor" based on Google's definition of LCP score.

Reaping the Rewards of a Faster Site and Improved Working Practices!

By introducing a culture of performance and utilizing tools like the business case calculator, Farfetch was able to create a shared language that product managers, stakeholders, and engineers could all understand. This has opened up conversations about how to prioritize initiatives and optimize performance.

"We wanted to prioritize performance for everyone, not just the engineering team," says Rui Santos, Senior Principal Product Manager of Web Channels at Farfetch. "By connecting performance metrics to business metrics, we were able to communicate the importance of speed very quickly. In addition, this allowed business stakeholders to be more aware of the trade-off decisions that need to be made in order to ensure success."

Performance is key when it comes to the luxury e-commerce segment, as speed can have a major impact on how consumers view your brand and the quality of your service. Quality and luxury go hand in hand with users, so ensuring your website runs quickly and smoothly is paramount for achieving a successful conversion rate. Here at Farfetch, we understand the importance of performance and make sure it is at the forefront of our forward planning.

Make your website load at lightning fast speed With Website Speedy Tool

Speed up your website optimization process with our SaaS-based website optimization tool, "Website Speedy." Our powerful tool instantly reduces your website loading times with just a few simple steps. All you have to do is register yourself, add the Website Speedy script, and let our tool work its magic on your website speed and core web vitals. With Website Speedy, you can boost your website's performance and improve user experience in no time. Try it now and see the difference!