PWA + AMP: The Future of E-Commerce? Max Prin - BrightonSEO - Sept. 2018
•
9 likes•3,831 views
PWA + AMP: The Future of E-Commerce? Max Prin - BrightonSEO - Sept. 2018
Recommended
Recommended
More Related Content
What's hot
What's hot (19)
Similar to PWA + AMP: The Future of E-Commerce? Max Prin - BrightonSEO - Sept. 2018
Similar to PWA + AMP: The Future of E-Commerce? Max Prin - BrightonSEO - Sept. 2018 (20)
Recently uploaded
Recently uploaded (9)
PWA + AMP: The Future of E-Commerce? Max Prin - BrightonSEO - Sept. 2018
- 1. Max Prin @maxxeight PWA + AMP: The Future of E-Commerce? Slides: maxpr.in/pwamp
- 2. 2 Max Prin @maxxeight #
- 3. 3 Max Prin @maxxeight #
- 4. Max Prin @maxxeight4 #
- 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 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 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. Max Prin @maxxeight8 # Source: Soasta
- 9. Max Prin @maxxeight9 # Source: Soasta
- 10. Max Prin @maxxeight10 #
- 11. Max Prin @maxxeight11 #
- 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. Max Prin @maxxeight13 # Website English Website French rel="alternate" hreflang="en" rel="alternate" hreflang="fr"
- 14. Max Prin @maxxeight | #brightonSEO AMP (for e-commerce)
- 15. 15 Max Prin @maxxeight # Why are AMPs so fast? (in a nutshell) AMP HTML+JS AMP Cache (CDN) Prerendering
- 16. Max Prin @maxxeight | #brightonSEO over 60% of the clicks to AMP in Google search go to non-news sites
- 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. 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. 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. 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 Max Prin @maxxeight # AMP documentation https://www.ampproject.org/docs/reference/components https://www.ampbyexample.com
- 22. 22 Max Prin @maxxeight # AMP tools https://search.google.com/test/amp https://technicalseo.com/seo-tools/amp/
- 23. Max Prin @maxxeight | #brightonSEO
- 24. Max Prin @maxxeight | #brightonSEO Agenda Max Prin @maxxeight | #brightonSEO Checkout Payment Requests API - Chrome only <amp-form> - Checkout within AMP?
- 25. Max Prin @maxxeight | #brightonSEO PWA (progressive web app)
- 26. Max Prin @maxxeight26 # Native apps Web apps
- 27. Max Prin @maxxeight27 # Native apps Web apps Reliable and Fast Engaging
- 28. Max Prin @maxxeight28 #
- 29. Max Prin @maxxeight | #brightonSEO Progressive Web Apps AMPs (the ultimate configuration)
- 30. 30 Max Prin @maxxeight # AMP as entry point into your PWA <amp-install-serviceworker>
- 31. 31 Max Prin @maxxeight # AMP as entry point into your PWA
- 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. Max Prin @maxxeight | #brightonSEO
- 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 Max Prin @maxxeight # PWAMP examples and resources https://pwamp.shop https://www.howpwampworks.com (by @aleyda)
- 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!