Blibli's PWA generates 10x more revenue per user than their previous mobile website

2021-06-15T00:00:00Z

Blibli is a well known e-commerce marketplace in Indonesia. The company had over 29 million average monthly website visits in 2019. In a recent study, Blibli's web team found that their mobile web platform is a significant visitor and user acquisition platform, with 70% of web users landing on mobile and 30% of web users landing on desktop.

With that insight, Blibli embarked on a journey to develop a better web experience and improve conversions. As a result, they were able to achieve some exceptional results:

42_%

Reduction in bounce rates

8_x

Better mCVR in installed PWA compared to browser mobile web

2.5_x

More pages/sessions on installed PWA

Highlighting the opportunity #

Blibli identified the following areas of opportunities:

For Blibli, the mobile web platform was important for user acquisition with many users on mid- to low-tier devices.
Indonesia's internet economy was expanding rapidly beyond tier 1 cities. Hence, PWA and fast pages were a good investment to support user needs like limited storage and slow networks.
50% of users that are coming to the Blibli web platform are returning users.

The approach they used #

The team took a staged strategy of short- to medium-term improvements on the mobile web platform. This included:

A performance optimized website including a UX revamped home page.
A lite version of the home page for new users with a service worker to cache critical assets for subsequent navigation.
A Progressive Web App (PWA) for returning users.

User flow #

New visitors are presented with a lightweight page which is three times faster when compared to the old home page.

A lightweight page that is three times faster than the old.

On subsequent pages, Blibli prompts users to add the PWA shortcut to their home screen.

The add to home screen prompt.

If users lose the network connection, they are presented with an elegant offline fallback page.

An elegent offline fallback page.

Blibli's lite page created a first impression that Blibli.com is fast and responsive. Moreover, the lite page streamlined the number of features by only focusing on those that deliver the value proposition of Blibli.

Comparison of loading times before and after streamlining.

Blibli's PWA is installable, giving it an app-like look and feel. It is also fast and reliable which was achieved using service worker caching and graceful offline fallback.

The offline fallback.

This comes as a delight for web users, a large proportion of whom use mid-tier devices. Since Blibli's PWA is less than 1MB in size (that's a whopping 24 times lighter than their Android app!), there is much less friction for users to install it. It also makes it easier for Blibli to retain users while providing them with a seamless app-like experience.

Set performance budgets #

Blibli made performance budgeting a performance standard within the tech development and management, where the standard was reviewed on a regular basis. It's set as the KPI of internal tech development, with the guidance of top management to ensure the best platform for all of our users.

Overall business results #

3x reduction in page load times.
42% reduction in bounce rates.
8x Better mobile conversion rates in installed PWA compared to browser mobile web.
2.5x more pages/sessions on installed PWA.
10x more revenue per user compared to the previous mobile website.

"Speed and PWA were a valuable investment for us to provide the best mobile experience and representing our mission, to deliver the best platform for our users" —Collin Dion Agata, Lead Product Manager, Blibli

Photo by Cristian Escobar on Unsplash.

The business impact of Core Web Vitals

2021-05-18T00:00:00Z

Are you struggling to convince your stakeholders to adopt Core Web Vitals? Or are you wondering if it actually helps your business? This article will help you understand how Core Web Vitals correlate with key business metrics by exploring examples of companies which have already seen positive impact for their users and business.

If you prefer video, check out this talk from Google I/O:

Why Core Web Vitals matter to your users and business #

Different stakeholders in an organization can have different priorities. Core Web Vitals can bring them all on the same page by focusing on optimizing user-centric metrics and the resulting business growth.

The path to good Core Web Vitals can vary from site to site depending on where they are in the performance journey and how complex the site design is. It can range from grabbing the low-hanging fruit and getting meaningful results; to implementing complex solutions that fix challenging issues. Regardless of the amount of time spent, decision makers should treat this as a long term investment into growth of their business. Delivering a fast and seamless navigation experience delights users and helps turn them into loyal and returning customers. For product managers, performance should be an important criteria that defines the quality and success of new product features. And product excellence and working on interesting challenges improves developer satisfaction as well.

While Core Web Vitals as a ranking signal gives additional motivation to invest time in performance, adopting Core Web Vitals has many other short- and long-term benefits beyond ranking. Let's explore several case studies of global and local brands who adopted Core Web Vitals (before it had impact on ranking) because of its focus on user experience.

Case studies #

Vodafone #

Vodafone (Italy) improved LCP by 31% to achieve 8% more sales.

Techniques #

Server Side Render the critical HTML.
Reduce render blocking Javascript.
Image optimization techniques.
Resize hero image; defer non critical resources.

Key learnings #

A/B testing is the best way to measure the meaningful impact.
A/B should be a server side one.

iCook #

iCook improved CLS by 15% to achieve 10% more ad revenue.

Techniques #

Less variability in ad unit size and fixed size ad slots pre-allocated in UI.
Optimized ad script loading logic to prioritize header bidding and defer non-critical JS.

Key learnings #

Fill rate might get impacted but eventually revenue uplifts with ads viewability improvement.

Tokopedia #

