18. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX18
Progressive Web AMPs
- AMP pages with PWA features
- AMP as entry point into your PWA
- AMP as data source for your PWA
19. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX19
AMP as entry point into your PWA
<amp-install-serviceworker>
20. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX20
AMP as entry point into your PWA
1) User gets the AMP from the SERP
2) Service worker is installed on device
• Once activated, SW caches the
“app shell” and initial data
3) User clicks on a (internal) link
4) Pre-cached PWA loads instantly
“Start fast, stay fast” – Alex Rusell
21. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX21
AMP as entry point into your PWA
1) User gets the AMP from the SERP
2) Service worker is installed on device
• Once activated, SW caches the
“app shell” and initial data
3) User clicks on a (internal) link
4) SW hijacks the click
5) Pre-cached PWA loads instantly
22. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX22
The Service-Worker Hijacks The Click
if (request = navigate) {
if (requested page is cached) {serve cached
version}
else {fetch, serve and cache PWA version}
} else {
if (requested URL is cached) {serve cached
version}
else {fetch, serve and cache asset}
}
23. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX23
PWA + AMP = PWAMP
The AMP framework is
not compatible with
JavaScript frameworks
(e.g. pushState)
24. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX
What about “SEO”?
AMP is not a ranking factor
A “really fast” site doesn’t rank better than a “fast site”
26. Max Prin @maxxeight | Engage Conference 2018 #EngagePDX
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
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…
More than 50% of internet traffic (and Google searches) is from mobile devices
https://blog.kissmetrics.com/8-important-ecommerce-stats/ : 18,000 plus stores in Yotpo’s database
https://www.smartinsights.com/ecommerce/ecommerce-strategy/37-indispensable-ecommerce-stats-to-inform-your-2017-strategy/
8. Traffic sources. 43% of e-commerce traffic comes from Google search (organic) and 26% comes from Google Adwords. (Source: Wolfgang digital)
https://www.thinkwithgoogle.com/marketing-resources/experience-design/mobile-page-speed-load-time/
https://support.google.com/partners/answer/7336278?hl=en
https://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/
Too fast? error pages
AMP is a natural fit for e-commerce because AMP makes web pages fast, and fast pages help with purchase conversions.
http://www.httparchive.org/interesting.php?a=All&l=Feb%2015%202018&s=Top1000 of the top 1M sites Alexa
https://amphtml.wordpress.com/2016/08/22/getting-started-with-amp-for-e-commerce/
https://www.ampproject.org/latest/blog/e-commerce-at-the-speed-of-amp/
https://ampbyexample.com/introduction/amp_for_e-commerce_getting_started/
Ebay: http://www.ebaytechblog.com/2016/06/30/browse-ebay-with-style-and-speed/
When the AMP Project first launched, the initial use cases and feature development focused on building AMP to support news and blog content. However, the AMP Project’s ambition has always been making the consumption of any type of mobile content vastly better and faster than we had seen before. Ideally, the format should allow anyone to create high performing websites across many verticals—from news to retail to travel and beyond.