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.

E-commerce Berlin Expo 2017 - AMP and Progressive Web Apps – Start Fast, Stay Engaged

508 views

Published on

Laurence Kozera (Foucault) Global Product Partnerships Google
Christian Schlueter Teamlead Product Xing
Konstantin Guratzsch SEO Manager Xing

What if it were possible to use PWAs, along with Accelerated Mobile Pages (AMP), to deliver fast initial loading and reliable second-visit performance, as well as advanced features like offline reading and richer UI treatment for your audience? Well it is! Google Chrome worked with 11 global brands on their mobile presence to increase user engagement and speed. Hear from Google Chrome and XING on the benefits of progressive web apps and AMP to increase user engagement.

Published in: Technology
  • Be the first to comment

E-commerce Berlin Expo 2017 - AMP and Progressive Web Apps – Start Fast, Stay Engaged

  1. 1. Today’s users moved to a mobile world. Why hasn’t the web? Laurence Kozera Konstantin Guratzsch Christian Schlüter Next Generation Web
  2. 2. 3.4 BN (2016) 0.034 BN (1996) Source: ITU, 2016
  3. 3. Who has …?
  4. 4. September 2010
  5. 5. REACH CAPABILITIES
  6. 6. REACH CAPABILITIES
  7. 7. Accelerated Mobile Pages 4x faster and <1s median load time of landing pages
  8. 8. Accelerated Mobile Pages & Progressive Web Apps for XING Jobs xing.com/jobs
  9. 9. 11 million users 80.000 groups 12.000 yearly events 250.000 businesses 60.000 active HR employees 1 million jobs
  10. 10. AMP Desktop to mobile Web can’t keep up ❖ page loads slowly ❖ scrolling is non responsive ❖ content shifts around Why AMP?
  11. 11. Source: Chrome Dev Summit, 2016 of users bounce from sites that take longer than 3 seconds to load 53% Performance as a feature
  12. 12. Content Delivery Network Why is AMP so fast HTML compression JavaScript limitation & compression adjust image size to display + + Reduction Website with content reduced to a minimum is cached on a proxy server in the Content Delivery Network
  13. 13. explore options • Content Delivery Network • marketing and menotization • fast page speed • higher mobile user satisfaction • tracking possibilities • Google carousel as a prominent feature Pros Cons
  14. 14. homepage no implementation yet SERP AMP ready job detail page no implementation planned
  15. 15. More info on AMP & implementation ● AMP Project Website and getting started guide ● Learn about extensions, ads and analytics ● Get help on StackOverflow ● Videos: NewsLab Hangouts, AMP with Paul Bakaus & AMP Anatomy with Malte Ubl ● Get help in the Webmaster Central Forums ● Learn more about AMP in Google Search ● Read about Structured Data for Top Stories ● Check for errors in the Search Console
  16. 16. AMP Result
  17. 17. Error Reports and Bug Fixing
  18. 18. Performance Assessment
  19. 19. Learnings • converted 300k sites to AMP with one FTE in three weeks • look out for errors and bug fixing • not yet completely established in Germany • not a quick win but long term vision
  20. 20. The Future of AMP
  21. 21. Progressive Web App Accelerated Mobile Pages Push Notifications Add to Home Screen Acquisition Engagement Conversion Retention lebenslauf.com anschreiben.com bewerbung.com gehaltsindex.com xing.com/jobs
  22. 22. Small Screen History mobile web browsing mobile module system native apps CMS enter market hybrid apps one page applications instant applications PWA
  23. 23. So why exactly PWA? ● From a user & product perspective ○ Radically improve web user experience ● Reliable / Fast / Engaging ○ Reliable, show jobs immediately regardless of network ○ Fast, respond quickly to to user interactions, every action should feel fast ○ Engaging, behave like a native app and provide features known from native apps ● End-to-end performance ○ Slow slide/page load -> bounce rate goes up ○ Combine great user experiences with small load time ○ Overall time spend comprises of response, animate, idle & load
  24. 24. XING Jobs approach on implementing PWA? build on top new/beta XING Jobs ● AMP for SERPs ● Service Worker on xing.com/jobs ● Caching of common assets ● Web App Manifest ● A2HS Possible next steps... ● Offline support ● Push Notifications ● Seamless log-in Opportunity ● One version ● No legacy features ● Less maintenance ● Unlikely to be possible with established product ● Chance to try dedicated single-purpose use-case
  25. 25. Service Worker ● preloading ● offline mobile web ● push notifications ● background sync
  26. 26. Service Worker ● preloading ● offline mobile web ● push notifications ● background sync
  27. 27. Web app manifest Add to Home Screen Provide web app information, describe how to install/configure the app & where to find it in the app stores.
  28. 28. Add to Home Screen ● Aka A2HS or Web App Install Banners ● offline experience ● app-like feeling without the download ● full screen experience ● faster page load ● no app stores
  29. 29. Location detection ● Retrieve location information from users device ● Allow user to overwrite and remember this information
  30. 30. What else? Depends on product use-cases! ● Push notifications ○ (re-) engage users in the right moment, keep updated, customized content ● Offline support ○ allow users to use your product while being offline or not on a reliable network ● Seamless log-in ○ reduce the hassle of remembering & entering data on mobile ● Hardware-based ○ e.g. click-to-call, take audio/video/image
  31. 31. Advantages ● no app download required / instead small increments of content ● web technology stack ● app features available, like offline support ● significantly faster page load ● increase of conversions and active users
  32. 32. Conclusion ● a better, faster mobile web ● great user experience ● a technology combination that is relevant for product & will matter long term

×