Tokopedia improved LCP by 55% and saw 23% better average session duration.

Techniques #

Server-side render (SSR) LCP element.
Preload LCP Element.
Image optimization (compression, WebP, lazy load non-critical images).

Key learnings #

Built a performance monitoring dashboard to monitor progress and impact across teams.
Experimented with different rendering techniques (for example, SSR LCP element vs SSR above the fold content vs Full client-side rendering).

Redbus #

CWV fixes contributed to 80-100% mobile conversion rates(mCVR) and significant domain ranking uplift across Redbus’s global market properties.

Techniques #

Fixing slots for page components and removing unoptimized tag insertion scripts improved CLS.
Optimizing third-party scripts and building microservices with single responsibility principle significantly reduced TTI and TBT.

Key learnings #

Reducing CLS from 1.65 to 0 significantly uplifted their domain rankings globally.
Reducing TTI from around 8 s to around 4 s and TBT from around 1200 ms to around 700 ms contributed to an 80-100% increase in mCVR across global properties.
Using RUM tools helped capture the real world performance metrics in lower tier markets.
Adopting a performance culture is very important to avoid regression. This also improves team productivity thanks to optimized code, faster releases, and fewer production issues.

The case studies above show that you can achieve a lot by adopting best practices and implementing quick wins. Here are a few more real-world examples of this point.

The above results were achieved by grabbing low hanging fruit such as:

Image optimization	JavaScript optimization	Ads and dynamic content
Using WebP image format	Deferring third-party JS	Reserving space for ads above-the-fold
Using image CDNs	Removing render-blocking and unused JS	Setting height for dynamic content
Compression	Lazy loading non-critical JS
Deferring non-critical images	Preloading critical JS
Preloading hero images
Specifying aspect ratio

For more best practices, check out the Web Vitals guidance. Use PageSpeed Insights to audit your website and get actionable recommendations immediately.

There are several more global brands which have also benefited from investing in Core Web Vitals.

Tencent Video saw 70% better CTR for videos by passing Core Web Vitals.
Cdiscount improved all 3 metrics which contributed to 6% revenue uplift in their Black Friday sale.
Wix increased mobile origins passing Core Web Vitals by over 250% year-on-year.
Nykaa found that a 40% improvement in LCP led to 28% more organic traffic from T2/T3 cities.
NIKKEI STYLE's 18% LCP improvement resulted in 9% more pageviews per session.
NDTV gained a 50% better bounce rate after halving LCP, along with other product changes..
Agrofy Market's 70% better LCP correlated to 76% reduction in load abandonment..
Flipkart achieved 2.6% reduction in bounce rate by improving Core Web Vitals metrics.
Ameba Manga improved the number of comics read by 2-3 times by improving the CLS score 10 times.
Yahoo! Japan fixed CLS which led to a 98% reduction in poor pages and 15% uplift in page views per session..
AliExpress improved CLS by 10 times and LCP by double, which translated to 15% lesser bounce rates.
GEDI saw 77% reduction in CLS and an 8% reduction in bounce rate.

How can you get started now? #

Step 1: Start measuring #

Start by measuring field data for your site using Real User Monitoring (RUM) tools. There are various Google and third-party (3P) RUM tools available already.

Google RUM tools #

Search Console
PageSpeed Insights
web-vitals JavaScript library
Chrome User Experience Report (CrUX)

Third-party RUM tools #

Cloudflare
New Relic
Akamai
Calibre
Blue Triangle
Sentry
SpeedCurve
Raygun

Pick the tool that works best for you. You can go a step further and integrate with Google Analytics 4 to correlate Core Web Vitals with your business metrics.

Step 2: Convince your stakeholders #

Educate your stakeholders about the importance of adopting Core Web Vitals to improve user experience and its correlation with company's business metrics.
Get a sponsor internally to start a small experiment.
Create a shared goal among stakeholders to improve Core Web Vitals across teams.

Step 3: Deliver successful implementation using these tips #

Prioritize: Pick a page with high traffic and/or conversion significance to deliver meaningful results (for example, ads landing page, conversion page, or popular pages).
A/B Test: Use server side testing to avoid any rendering cost. Compare results between optimized and unoptimized versions.
Monitor: Use continuous monitoring to prevent regressions.

Lastly, we believe that performance is a journey not a destination. On that note, we plan to keep this article updated with the latest case study highlights. If you also have a compelling business win and would like to be featured in this article, submit a content proposal.

Swetha Gopalakrishnan on web.dev

Blibli's PWA generates 10x more revenue per user than their previous mobile website

Highlighting the opportunity #

The approach they used #

User flow #

Set performance budgets #

Overall business results #

The business impact of Core Web Vitals

Why Core Web Vitals matter to your users and business #

Case studies #

Vodafone #

Techniques #

Key learnings #

iCook #

Techniques #

Key learnings #

Tokopedia #

Techniques #

Key learnings #

Redbus #

Techniques #

Key learnings #

How can you get started now? #

Step 1: Start measuring #

Google RUM tools #

Third-party RUM tools #

Step 2: Convince your stakeholders #

Step 3: Deliver successful implementation using these tips #