Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Focus sur les PWA par Loic de Saint-Andrieu de Google

256 views

Published on

D’après Forrester, seulement 1% des consommateurs français considèrent que les marques délivrent une bonne expérience client quand, à titre de comparaison, 14% des consommateurs anglais se disent satisfaits. Les français sont aujourd’hui largement “mobile first” avec 75% du temps passé en ligne sur mobile or ils sont toujours plus exigeants, impatients et curieux. Comment faire pour améliorer l’expérience digitale sur mobile ? Pour Google la réponse repose sur une expérience app-like sur le web.
Loïc de Saint-Andrieu, Head of Customer Experience FR @Google

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Focus sur les PWA par Loic de Saint-Andrieu de Google

  1. 1. Proprietary + Confidential Loïc de Saint-Andrieu - Head of Customer Experience Jules Rigaud - Mobile Lead Meetup Comment donner une expérience App-like à mes users web mobile ?
  2. 2. Proprietary + ConfidentialProprietary + Confidential Agenda ● Why mobile web matters ? ● What are the user benefits ? ● What are the business impacts ? ● How to make it happen ? ● The future of web ?
  3. 3. Proprietary + ConfidentialProprietary + Confidential Why mobile web matters ?
  4. 4. Proprietary + ConfidentialProprietary + Confidential 1h18min 25 min French internet users are mobile 1st Source : Médiamétrie // Netratings, Aout 2019 2h 27 min All users 15-34 yo
  5. 5. Proprietary + ConfidentialProprietary + Confidential But mobile sites are not catching up contentbazaar.co/20160314/pi-way Painful interfaceNot reactiveSlow contentbazaar.co/20160314/pi-way Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco contentbazaar.co/20160314/pi-way
  6. 6. Proprietary + ConfidentialProprietary + Confidential Source: StatCounter, Quarterly Ecommerce Report from Monetate That’s why mobile conversion rate are low Conversion rateTime spent on device MobileDesktop 4x Mobile conversion rate Desktop conversion rate 1/2
  7. 7. Proprietary + Confidential 87% 13% time spent in native apps on the web Source: eMarketer, 2019 First, consumers spent most time in native apps
  8. 8. Proprietary + Confidential 77% 23% time spent in top 3 apps on a device All other apps Source: eMarketer, 2018 Your App ? But usage is highly concentrated
  9. 9. Proprietary + Confidential 49% of users download 0 apps per month Source: Comscore & eMarketer 6 mobile domains per day but browse And the web is key to drive awareness
  10. 10. Proprietary + ConfidentialProprietary + Confidential REACH CAPABILITIES Apps are more engaging, but web reaches more users Mobile Apps Mobile Websites
  11. 11. Proprietary + ConfidentialProprietary + Confidential REACH CAPABILITIES Apps can be easily surfaced and accessed Google Play Instant App Deeplink Android Slices Mobile Websites
  12. 12. Proprietary + ConfidentialProprietary + Confidential REACH CAPABILITIES PWA are websites as engaging as a native app Mobile Apps Mobile Websites PWA
  13. 13. Proprietary + ConfidentialProprietary + Confidential Features PWA iOS PWA Native Push notifications Yes No Yes Home screen installation Yes Yes Yes Offline Yes Yes Yes Geolocation Yes Yes Yes Geofencing / background No No Yes Deep Linking Yes Yes Yes Contacts No No Yes Sharing Yes Yes Yes Payments Yes Yes Yes Credentials Yes No Yes Sensors & Hardware Camera Yes Yes Yes Gyroscope Yes Yes Yes Bluetooth No* No Yes NFC No* No Yes PWAs are a set of APIs for app-like experiences
  14. 14. Proprietary + ConfidentialProprietary + Confidential What are the user benefits ?
  15. 15. Proprietary + ConfidentialProprietary + Confidential Fast Installable Reliable Engaging Your users demanded app-like experiences like an app u know
  16. 16. Proprietary + ConfidentialProprietary + Confidential Conversion rate (%) Note: Data under 2.4 sec removed due to high rate of 404s and other errors skewing results. 1.7 1.6 1.4 1.2 1.0 0.8 0.6 0.4 0.2 0.0 1.2 1.5 1.8 2. 2.5 2.7 3.0 3.3 3.5 4.2 4.5 4.8 5.1 5.4 5.7 6.0 6.3 6.6 6.9 7.2 7.5 7.8 8.1 8.4 8.7 9.0 9.3 9.6 9.9 Load time (seconds) Conversionrate(%) 1.9% conversion rate (2.5 seconds) 1.5% conversion rate (3.5 seconds) 1 second 27% more conversions Conversion rate (%) Source: "Mobile performance conversion rate" Note: Data under 2.4 sec removed due to high rate of 404s and other errors skewing results. Mobile pages that load 1s faster see up to 27% increase in CvR
  17. 17. Proprietary + ConfidentialProprietary + Confidential ‘‘ Chrome Dev Summit latest news Chrome may identify sites that typically load fast or slow for users with clear badging ‘‘
  18. 18. Proprietary + ConfidentialProprietary + Confidential Improve your webperf Measure your webperf with Google PageSpeed Insights KPI Speed Index
  19. 19. Proprietary + ConfidentialProprietary + Confidential Web is getting slower Despite the increase in and availability of best practice guidance, sites continue to ship bloated code to their users… ...since Nov 2010, http archive reports a significant increase in ● Image bytes +555% ● Image requests +115% ● Request size +294% ● JavaScript bytes +585% ● JavaScript requests +350% 40% of brands who optimize speed regress in 6 months Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem State of the web Size & Data Transfer Loading Speed (First Contentful Paint) Median Desktop 2.0 seconds ⇩29% Median Mobile 6.0 seconds ⇧ 25% Median Desktop 1502 KB ⇧ 221% Median Mobile 1568 KB ⇧ 983% (Nov 15, 2010 - July 1, 2018) (Dec 15, 2016 - July 1, 2018)
  20. 20. Proprietary + ConfidentialProprietary + Confidential Webperf governance model A single dashboard KPIs shared between funtional & IT teams Dedicated Webperf owner for IT and for the functional team 1 2 3
  21. 21. Proprietary + ConfidentialProprietary + Confidential Fast page load with the service worker First View Repeat View with Service Worker Page load time (seconds) Page Loaded! Page Loaded! Service Worker provides flexible content caching for entire user journey. Load static and dynamic content instantly from Service Worker. Pre-fetch the next page! Navigate to next page
  22. 22. Proprietary + ConfidentialProprietary + Confidential Fast page load with the service worker ClassicPWA
  23. 23. Proprietary + ConfidentialProprietary + Confidential How to implement a service worker? Re-structure your site with App Shell Model and break JS into smaller chunks. Site restructuring1 Implement Service Worker using Workbox 3 Plan the caching strategies for your scenarios 2 Main JS JS chunk JS chunk JS chunk Evaluate and pick the right caching strategies for each resource. This depends on the user experience you are designing for users. Create a service worker using Workbox. Workbox provides a number of pre-defined caching strategies. Please note that a service worker registers on domain level. E.g. www.example.com and m.example.com needs two different service workers.
  24. 24. Proprietary + ConfidentialProprietary + Confidential Be Installable : no friction for install
  25. 25. Proprietary + ConfidentialProprietary + Confidential The right message at the right time
  26. 26. Proprietary + ConfidentialProprietary + Confidential
  27. 27. Proprietary + ConfidentialProprietary + Confidential More informations on : developers.google.com/web https://developers.google.com/web/fundamentals/app-install-banners/promoting-install-mobile
  28. 28. Proprietary + ConfidentialProprietary + Confidential Be reliable with offline & poor network experience Trivago suggest to play a game when the user goes offline 67% of users whose internet connection was interrupted came back
  29. 29. Proprietary + ConfidentialProprietary + Confidential Engage with push notifications User chooses to opt-in to push notifications. Push Notification displayed even when browser is not open. Brings user back into mobile website.
  30. 30. Proprietary + ConfidentialProprietary + Confidential Being timely, precise and relevant is crucial for notifications When, it’s timely what & who, it’s relevant What, it’s precise
  31. 31. Proprietary + ConfidentialProprietary + Confidential What are the business impacts ?
  32. 32. Proprietary + ConfidentialProprietary + Confidential Etam ● Instant revisit ● Desktop conversion rate increase ● Conversion rate +30% ● Avg basket value +18%
  33. 33. Navigation hors ligne Etam, un pionnier de l'expérience e-commerce next generation PWA présente dans le Google Play Store - un seul code à gérer PWA dans le Play Store Sign-in Google Pay Ajout à l’écran d’accueil Acquisition Engagement Engagement Conversion Retention Le protocole WebAuth facilite le login avec l’empreinte digitale sur le web Liste de favoris accessible en hors ligne (et donc en magasin) Paiement en 3 clics grâce à Google Pay +30% de taux de conversion des utilisateurs venant du raccourci
  34. 34. Proprietary + Confidential Weekendesk mix web & app to create a seamless experience Thanks to the Service Worker, the website is 15-30% faster and transitions between pages are smoother On 2nd page visited, Weekendesk proposes you to add the PWA shortcut to their home screen CvR x2.5 from PWA users When losing network connection, you can still access your wishlist in offline mode You can even install the PWA from the Play Store like a native app
  35. 35. Proprietary + ConfidentialProprietary + Confidential How to make it happen ?
  36. 36. Proprietary + ConfidentialProprietary + Confidential You don’t have to go all-in from day one PRODUCT ROADMAP EXAMPLE Sprint n+2 Add to Home screen Sprint n+3 Basic offline page Sprint n Cache Strategy with service workers Sprint n+4 Push Notifications
  37. 37. Proprietary + ConfidentialProprietary + Confidential Step 1: Fast & reliable → Service worker, interactive within 10s, offline mode Step 2: Installable → HTTPS, add to home screen Step 3: Optimized → full-screen mode, splash screen, push notifications Check your Lighthouse PWA Audit
  38. 38. Proprietary + ConfidentialProprietary + Confidential The future of web
  39. 39. Proprietary + ConfidentialProprietary + Confidential https://developers.google.com/web/progressive-web-apps/desktop PWA are available on Desktop since this summer !
  40. 40. Proprietary + ConfidentialProprietary + Confidential Your PWA can be listed in Google Play through Trusted Web Activities And also on Microsoft Store & Samsung Galaxy Store
  41. 41. Proprietary + ConfidentialProprietary + Confidential Fresh news from Chrome Dev Summit ! New Web APIs SMS Receiver Contact Picker Native File System API https://blog.chromium.org/2019/11/chrome-dev-summit-2019-elevating-web.html
  42. 42. Proprietary + ConfidentialProprietary + Confidential If you want to deep dive : goo.gle/codec Code, Design, Culture #codec

×