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.
Max Prin
@maxxeight
PWA + AMP:
The Future of E-Commerce?
Slides:
maxpr.in/pwamp
2 Max Prin @maxxeight #
3 Max Prin @maxxeight #
Max Prin @maxxeight4 #
Max Prin @maxxeight5 #
AMP
English
m.
English
m.
French
Desktop
English
Desktop
French
rel="amphtml"
rel="amphtml"
rel="am...
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
N...
7 Max Prin @maxxeight #
However, mobile phones…
…have smaller screens
(less space for content)
…are slower
(less processin...
Max Prin @maxxeight8 #
Source: Soasta
Max Prin @maxxeight9 #
Source: Soasta
Max Prin @maxxeight10 #
Max Prin @maxxeight11 #
Max Prin @maxxeight12 #
AMP
English
m.
English
m.
French
Desktop
English
Desktop
French
rel="amphtml"
rel="amphtml"
rel="a...
Max Prin @maxxeight13 #
Website
English
Website
French
rel="alternate" hreflang="en"
rel="alternate" hreflang="fr"
Max Prin @maxxeight | #brightonSEO
AMP
(for e-commerce)
15 Max Prin @maxxeight #
Why are AMPs so fast? (in a nutshell)
AMP HTML+JS AMP Cache (CDN) Prerendering
Max Prin @maxxeight | #brightonSEO
over 60%
of the clicks to AMP in Google search go to non-news sites
17 Max Prin @maxxeight #
89%
6%
5%
Websites without AMP
Websites with AMP errors
Websites without AMP errors
Out of ~1000 ...
Max Prin @maxxeight | #brightonSEO
Agenda
Max Prin @maxxeight | #brightonSEO
Category page
<amp-sidebar>
- Navigation
<amp...
Max Prin @maxxeight | #brightonSEO
Agenda
Max Prin @maxxeight | #brightonSEO
Product page
<amp-video>
<amp-accordion>
- Pr...
Max Prin @maxxeight | #brightonSEO
What about “SEO”?
AMP is not a ranking factor
A “really fast” site doesn’t rank better ...
21 Max Prin @maxxeight #
AMP documentation
https://www.ampproject.org/docs/reference/components https://www.ampbyexample.c...
22 Max Prin @maxxeight #
AMP tools
https://search.google.com/test/amp https://technicalseo.com/seo-tools/amp/
Max Prin @maxxeight | #brightonSEO
Max Prin @maxxeight | #brightonSEO
Agenda
Max Prin @maxxeight | #brightonSEO
Checkout
Payment Requests API
- Chrome only
<...
Max Prin @maxxeight | #brightonSEO
PWA
(progressive web app)
Max Prin @maxxeight26 #
Native apps
Web apps
Max Prin @maxxeight27 #
Native apps
Web apps
Reliable and Fast
Engaging
Max Prin @maxxeight28 #
Max Prin @maxxeight | #brightonSEO
Progressive Web Apps AMPs
(the ultimate configuration)
30 Max Prin @maxxeight #
AMP as entry point into your PWA
<amp-install-serviceworker>
31 Max Prin @maxxeight #
AMP as entry point into your PWA
32 Max Prin @maxxeight #
The service worker “hijacks” the click – The server handles the rest of the magic
if (event.reque...
Max Prin @maxxeight | #brightonSEO
Max Prin @maxxeight | #brightonSEO
What about “SEO”?
Bots only crawl/index the AMP version of your pages
No waste of resou...
35 Max Prin @maxxeight #
PWAMP examples and resources
https://pwamp.shop https://www.howpwampworks.com (by @aleyda)
Thank you!
Upcoming SlideShare
Loading in …5
×

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

2,997 views

Published on

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

Published in: Internet
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ▲▲▲ http://ishbv.com/rockhardx/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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!

×