Successfully reported this slideshow.
Your SlideShare is downloading. ×

PWA + AMP: The Future of E-Commerce? Max Prin - BrightonSEO - Sept. 2018

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

PWA + AMP: The Future of E-Commerce? Max Prin - BrightonSEO - Sept. 2018

  1. 1. Max Prin @maxxeight PWA + AMP: The Future of E-Commerce? Slides: maxpr.in/pwamp
  2. 2. 2 Max Prin @maxxeight #
  3. 3. 3 Max Prin @maxxeight #
  4. 4. Max Prin @maxxeight4 #
  5. 5. Max Prin @maxxeight5 # AMP English m. English m. French Desktop English Desktop French rel="amphtml" rel="amphtml" rel="amphtml" rel="canonical" rel="amphtml" rel="canonical" rel="canonical" rel="alternate" rel="canonical" rel="alternate" rel="alternate" hreflang="en" rel="alternate" hreflang="fr" rel="alternate" hreflang="en" rel="alternate" hreflang="fr" rel="alternate" hreflang="en" rel="alternate" hreflang="fr" AMP French
  6. 6. 6 Max Prin @maxxeight # 0.0 0.5 1.0 1.5 2.0 2.5 3.0 2010 2011 2012 2013 2014 2015 2016 2017 2018 Billions Western Europe North America Middle East & Africa Latin America Central & Eastern Europe Asia-Pacific Source: Mobile Internet Users, eMarketer, January 2018 Worldwide Mobile Internet Users
  7. 7. 7 Max Prin @maxxeight # However, mobile phones… …have smaller screens (less space for content) …are slower (less processing power, memory) …can have weak connections (3G, 4G < Cable, Fiber)
  8. 8. Max Prin @maxxeight8 # Source: Soasta
  9. 9. Max Prin @maxxeight9 # Source: Soasta
  10. 10. Max Prin @maxxeight10 #
  11. 11. Max Prin @maxxeight11 #
  12. 12. Max Prin @maxxeight12 # AMP English m. English m. French Desktop English Desktop French rel="amphtml" rel="amphtml" rel="amphtml" rel="canonical" rel="amphtml" rel="canonical" rel="canonical" rel="alternate" rel="canonical" rel="alternate" rel="alternate" hreflang="en" rel="alternate" hreflang="fr" rel="alternate" hreflang="en" rel="alternate" hreflang="fr" rel="alternate" hreflang="en" rel="alternate" hreflang="fr" AMP French
  13. 13. Max Prin @maxxeight13 # Website English Website French rel="alternate" hreflang="en" rel="alternate" hreflang="fr"
  14. 14. Max Prin @maxxeight | #brightonSEO AMP (for e-commerce)
  15. 15. 15 Max Prin @maxxeight # Why are AMPs so fast? (in a nutshell) AMP HTML+JS AMP Cache (CDN) Prerendering
  16. 16. Max Prin @maxxeight | #brightonSEO over 60% of the clicks to AMP in Google search go to non-news sites
  17. 17. 17 Max Prin @maxxeight # 89% 6% 5% Websites without AMP Websites with AMP errors Websites without AMP errors Out of ~1000 online stores (picked globally, by traffic)
  18. 18. Max Prin @maxxeight | #brightonSEO Agenda Max Prin @maxxeight | #brightonSEO Category page <amp-sidebar> - Navigation <amp-carousel> <amp-list> - Product organization <amp-form> - Searching <amp-bind> - Filtering and sorting <amp-access> - Logged in/out
  19. 19. Max Prin @maxxeight | #brightonSEO Agenda Max Prin @maxxeight | #brightonSEO Product page <amp-video> <amp-accordion> - Product images/details <amp-form> <amp-carousel> - Comments/reviews <amp-selector> - Tabs/Thumbnails <amp-bind> - Color/size selection <amp-state> - Add to cart
  20. 20. Max Prin @maxxeight | #brightonSEO What about “SEO”? AMP is not a ranking factor A “really fast” site doesn’t rank better than a “fast” site Faster is better (+ AMP cache/pre-loading) AMP = mobile-friendly SERP visibility
  21. 21. 21 Max Prin @maxxeight # AMP documentation https://www.ampproject.org/docs/reference/components https://www.ampbyexample.com
  22. 22. 22 Max Prin @maxxeight # AMP tools https://search.google.com/test/amp https://technicalseo.com/seo-tools/amp/
  23. 23. Max Prin @maxxeight | #brightonSEO
  24. 24. Max Prin @maxxeight | #brightonSEO Agenda Max Prin @maxxeight | #brightonSEO Checkout Payment Requests API - Chrome only <amp-form> - Checkout within AMP?
  25. 25. Max Prin @maxxeight | #brightonSEO PWA (progressive web app)
  26. 26. Max Prin @maxxeight26 # Native apps Web apps
  27. 27. Max Prin @maxxeight27 # Native apps Web apps Reliable and Fast Engaging
  28. 28. Max Prin @maxxeight28 #
  29. 29. Max Prin @maxxeight | #brightonSEO Progressive Web Apps AMPs (the ultimate configuration)
  30. 30. 30 Max Prin @maxxeight # AMP as entry point into your PWA <amp-install-serviceworker>
  31. 31. 31 Max Prin @maxxeight # AMP as entry point into your PWA
  32. 32. 32 Max Prin @maxxeight # The service worker “hijacks” the click – The server handles the rest of the magic if (event.request.mode === 'navigate') { event.respondWith( fetch(event.request.url + '?pwa=true') ); } RewriteEngine on RewriteCond %{QUERY_STRING} pwa=true RewriteRule (.*) /pwa.php [L]
  33. 33. Max Prin @maxxeight | #brightonSEO
  34. 34. Max Prin @maxxeight | #brightonSEO What about “SEO”? Bots only crawl/index the AMP version of your pages No waste of resources crawling multiple URLs for the same content Clear signaling (i.e. don’t worry about your canonical tags) Pages are fast and preloaded in the SERP (AMP viewer) Pages are mobile-friendly
  35. 35. 35 Max Prin @maxxeight # PWAMP examples and resources https://pwamp.shop https://www.howpwampworks.com (by @aleyda)
  36. 36. Thank you!

