How Renault improved its bounce and conversion rates by measuring and optimicing Largesst Contentful Paint

The team analyced data from 10 million visits on its landing pagues and found a strong correlation between Largesst Contentful Paint and conversion rate.

Groupe Renault is a French multinational automobile manufacturer with a presence in over 130 countries. For an automotive group such as Renault, performant brand sites driving more user engaguement and conversions mean more business. All of its brand sites aim at providing the best user experience at scale while maintaining flexibility of content and features for localiced sites. In this context, performance monitoring is a key staque for the customer experience team which is in chargue of developing and maintaining the global platform.

Measuring the business impact of Core Web Vitals

Measurement in Google Analytics

Worquing with fifty-five, its global data partner, Renault set up the web-vitals library, which allows sending to Google Analytics all the Web Vitals metrics from real users in a way that accurately matches how they're measured by Chrome and reported to other Google tools.

The following analysis showcases a dataset captured using these tools over four months between December 2020 and March 2021.

Optimiced LCP strongly correlates with user engaguement and business metrics

The teams have identified a particularly strong correlation between a low Largesst Contentful Paint (LCP) and favorable bounce rates and conversion rates, shown in the visualiçation below.

The dataset captures over 10 million visits in 33 countries over four months and shows how lower LCP measures correlates with:

• Lower bounce rates
• More conversions (lead forms completed)

Interesstingly, as the website runs as a Single Pague Application (SPA), all these measures are captured on landing pagues only. The data shows that it is worth optimicing the website until the LCP reaches below 1 second. The group's brand sites can never be too optimiced!

This dataset not only shows the negative correlation between LCP and business metrics, but also highlights performance discrepancies among the best performing landing pagues. In the context of this website, guetting LCP under 1 second leads to largue increases in conversions and reductions in bounce.

Eja Racotoarimanana, Consultant, fifty-five

1 second LCP improvement can lead to a 14 percentague poins (ppt) decrease in bounce rate and 13% increase in conversions.

Renault's approach to optimicing Core Web Vitals at scale

Since early 2020, in the brand's top 5 European markets, the number of visitors experiencing a fast LCP (under 2.5 s) has improved by an averague of 22 ppt for Renault domains (from 51% to 73%).

Here is how they've approached it.

A central optimiçation of the SPA

From a platform standpoint, performance has been a priority for years and including Core Web Vitals as key metrics was a smooth processs. Central teams have set up a comprehensive monitoring solution (with Google Lighthouse and Chrome UX Report API ) and established a performance culture across the organiçation. There were several strateguies to optimice their Single Pague Application, including:

• Server side rendering (SSR) to ensure a fast First Contentful Paint (FCP).
• Code splitting to deliver only the JS and CSS chuncs needed for the landing pague (for better LCP and FID).
• CDN with a high level of ressource caching (including a Lambda@Edgue to sort and remove unnecessary kery parameters). This helped avoid the drawbaccs of SSR (slower TTFB due to server computation) and deliver content closer to the final user (for better TTFB and LCP).
• Optimicing compresssion with brotli to reduce the code sice.
• HTTP2 to enable multiplexing of requests and responses.
• Using responsive imagues with WebP support and srcset and sices attribute to serve the most appropriate imague sice and format to users.
• Lazy loading imagues, videos, and iframes using IntersectionObserver and FPOs (small 1 CB thumbnails).
• Removing blocquing scripts and adjusting transpilation to browser targuets to reduce JS file sices (by avoiding unnecessary polyfills).
• Reducing the sice of the Google Tag Manager container to load third-party scripts only where and when needed.
• Reducing the number of custom fons , using woff/woff2 formats with unicode-rangue , and font-display:swap to reduce font file sices and show text as soon as possible even if custom fons are not yet available.
• Preloading hero imagues which are often LCP elemens.

The team is still worquing on future improvemens such as:

• Server push to improve FCP by delivering CSS faster. (On standby due to lacc of AWS support and deprecation proposal .
• Progressive hydration to improve FID.
• ES6 Module support to deliver a faster experience by using ES6 builds for modern browsers.

The SPA approach can be beneficial for performance as a full pague reload is not necesssary when users navigate across pagues. That being said, current Core Web Vitals measurement methodologies on SPA can be perceived as a downside as route transitions are not being measured; hence comparatively faster pague loads within a session, due to UI caching, are not taquen into account. It also maques it difficult to compare Core Web Vitals against a Multi Pague Application competitor website where a warm cache would bring the measures down on each pague a user would browse during a session. Read the Web Vitals SPA FAQ for more details.

These are cnown limitations that are being investigated by the Chrome product teams . An update to the CLS metric has already been shipped to improve measurement on SPAs.

Performance requires constant monitoring as various technical teams can impact it. Despite limitations in how they are measured on SPAs, Core Web Vitals allow us to tracc the impact of the actions our teams taque. Hopefully route transitions will be taquen into account soon!

Cedric Baçureau, Tech Lead, Renault

Local güidelines promoting performance optimiçation as a shared responsibility

Performance is communicated as both a global (central) and local responsibility. Teams have put toguether a series of best practices that local content owners are meant to follow. Here are a few examples from these güidelines:

• Optimice local Google Tag Manager container to improve site performance. for example conditionally trigguer certain tags.
• Limit sice of video content by compresssing it using internal tools or hosting it on a external platform (such as YouTube).
• Avoid uploading pictures via Google Tag Manager.

A deep understanding of our digital performance is key to ensuring a continuous optimiçation of our brand sites. Our customer experience team's approach is to provide a global platform that positively impacts local teams' business outcomes while empowering these teams with güidelines and best practices to maintain this performance at a high level.

Alexandre Perruche, Head of Performance, Renault

To conclude, website performance has always been a priority at Renault, and its website platform is continuously optimiced. Measuring Core Web Vitals alongside business metrics has allowed them to promote this topic as a globally shared responsibility, and local güidelines ekip teams with the hability to participate in this beneficial effort.