Google Mobile Web Hackathon
AMP x PWA to Fight againts High Bounce Rate and Low Conversion Rate
Cindy, Febi, Ifnu, Irfan. July, 7th 2017
Who We Are ?
• Cindy R Kalensang, Product Manager
• Hidayat Febiansyah, Principal Engineer
• Ifnu Bima, Development Manager
• Irfan Maulana, Sr. System Development
Engineer
The Problem
High Bounce Rate
• Mobile App bounce rate is 85% lower than
Mobile Web
• Desktop bounce rate is 20% lower than
Mobile Web
Low Conversion Rate
• Mobile App conversion rate is 8.7x Mobile
Web
• Desktop conversion rate is 5.7x Mobile Web
Mobile App uninstall rate
• One of the main reason that drives customer to
uninstall App is due to customer phone
storage limitation
“Mobile Web generates the highest traffic yet it has the highest bounce rate and lowest
bounce rate”
The Problem
Page load time is the website first impression for the user
With the implementation of AMP and PWA altogether
We are aiming to provide seamless browsing experience which will lead to engaged users
and results in higher conversion rate and more loyal customers
The Problem
Page load time is the website first impression for the user
With the implementation of AMP and PWA altogether
We are aiming to provide seamless browsing experience which will lead to engaged users
and results in higher conversion rate and more loyal customers
AMP Solution
• AMP for fast load in first time
• AMP give better search result in mobile
• AMP for reduce bounce rate
AMP Implementation
• Product List Page
– Search Page
– Category Page
– Merchant Page
– Brand Page
• Product Detail Page
AMP Tag
• Current :
amp-analytics
amp-img
amp-carousel
amp-selector
amp-social-share
amp-sidebar
• Next :
amp-state
amp-bind
amp-install-
serviceworker
amp-iframe
amp-list
AMP Implementation and Demo
• Will be live in next 2 weeks
• Done by 3 person, 1 employee (Dita) and 2
interns (Nikolas and Geraldo)
• Planning, development and testing ~ 2 months
• AMP initative was finalized after attending
google mobile conference here on february
Category Page (Before x After AMP)
NON-AMP AMP
Search Result Page (Before x After AMP)
NON-AMP AMP
Brand Page (Before x After AMP)
NON-AMP AMP
Brand Page (Before x After AMP)
NON-AMP AMP
Merchant Page (Before x After AMP)
NON-AMP AMP
Product Detail (Before x After AMP)
NON-AMP AMP
PWA Solution
• PWA for better engagement
• PWA for alternative apps with no install need
• PWA give shortcut in homescreen
• PWA for caching static resources
• PWA for fast load in repeat view
Blibli.com Travel (Before x After PWA)
NON-PWA PWA
Lighthouse Result (Before PWA)
Lighthouse Result (After PWA)
THANK YOU

Bliblidotcom - AMP And PWA

  • 1.
    Google Mobile WebHackathon AMP x PWA to Fight againts High Bounce Rate and Low Conversion Rate Cindy, Febi, Ifnu, Irfan. July, 7th 2017
  • 2.
    Who We Are? • Cindy R Kalensang, Product Manager • Hidayat Febiansyah, Principal Engineer • Ifnu Bima, Development Manager • Irfan Maulana, Sr. System Development Engineer
  • 3.
    The Problem High BounceRate • Mobile App bounce rate is 85% lower than Mobile Web • Desktop bounce rate is 20% lower than Mobile Web Low Conversion Rate • Mobile App conversion rate is 8.7x Mobile Web • Desktop conversion rate is 5.7x Mobile Web Mobile App uninstall rate • One of the main reason that drives customer to uninstall App is due to customer phone storage limitation “Mobile Web generates the highest traffic yet it has the highest bounce rate and lowest bounce rate”
  • 4.
    The Problem Page loadtime is the website first impression for the user With the implementation of AMP and PWA altogether We are aiming to provide seamless browsing experience which will lead to engaged users and results in higher conversion rate and more loyal customers
  • 5.
    The Problem Page loadtime is the website first impression for the user With the implementation of AMP and PWA altogether We are aiming to provide seamless browsing experience which will lead to engaged users and results in higher conversion rate and more loyal customers
  • 6.
    AMP Solution • AMPfor fast load in first time • AMP give better search result in mobile • AMP for reduce bounce rate
  • 7.
    AMP Implementation • ProductList Page – Search Page – Category Page – Merchant Page – Brand Page • Product Detail Page
  • 8.
    AMP Tag • Current: amp-analytics amp-img amp-carousel amp-selector amp-social-share amp-sidebar • Next : amp-state amp-bind amp-install- serviceworker amp-iframe amp-list
  • 9.
    AMP Implementation andDemo • Will be live in next 2 weeks • Done by 3 person, 1 employee (Dita) and 2 interns (Nikolas and Geraldo) • Planning, development and testing ~ 2 months • AMP initative was finalized after attending google mobile conference here on february
  • 10.
    Category Page (Beforex After AMP) NON-AMP AMP
  • 11.
    Search Result Page(Before x After AMP) NON-AMP AMP
  • 12.
    Brand Page (Beforex After AMP) NON-AMP AMP
  • 13.
    Brand Page (Beforex After AMP) NON-AMP AMP
  • 14.
    Merchant Page (Beforex After AMP) NON-AMP AMP
  • 15.
    Product Detail (Beforex After AMP) NON-AMP AMP
  • 16.
    PWA Solution • PWAfor better engagement • PWA for alternative apps with no install need • PWA give shortcut in homescreen • PWA for caching static resources • PWA for fast load in repeat view
  • 17.
    Blibli.com Travel (Beforex After PWA) NON-PWA PWA
  • 18.
  • 19.
  • 20.