Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Bliblidotcom - Google Mobile Web Hackaton for AMP and PWA

Bliblidotcom - Google Mobile Web Hackaton for AMP and PWA

Presenting result from implementation AMP and PWA in Google Mobile Web Hackaton

D83b3739651001461f48763639b90b50?s=128

Irfan Maulana

August 25, 2017
Tweet

Transcript

  1. Google Mobile Web Hackathon 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 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”
  4. 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
  5. 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
  6. AMP Solution • AMP for fast load in first time

    • AMP give better search result in mobile • AMP for reduce bounce rate
  7. AMP Implementation • Product List 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 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
  10. Category Page (Before x After AMP) NON-AMP AMP

  11. Search Result Page (Before x After AMP) NON-AMP AMP

  12. Brand Page (Before x After AMP) NON-AMP AMP

  13. Brand Page (Before x After AMP) NON-AMP AMP

  14. Merchant Page (Before x After AMP) NON-AMP AMP

  15. Product Detail (Before x After AMP) NON-AMP AMP

  16. 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
  17. Blibli.com Travel (Before x After PWA) NON-PWA PWA

  18. Lighthouse Result (Before PWA)

  19. Lighthouse Result (After PWA)

  20. THANK YOU