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!