Improving web performance is not always about fixing problems that already exist.

Sometimes, proactive performance optimization can help prevent problems from occurring in the first place.

Businesses and organizations can take a proactive approach to performance optimization in order to improve the user experience, increase scalability, save time and resources, and future-proof their websites.

This can be especially important for websites that experience high levels of traffic or usage, or that are critical to the business or organization's operations.

One company that has seen the benefits of proactive performance optimization is Rakuten 24.

credit: web.dev

By investing in Core Web Vitals (CWV) and other performance optimization strategies, Rakuten 24 was able to increase revenue per visitor by 53.37%, conversion rate by 33.13%, and improve the overall user experience of its website.

Let's understand Rakuten 24's experience with proactive performance optimization and how it has helped drive business success.

We'll also explore some of the key benefits of proactive performance optimization and how other businesses and organizations can adopt a similar approach.

Let's look at their current CWV assessment first (as on Jan 10th 2023).

According to Google, The Cumulative Layout Shift measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1. or less.

They have some work to be done here in terms of improving the overall user experience, but let's understand what they did to increase revenue and conversion.

Optimized JavaScript and resources

• Eliminate render-blocking resources

  • This involves identifying and eliminating resources (such as scripts or stylesheets) that block the rendering of the page, by either loading them asynchronously or placing them in the footer of the document instead of the head

• Split code and use dynamic import()

  • This technique involves dividing your codebase into smaller chunks and loading them on demand, only when they are needed. It takes advantage of dynamic imports, which are used to load modules asynchronously, rather than loading all code at once during the initial load

• Split all content into separate parts and lazy load below-the-fold HTML files

  • This involves dividing a website's content into smaller chunks and loading them on demand as the user scrolls through the page

• Using Resource hints

  • Identify slow JavaScript resources and optimize the loading process by using the async attribute on <script> tags and establishing early connections to important origins (Resource hints such as dns-prefetch, preconnect, and preload)

Optimize images

• Lazy load below-the-fold images

  • When using lazy loading for below-the-fold images, the images are not loaded until the user scrolls down to the area of the page where the images are located. This can significantly reduce the initial load time of a webpage, as the browser does not need to load all the images at once

By implementing the above techniques and some more, Rakuten 24 ran an A/B test focused on optimizing Core Web Vitals and related metrics, and saw an improvement of:

• 53.37% in revenue per visitor.

• 33.13% in conversion rate.

• 15.20% in average order value.

• 9.99% in average time spent.

• A 35.12% reduction in exit rate.

Overall, proactive performance optimization is an important aspect of maintaining and improving the performance and user experience of a website.

By taking a proactive approach, businesses and organizations can ensure that their websites are fast, reliable, and able to handle increased traffic and usage over time.

If you liked my content, do kindly like and share in your network. And don't forget to subscribe to the newsletter to NEVER miss an article.