Editor's Notes

  • How can Progressive Web Apps (PWA) and Accelerated Mobile Pages (AMP) work together to create an optimal user experience, from search to conversion? The idea behind this potential strategy (PWA + AMP) is based on the recent enhancements of the AMP framework for retail websites with new features allowing purchasing, related-products widgets, product and category pages etc. “PWAMP” might be the future of e-commerce by leveraging AMP for search visibility and CTR and PWA for user experience and conversion.
  • John Audette, Adam Audette, Jeremy Sanchez, Marshall Simmonds, Derek Wheeler, Bill Hunt
  • Page > Internet > Directory > Index > Rank (before scaled crawl)
  • https://ampbyexample.com/introduction/internationalization/

    Moving with the changes, be where the users and customers are: on their phones.
  • 3 Billion = 40% world population

    Smartphones are cheaper, portable (convenient)
    Some country are mobile-only.
  • This, on top of websites not well optimized for speed, leads to.. Higher bounce rates and lower conversion rates.
  • https://www.soasta.com/blog/spring-2017-online-retail-web-performance/
  • https://www.soasta.com/blog/spring-2017-online-retail-web-performance/
  • About 30% in the UK, making Amazon the 5th larger retailer.

    Let’s talk about competing with Amazon, in the Search results!
  • 2 birds one stone! Guess what? Search engines reward websites providing a good user experience! As long they can understand it!
    Its not just about the mobile, or speed, or UX, or just about the user for that matter
    - The user experience starts in search – ~30% of traffic to online retailers come from Organic search!
    It’s also about the bots: Search Experience Optimization: making sure bot understand the experience.

    => Creating a fast and reliable experience, from search results to conversion, that search engines can understand.
  • https://ampbyexample.com/introduction/internationalization/
  • One fast (+ great UX) website, one set of URLs for EVERYTHING (except language/country variations): Desktop, mobile, tablet, AMP, iOS and Android. AND FOR BOTS TO CRAWL/INDEX/RANK
  • https://www.ampproject.org/learn/about-how/
    https://medium.com/@cramforce/why-amp-is-fast-7d2ff1f48597
    Lazy loading
    Extensive use of preconnect
    Prefetching of lazy loaded resources
    All async JavaScript
    Inline style sheets
    Zero HTTP requests block font downloads.
    Instant loading through prerendering
    Prerendering only downloads resources above the fold
    Prerendering does not render things that might be expensive in terms of CPU
    Intelligent resource prioritization
    Uncoupling of document layout from resource downloads
    Maximum size for style sheet
    FastDOM-style DOM change batching
    Optimized for low count of style recalculations and layout
    Mitigations for third party JS worst-practices such as document.write
    Runtime cost of analytics instrumentation is independent of number of used analytics providers
    Extensions don’t block page layout
    CDN delivery available to all AMP documents
    All resources and the document are loaded from the same origin through the same HTTP 2.0 tunnel
    Animations can be GPU accelerated



  • Dave Besbris, VP of Engineering at Google
    over 31 million domains on the internet publishing AMP and they published over 5 billion pages.
    recipes, travel, retail, dictionaries, RapGenius…
  • https://www.ampproject.org/latest/blog/amp-bind-brings-flexible-interactivity-to-amp-pages/
  • <amp-list> for related products
    <amp-social-share>
  • Find out if the necessary features on your pages can be implemented with AMP components
  • AMP by itself is not the solution:

    Still hard to built a full ecom site with AMP: custom JS, checkout, etc. AMP can’t be the full solution for conversions
  • Why is the reach of web apps higher? Search engines (vs. app stores).

    Supported by all major browsers

    Low cost of acquisition
  • Why is the reach of web apps higher?
    Search engines (vs. app stores) – low cost of acquisition
    Supported by all major browsers

    Capabilities
    Reliable and Fast
    App shell cached locally (on 1st load): Fast loading when offline or with slow connection (on subsequent loads)
    Mobile-friendly (responsive)
    Secure (HTTPS)
    Engaging
    App icon on device’s home screen
    Push notifications


  • No need to be indexed
  • https://www.ampproject.org/docs/integration/pwa-amp
    https://www.ampproject.org/docs/integration/pwa-amp/amp-to-pwa

    - AMP for initial user acquisition
    AMP is an ideal solution for so-called leaf pages, content pages that your users discover organically through a search engine, a shared link by a friend or through a link on another site. Because of AMP's specialized pre-rendering, AMP pages load extremely fast, which in return means much less drop off (the latest DoubleClick study shows that more than 53% of all users will drop off after 3 seconds).
    - PWA for rich interactivity and engagement
    Progressive Web Apps, on the other hand, allow for much greater interactivity and engagement, but do not have the instant first-load characteristics of an AMP page. At their core is a technology called Service Worker, a client-side proxy that allows you to cache all sorts of assets for your pages, but said Service Worker only activates after the first load.
  • As an entry point because you don’t need amp outside of search results: yes they’re fast but your site can be as fast (+ CDN + caching) and subsequent visited pages, even if AMP, won’t be pre-rendered/pre-loaded in the browser like they are in Google search (in the AMP viewer)
  • https://www.ampproject.org/docs/integration/pwa-amp

    User gets the AMP from the SERP
    Service worker is installed on device
    Once activated, SW caches the “app shell” and initial data - Appl shell: web app – js framework, pushstate, etc..
    User clicks on a (internal) link
    Service worker “hijacks” the click
    Pre-cached PWA loads instantly
  • On the same URL!

×